순서가 있는 태그 → OL, UL, li 태그

순서가 있는 태그 → OL, UL, li 태그

 

1. OL 태그

- Order List
- 순서가 있는 목록 태그

- li 의 부모 태그
- 순번이 달린다.

- OL 자체를 가운데 정렬하고자 할 때 margin: 0 auto; 해준다.

 

 

 

2. UL 태그

- Un Order List
- 순서가 없는 목록 태그.

- li의 부모 태그
- style 지정을 통해서 블릿 기호의 모양 변경 가능

- UL 자체를 가운데 정렬하고자 할 때 margin: 0 auto; 해준다.

 

 

 

3. li 태그

- UL, OL 태그의 자식 태그로 사용

- list-style: 을 이용해서 태그의 스타일을 바꿔줄 수 있다.

- list-style: none; 으로 초기화해주면 블릿 기호를 제거할 수 있다.

- UL, OL 태그에 text-align: 을 이용해서 텍스트를 정렬할 수 있다.

 

- li 태그는 blcok 속성이기 때문에 한줄 다 차지한다.  → 글자가 짧아도 다음 li 가 옆으로 붙지 않고 밑으로 붙음

 

- li 태그에 display: inline-blcok 속성을 이용하면 가로로 정렬 가능하다.

  → 이 경우 li 태그 사이에 공백이 존재하게 되는데, 부모 속성에 font-size: 0; 을 통해 공백 제거 가능

- float: left; 속성을 통해서도 가로로 정렬 가능

- 부모 속성에 display: flex; 를 이용해서 가로로 정렬 가능