CSS list-style-type
list-style-type은 HTML 목록 요소의 불릿이나 숫자 스타일을 정의하는 CSS 속성이다.
웹사이트를 만들다 보면 목록을 어떻게 표현할지 고민하게 된다.
단순한 점 불릿이나 숫자만으로는 디자인적으로 부족하게 느껴질 때가 많다.
list-style-type을 활용하면 목록 앞에 표시되는 마커의 종류를 다양하게 변경할 수 있어 웹사이트의 가독성과 디자인 완성도를 높일 수 있다.
기본 개념
list-style-type은 HTML의 <ul>, <ol>, <li> 요소에 적용되는 CSS 속성으로, 목록 항목 앞에 표시되는 마커의 종류를 지정한다.
기본적으로 <ul>(순서 없는 목록)은 불릿(점)으로, <ol>(순서 있는 목록)은 숫자로 표시되지만, list-style-type을 사용하면 이러한 기본값을 원하는 스타일로 변경할 수 있다.
list-style-type은 CSS의 다른 속성들과 마찬가지로 상속되는 특성을 가지고 있어, 부모 요소에 적용하면 모든 자식 목록 요소에도 적용된다.
이 속성의 기본 문법은 다음과 같다:
selector {
list-style-type: value;
}속성값 종류
list-style-type 속성은 다양한 값을 지원하며, 크게 순서 없는 목록용 값과 순서 있는 목록용 값으로 나눌 수 있다.
순서 없는 목록(<ul>)에 주로 사용되는 값
| 속성값 | 설명 |
|---|---|
| disc | 채워진 원형 불릿(●), <ul>의 기본값 |
| circle | 빈 원형 불릿(○) |
| square | 채워진 사각형 불릿(■) |
| none | 마커 없음 |
순서 있는 목록(<ol>)에 주로 사용되는 값
| 속성값 | 설명 |
|---|---|
| decimal | 숫자(1, 2, 3…), <ol>의 기본값 |
| decimal-leading-zero | 앞에 0이 붙은 숫자(01, 02, 03…) |
| lower-roman | 소문자 로마 숫자(i, ii, iii…) |
| upper-roman | 대문자 로마 숫자(I, II, III…) |
| lower-alpha | 소문자 알파벳(a, b, c…) |
| upper-alpha | 대문자 알파벳(A, B, C…) |
| lower-greek | 소문자 그리스 문자(α, β, γ…) |
| 속성값 | 설명 |
|---|---|
| armenian | 아르메니아 숫자 |
| georgian | 조지아 숫자 |
| hebrew | 히브리 숫자 |
| cjk-ideographic | 중국, 일본, 한국식 표기법 |
| hiragana, hiragana-iroha | 일본 히라가나 |
| katakana, katakana-iroha | 일본 가타카나 |
list-style-type 속성은 CSS 카운터와 함께 사용하면 더욱 강력한 목록 스타일링이 가능하다.
브라우저 호환성
list-style-type은 대부분의 현대 브라우저에서 잘 지원되는 속성이지만, 일부 특수한 값들은 브라우저마다 지원 여부가 다를 수 있다.
기본적인 값들(disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman)은 모든 주요 브라우저에서 지원된다.
그러나 armenian, georgian, hebrew 같은 특수 숫자 체계나 hiragana, katakana 같은 일본어 문자 체계는 일부 브라우저에서만 제대로 표시될 수 있다.
브라우저별 지원 현황은 mdn web docs에서 참고하자.
크로스 브라우저 호환성을 고려한다면, 널리 지원되는 기본 값들을 사용하거나 fallback 스타일fallback 스타일은 CSS에서 특정 스타일이 지원되지 않거나 적용되지 않을 경우, 대안으로 사용되는 스타일을 말한다.을 제공하는 것이 좋다.
list-style-type 활용 예제
다양한 list-style-type 값을 활용한 실제 코드 예제를 살펴보자.
ul.disc {
list-style-type: disc;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
ol.decimal {
list-style-type: decimal;
}
ol.roman {
list-style-type: upper-roman;
}
ol.alpha {
list-style-type: lower-alpha;
}
/* 중첩 목록 스타일링 */
ul.nested {
list-style-type: disc;
}
ul.nested ul {
list-style-type: circle;
}
ul.nested ul ul {
list-style-type: square;
}예시
<ul class="disc">
<li>Disc 불릿 항목</li>
<li>Disc 불릿 항목</li>
</ul>
<ul class="circle">
<li>Circle 불릿 항목</li>
<li>Circle 불릿 항목</li>
</ul>
<!-- 순서 있는 목록 예제 -->
<ol class="decimal">
<li>숫자 항목</li>
<li>숫자 항목</li>
</ol>
<ol class="roman">
<li>로마 숫자 항목</li>
<li>로마 숫자 항목</li>
</ol>
<!-- 중첩 목록 예제 -->
<ul class="nested">
<li>첫 번째 수준 항목 (disc)
<ul>
<li>두 번째 수준 항목 (circle)
<ul>
<li>세 번째 수준 항목 (square)</li>
</ul>
</li>
</ul>
</li>
</ul>축약 속성
list-style-type은 단독으로 사용할 수도 있지만, list-style 축약 속성의 일부로 사용할 수도 있다.
list-style 축약 속성은 다음 세 가지 속성을 한 번에 설정할 수 있다.
- list-style-type
- 마커의 종류 (disc, circle, decimal 등)
- list-style-position
- 마커의 위치 (inside 또는 outside)
- list-style-image
- 마커로 사용할 이미지
list-style 축약 속성의 기본 문법
selector {
list-style: type position image;
}축약 속성 사용
ul {
list-style: square inside url('square.png');
}
ol {
list-style: upper-roman outside;
}
ul.simple {
list-style: circle;
}
축약 속성을 사용하면 코드를 더 간결하게 작성할 수 있으며, 지정하지 않은 속성은 기본값을 사용한다.
커스텀 마커
list-style-type으로 제공되는 기본 마커 외에도, 이미지나 SVG를 사용해 완전히 커스텀된 마커를 만들 수 있다.
이미지를 마커로 사용하는 방법은 두 가지가 있다.
list-style-image 속성 사용
간단하지만 제어가 제한적인 방법이다.
ul {
list-style-image: url('custom-bullet.png');
}::marker 가상 요소 사용
더 많은 제어가 가능한 방법이다.
li::marker {
content: '➤ ';
color: #0066cc;
font-weight: bold;
}background-image 활용
background-image를 활용한 고급 커스텀 마커 사용 방법이다.
ul {
list-style-type: none;
padding-left: 0;
}
ul li {
padding-left: 25px;
background-image: url('custom-bullet.svg');
background-repeat: no-repeat;
background-position: 0 3px;
background-size: 16px;
}
CSS 카운터 사용
CSS 카운터를 활용한 더 복잡한 커스텀 마커도 만들 수 있다.
ol {
list-style-type: none;
counter-reset: item;
}
ol li {
counter-increment: item;
position: relative;
padding-left: 2em;
}
ol li::before {
content: counter(item, decimal-leading-zero);
position: absolute;
left: 0;
color: #0066cc;
font-weight: bold;
}
list-style-type은 기본적인 마커 스타일링을 제공하지만, 위와 같은 방법들을 활용하면 웹사이트의 디자인 아이덴티티에 맞는 완전히 커스텀된 목록 스타일을 만들 수 있다.
현대적인 웹 디자인에서는 기본 list-style-type보다 이러한 커스텀 방식을 더 많이 활용하는 추세다.
list-style-type을 활용하여 목록의 시각적 표현을 다양화하고, 웹사이트의 가독성과 사용자 경험을 향상시켜보자.
목록은 정보를 구조화하는 가장 기본적인 방법 중 하나다. list-style-type을 통해 이 구조에 시각적 계층과 의미를 부여할 수 있다.
