[수업노트](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; 
}