CSS에서 list-style 속성은 목록과 관련된 여러 개별 속성들을 하나로 묶어주는 단축 속성(shorthand)입니다. 이 속성을 사용하면 list-style-type, list-style-position, list-style-image 등의 목록 관련 속성들을 별도로 작성하지 않고, 단 하나의 표현식으로 모두 지정할 수 있습니다.
list-style 속성의 구성 요소
list-style 단축 속성은 다음 세 가지 하위 속성을 포함합니다.
- list-style-type: 불릿(bullet)의 모양을 지정합니다. 예를 들어
square(사각형),circle(원),disc(채워진 원),decimal(숫자) 등이 있습니다. - list-style-position: 불릿의 위치를 결정합니다.
inside는 텍스트 흐름 안쪽에,outside는 바깥쪽에 배치합니다. - list-style-image: 기본 불릿 대신 이미지를 목록 마커로 사용할 수 있습니다.
사용 예제
아래 예제는 list-style 속성을 사용하여 목록 항목의 불릿을 사각형(square)으로 설정하고, 그 위치를 안쪽(inside)으로 지정한 코드입니다.
<html> <head> </head> <body> <ul style = "list-style: inside square;"> <li>Table</li> <li>Chair</li> </ul> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 'Table'과 'Chair'라는 두 개의 목록 항목이 사각형 불릿과 함께 표시되며, 불릿이 텍스트 영역 안쪽에 위치하게 됩니다. 만약 inside 대신 outside를 사용하면 불릿이 목록 텍스트의 바깥쪽, 즉 일반적인 목록처럼 들여쓰기된 형태로 나타납니다.
정리
list-style 단축 속성을 활용하면 코드를 간결하게 유지하면서 목록의 스타일을 효율적으로 제어할 수 있습니다. 각 하위 속성의 순서는 일반적으로 list-style-type, list-style-position, list-style-image 순으로 작성하는 것이 권장되며, 필요하지 않은 값은 생략할 수 있습니다.