[CSS-웹표준 교과서]12. 목록

@ ul 요소와 ol 요소에 포함된 li 요소에는 내용을 포함하는 '기본 블록 레벨 박스'와 기호(그립)나 숫자, 알파벳을 표시하는 '마커 박스', 이 두 가지가 생성된다. 마커박스는 :before 가상 요소나 :after 가상 요소와 달리 기본 블록 박스의 위치에 영향을 주지 않으며 배치된다.

1. 목록 마커의 종류(list-style-type 속성)

 - 목록 마커는 '그립' '번호' '알파벳' 세 종류로 크게 나눌 수 있다.

 - 아래의 경우 il 요소는 display 속성에  'inline'이라고 지정되어 있기 때문에 list-style-type 속성은 무효가 된다. list-style-type 속성은 display 속성의 값이 'list-item'인 요소에만 적용되기 때문이다.

2. 목록 마커의 이미지(list-style-image 속성)

- none : 목록 마커에 이미지를 사용하지 않는다.
- <URI> : 목록 마커에 사용하는 이미지를 url() 함수로 지정한다.
- list-style-image속성이 list-style-type속성보다 우선한다.

 

3. 목록 마커의 위치(list-style-position 속성)

 - outside : 마커 박스를 기본 블록 박스의 바깥쪽에 배치한다.
 - inside : 마커 박스를 기본 블록 박스의 최초의 인라인 박스로 배치한다.

4. 목록 관련 속성의 일괄 지정(list-style 속성)

  - list-style 속성만으로 구현하는 경우 다음같이 지정한다.

 - 값을 생략한 속성은 기본값을 지정한 것임에 주의하자.

 - 이같이 지정하면 다음같이 지정한 것과 동일하게 해석된다.