[수업노트](10.10.21)D+9 class/h1 ~ 6/ul, ol, li
1. (CSS)body 엘리먼트 노멀라이즈
- 컴퓨터가 유저의 편의를 위해 임의로 지정된 스타일이나 기본값을 코딩시작전 평범한스타일로 만들어주는것
- body { margin:0; }
- a { color:inherit;
text-decoration:none;}
2. (HTML,CSS) Class 속성
- 주로 사용되는 태그(div,nav,section,article)한정되어있기 때문에 특정엘리먼트에 특정 속성값을 줄때 별명(class)을 붙여준다
ex) HTML: <div class="menu-box">
CSS: .menu-box{~~~}
- 하나의 태그에 무한대 부여가능
- 클래스 속성값은 유저 마음대로 부여가능
- 숫자로 시작하는 속성값은 부여할 수 없음
* HTML작성: 클래스 속성값 여러개 부여 시
, 사용금지! 띄어쓰기
* CSS작성시 띄어쓰기 유의
.a.b → a와b 모두를 가진 엘리먼트 선택
.a .b → .a엘리먼트의 자식이면서 .b를 가진 엘리먼트 선택
3. (HTML)h1~h2
- 제목태그, 굵기와 크기 차이 h1이 제일큼
- 노멀라이즈: h1{ margin:0; }
4. (HTML)ul,li,ol
- ul: 순서가 없는 목록
- li: 항목
- ol: 순서가 있는 목록
* ol,ul 자식으로는 오직 li만 들어갈 수 있음(li의 자식으로 ul,ol 들어갈 수 있음)
- 목록관련 데이터 작성시 사용, 모를땐 div사용
- 노멀라이즈: ul,li,ol { list-style:none; margin:0; padding:0;}
<nav class="mene-box">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</nav>
/*노말라이즈*/
body,
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
.mene-box {
text-align: center;
}
.mene-box > ul {
background-color: #afafaf;
display: inline-block;
padding: 0 20px;
border-radius: 20px;
}
.mene-box > ul > li {
display: inline-block;
}
.mene-box > ul > li > a {
padding: 20px;
display: block;
}
.mene-box > ul > li:hover > a {
color: white;
background-color: black;
}