[HTML&CSS] HTML - h1 ~ h6 개념 ul, li 와 ol, li의 개념 및 예제

[HTML] h1 ~ h6 : 제목태그 (6으로 갈수록 크기가 작아짐.)

---

<목적에 맞는 태그>

 

- [HTML] ul, li (unordered list) : 순서가 정해지지 않은 리스트

★ <ul>의 자식은 <li> 밖에 없음!! (다른게 들어가면 컨트롤 불가!)

 

- [HTML] ol, li (ordered list) : 순서가 정해진 리스트

★ <ol>의 자식은 <li>밖에 없음!!

 

=> 둘다 리스트를 꾸리는 알맞은 상황에 사용하면 됨! (상황이 정확하지 않으면 div를 이용해서 쓰면 됨.) 

---

개념 및 예시

 

See the Pen h1~h6 개념, ul,li와 ol,li의 개념 by hoyeol0513 (@hoyeol0513) on CodePen.

---

[CSS] ul, li와 h1~h6 노멀라이즈 

 

- ul, li 노멀라이즈 : margin 과 padding, liststyle : none 으로 해주면 됨.

=> 기본적인 노멀라이즈 : body, ul, li와 a 노멀라이즈를 해주면 됨. ★★★★★★

body, ul, li {

      margin : 0;

      padding : 0;

      liststyle : none;

}

 

- h1 ~ h6 노멀라이즈 : h 시리즈 태그에는 기본적인 margin이 들어 있어서 margin : 0 으로 해주면 됨.

h1, h2, h3, h4, h5, h6 {
     margin:0;
}

---

개념 및 예시

 

See the Pen ul, li 노멀라이즈와 h시리즈 노멀라이즈 by hoyeol0513 (@hoyeol0513) on CodePen.