크롬 "검사" 활용하기
- 마크업의 구조를 파악할 수 있다
- 요소의 CSS가 어떻게 구성되어 있는지 파악해 볼 수 있다
- 브라우저 "검사"를 통한 User-agent Stylesheet 기본 스타일 파악과 초기화
CSS 작성의 효율적인 방법
- link태그로 외부 css파일 연결시키기, 어떤 장점이 있는가?
이름표 체계, 클래스셀렉터 알아보기
- 같은 태그가 여러개이면, 이름표체계가 필요하다
- 클래스셀렉터 입문과 활용
- 클래스 올바로 사용하기
다양한 셀렉터들 Selectors
- Grouping
- 전체 셀렉터 Universal Selectors
- 타입 셀렉터 Type Selectors
- 클래스 셀렉터 Class Selectors
- 하위 셀렉터 Descendant Selectors
- 가상클래스 Pseudo Class, :hover
HTML
<!DOCTYPE html>
<html>
<head>
<title>Profile</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<img class="profile" src="images/profile04.png" />
<h1>JANE DOE</h1>
<p>WEB DESIGNER</p>
</div>
<div class="contents">
<div class="section">
<h2>Information</h2>
<ul>
<li>JANE DOE</li>
<li>12345678@naver.com</li>
<li>Seoul, Korea</li>
</ul>
</div>
<div class="section">
<h2>Skills</h2>
<ul>
<li>HTML+CSS</li>
<li>JavaScript</li>
<li>REACT</li>
</ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
CSS
/*CSS reset ( 우선적으로 해줘야함)*/
h1,
h2 p,
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
img {
vertical-align: top;
}
/* */
body {
background-color: aqua;
}
.wrapper {
background-color: blanchedalmond;
width: 800px;
margin: 0 auto;
}
.header {
background-size: cover;
background-position: center;
background-image: url(images/cover04.png);
padding: 80px 0;
text-align: center; /* inline elements(text)만 가운데 정렬.*/
color: white;
}
.header .profile {
width: 140px;
border: 10px solid white;
border-radius: 50%;
}
.header h1 {
font-size: 100px;
}
.header p {
border-top: 10px solid white;
width: 200px;
margin: 20px auto;
}
.section {
background-color: white;
margin: 20px;
padding: 20px;
}
.section h2 {
color: blue;
margin-bottom: 20px;
}
.footer {
background-color: blue;
}
- 제일 큰 덩어리부터 작업을 시작!
- width값이 지정되지 않으면 부모요소의 사이즈만큼 (height값은 자식요소의 사이즈만큼. (div - 큰덩어리에는 height값을 주지 않는다. 추후 자연스럽게 높이가 생김.)
- 블럭레벨박스. width값이 주어져도 오른쪽은 div의 덩어리의 공간!
(margin auto의 개념은 사용 가능한 공간을 자동으로 취하는것.(블럭레벨))
- 페이지는 크게 header - contents - footer 로 구성.
- class 이름은 숫자로 시작하지 않는다 / 의미가 없는 이름은 쓰지 않는다 / class명은 재사용 가능하다 / 대문자 가능- 그러나 쓰지마! / -_ 특수기호는 이거 두개만/ 띄어 쓰기 안됨 / class의 목적은 다른 요소와 구분되는 의미를 부여하는 것.
- div.header : div요소 중에 header class (= .header / *.header )- *는 universal selector. 모든 요소중. *생략가능 => .header로 씀
- div .header :div 요소 소속의 header class(하위요소) => header로 씀(하위셀렉터)
- 웹페이지 제작시 헤더와 푸터를 먼저 작성하고 위에서부터 제작
- 브라우저에서 주는 기본 스타일을 없애줘야함. (최상단에 작성을 해줌) - 우선순위!
- height은 가급적 주지말자~(내용이 많아지면 유지보수가 어려워짐)
- 전체적 레이아웃 (여백 등) 을 먼저 구성하자.
- img 요소는 블럭레벨 요소가 아님.
- text-align: center : inline elements(text)만 가운데 정렬하는것.
- *** 가운데 정렬은 text-align: center / margin: auto : margin은 블럭레벨요소 가운데 정렬임
- 부모요소에 프로퍼티(text-align, color 등- 주로 글자에대한것(typography)를 넣으면 자식요소에 상속됨.
검사기로 확인하고 MDN사이트에서 확실히 확인해보기~(상속의 프로퍼티)
'Front-end > HTML CSS' 카테고리의 다른 글
| CSS 시작순서(css resets) (0) | 2022.03.29 |
|---|---|
| box model 활용과제 (0) | 2022.03.29 |
| CSS- 이미지 하단 간격 없애기 (0) | 2022.03.28 |
| *CSS 기초 (0) | 2022.03.26 |
| *HTML 기초 (0) | 2022.03.26 |
