Articles
CSS 소개
목록 관련 CSS 속성

목록 관련 CSS 속성

이 기사에서는 목록 관련 CSS 속성에 대해 설명합니다.

당신은 list-style 속성 및 counter() 함수를 사용하는 방법과 작성하는 방법을 배울 수 있습니다.

YouTube Video

미리보기를 위한 HTML

css-list.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-list.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>List Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>List Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>list-style</h3>
 23            <section>
 24                <header><h4>list-style-type: circle; list-style-position: inside;</h4></header>
 25                <section class="sample-view">
 26                    <h5>Unordered List (ul)</h5>
 27                    <ul>
 28                        <li>Item 1</li>
 29                        <li>Item 2</li>
 30                        <li>Item 3</li>
 31                    </ul>
 32                </section>
 33                <header><h4>list-style: upper-roman outside</h4></header>
 34                <section class="sample-view">
 35                    <h5>Ordered List (ol)</h5>
 36                    <ol>
 37                        <li>First</li>
 38                        <li>Second</li>
 39                        <li>Third</li>
 40                    </ol>
 41                </section>
 42                <header><h4>list-style-image: url('custom-bullet.png')</h4></header>
 43                <section class="sample-view">
 44                    <h5>Custom Bullet List</h5>
 45                    <ul class="custom-list">
 46                        <li>Custom Item 1</li>
 47                        <li>Custom Item 2</li>
 48                        <li>Custom Item 3</li>
 49                    </ul>
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>counter()</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58dl {
 59    counter-reset: item;
 60}
 61
 62dl dt::before {
 63    counter-increment: item; /* Increment the counter */
 64    content: counter(item) ". "; /* Display the counter */
 65}
 66</pre>
 67                <header><h4>HTML</h4></header>
 68<pre>
 69&lt;dl&gt;
 70    &lt;dt&gt;Term A&lt;/dt&gt;
 71    &lt;dd&gt;Explication for term A&lt;/dd&gt;
 72    &lt;dt&gt;Term B&lt;/dt&gt;
 73    &lt;dd&gt;Explication for term B&lt;/dd&gt;
 74    &lt;dt&gt;Term C&lt;/dt&gt;
 75    &lt;dd&gt;Explication for term C&lt;/dd&gt;
 76&lt;/dl&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <dl>
 81                        <dt>Term A</dt>
 82                        <dd>Explication for term A</dd>
 83                        <dt>Term B</dt>
 84                        <dd>Explication for term B</dd>
 85                        <dt>Term C</dt>
 86                        <dd>Explication for term C</dd>
 87                    </dl>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>counters()</h3>
 93            <section>
 94                <header><h4>CSS</h4></header>
 95<pre class="sample">
 96ol {
 97    list-style: none;
 98    counter-reset: list-counter;
 99}
100
101li {
102    counter-increment: list-counter;
103}
104
105li::before {
106    content: counters(list-counter, ".") " ";
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;ol&gt;
112    &lt;li&gt;Item A
113        &lt;ol&gt;
114            &lt;li&gt;Subitem A-1&lt;/li&gt;
115            &lt;li&gt;Subitem A-2&lt;/li&gt;
116        &lt;/ol&gt;
117    &lt;/li&gt;
118    &lt;li&gt;Item B
119        &lt;ol&gt;
120            &lt;li&gt;Subitem B-1&lt;/li&gt;
121        &lt;/ol&gt;
122    &lt;/li&gt;
123&lt;/ol&gt;
124</pre>
125                <header><h4>HTML+CSS</h4></header>
126                <section class="sample-view">
127                    <ol>
128                        <li>Item A
129                            <ol>
130                                <li>Subitem A-1</li>
131                                <li>Subitem A-2</li>
132                            </ol>
133                        </li>
134                        <li>Item B
135                            <ol>
136                                <li>Subitem B-1</li>
137                            </ol>
138                        </li>
139                    </ol>
140                </section>
141            </section>
142            <section>
143                <header><h4>CSS</h4></header>
144<pre class="sample">
145article {
146    counter-reset: chapter;
147}
148h1.chapter {
149    counter-increment: chapter;
150    counter-reset: section;
151}
152h1.chapter::before {
153    content: counter(chapter) " ";
154}
155h2.section {
156    counter-increment: section;
157    counter-reset: sub-section;
158}
159h2.section::before {
160    content: counters(chapter, ".") "." counter(section) " ";
161}
162h3.sub-section {
163    counter-increment: sub-section;
164}
165h3.sub-section::before {
166    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
167}
168</pre>
169                <header><h4>HTML</h4></header>
170<pre>
171&lt;h1 class=&quot;chapter&quot;&gt;Chapter A&lt;/h1&gt;
172&lt;h2 class=&quot;section&quot;&gt;Section A-1&lt;/h2&gt;
173&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-1&lt;/h3&gt;
174&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-2&lt;/h3&gt;
175
176&lt;h2 class=&quot;section&quot;&gt;Section A-2&lt;/h2&gt;
177&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-2-1&lt;/h3&gt;
178
179&lt;h1 class=&quot;chapter&quot;&gt;Chapter B&lt;/h1&gt;
180&lt;h2 class=&quot;section&quot;&gt;Section B-1&lt;/h2&gt;
181&lt;h3 class=&quot;sub-section&quot;&gt;Subsection B-1-1&lt;/h3&gt;
182</pre>
183                <header><h4>HTML+CSS</h4></header>
184                <section class="sample-view">
185                    <h1 class="chapter">Chapter A</h1>
186                    <h2 class="section">Section A-1</h2>
187                    <h3 class="sub-section">Subsection A-1-1</h3>
188                    <h3 class="sub-section">Subsection A-1-2</h3>
189
190                    <h2 class="section">Section A-2</h2>
191                    <h3 class="sub-section">Subsection A-2-1</h3>
192
193                    <h1 class="chapter">Chapter B</h1>
194                    <h2 class="section">Section B-1</h2>
195                    <h3 class="sub-section">Subsection B-1-1</h3>
196                </section>
197            </section>
198        </article>
199    </main>
200</body>
201</html>

목록 관련

list-style 속성 

 1ul {
 2    list-style-type: circle; /* Empty circle bullets */
 3    list-style-position: inside; /* Position bullets inside the content area */
 4}
 5
 6ol {
 7    /* Uppercase Roman numerals with bullets positioned outside */
 8    list-style: upper-roman outside;
 9}
10
11.custom-list {
12    list-style-image: url('custom-bullet.png'); /* Custom image bullets */
13}

list-style 속성은 <ul> 및 <ol>과 같은 HTML 목록 요소에 대해 목록 표시자(불릿) 또는 번호의 스타일을 지정하는 데 사용되는 CSS 속성입니다. 이 속성을 사용하면 목록의 전반적인 스타일을 제어할 수 있어 목록의 외관을 사용자 정의하는 데 유용합니다.

이 예제에서는 다음 스타일이 적용됩니다.

  • ul: 비어 있는 원형 불릿이 내부에 표시됩니다.
  • ol: 대문자 로마 숫자로 매겨지며 숫자는 외부에 표시됩니다.
  • custom-list 클래스: 지정된 이미지가 불릿으로 표시됩니다.

list-style 구조

list-style은 다음 세 가지 속성의 약어입니다:

  • list-style-type: 목록 항목의 표시자(불릿 또는 번호) 유형을 지정합니다.
  • list-style-position: 표시자가 목록 항목의 내부(inside) 또는 외부(outside)에 배치될지 지정합니다.
  • list-style-image: 목록 표시자로 사용될 이미지를 지정합니다.

기본 사용법 

1ul {
2    list-style: square inside url('path/to/image.png');
3}

이 코드는 다음과 같이 작동합니다:

  • list-style-type: square: 표시자 유형을 사각형으로 설정합니다.
  • list-style-position: inside: 표시자가 목록 항목 내부에 표시됩니다.
  • list-style-image: url('path/to/image.png'): 이미지를 표시자로 사용합니다.

개별 속성에 대한 설명

list-style-type

list-style-type은 목록의 마커 유형을 지정합니다. 사용 가능한 스타일은 목록 유형에 따라 달라집니다.

값의 예 
 1ul {
 2    /* Change list bullets to empty circles */
 3    list-style-type: circle;
 4}
 5
 6ol {
 7    /* Number list items with lowercase letters (a, b, c, ...) */
 8    list-style-type: lower-alpha;
 9}
10
11ol.roman-list {
12    /* Number list items with uppercase roman numerals (I, II, III, ...) */
13    list-style-type: upper-roman;
14}
  • none: 마커가 표시되지 않습니다.
  • disc (기본값): 작은 검은 원.
  • circle: 작은 빈 원 (반지 모양).
  • square: 작은 사각형.
  • decimal: 숫자로 된 목록 (예: 1, 2, 3, ...).
  • lower-alpha: 소문자 알파벳 (예: a, b, c, ...).
  • upper-alpha: 대문자 알파벳 (예: A, B, C, ...).
  • lower-roman: 소문자 로마 숫자 (예: i, ii, iii, ...).
  • upper-roman: 대문자 로마 숫자 (예: I, II, III, ...).
list-style-position 
1ul {
2    list-style-position: inside;
3}

list-style-position 속성은 마커(불릿)가 목록 항목의 외부 또는 내부에 배치되는지를 지정합니다. list-style-position은 다음 값을 가질 수 있습니다:.

  • outside: 마커가 목록 항목 외부에 배치되며 항목은 마커 이후에 시작됩니다. 이 값은 기본값입니다.
  • inside: 마커가 목록 항목 내부에 배치되며 텍스트의 일부로 표시됩니다.
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

list-style-image 속성은 이미지를 목록 마커로 사용할 때 설정합니다. 이미지는 url()로 지정되며, 이미지를 불러올 수 없는 경우 list-style-type으로 지정된 마커가 표시됩니다.

list-style 단축 속성 

1ul {
2    list-style: square inside url('bullet.png');
3}

list-style 속성은 list-style-type, list-style-position, list-style-image를 한 번에 설정할 수 있는 단축 속성입니다. 순서는 유연하지만 일반적으로 이 예제와 같이 작성됩니다. 이 경우 목록 항목 내부에 사각형 불릿이 표시되고 마커로 이미지가 표시됩니다.

요약

  • list-style은 목록의 모양(마커 유형, 위치, 사용자 정의 이미지)을 한 번에 지정할 수 있는 단축 속성입니다.
  • list-style-type, list-style-position, list-style-image를 개별적으로 설정할 수도 있습니다.
  • 레이아웃과 디자인에 따라 리스트 마커를 유연하게 커스터마이징할 수 있습니다.

CSS 카운터 (counter()) 

 1/* Reset the counter */
 2dl {
 3    counter-reset: item;
 4}
 5
 6/* Apply the counter to list items */
 7dl dt::before {
 8    counter-increment: item; /* Increment the counter */
 9    content: counter(item) ". "; /* Display the counter */
10}

CSS 카운터를 사용하여 리스트 항목이나 특정 요소를 자동으로 번호 매길 수 있습니다.

카운터 생성 및 초기화 

1/* Create and initialize the counter */
2ol {
3  counter-reset: section; /* Set the counter name to 'section' */
4}

counter-reset 속성을 사용하여 카운터를 생성하고 초기화할 수 있습니다.

카운터 증가 

1/* Increment the counter and display it */
2li::before {
3  counter-increment: section; /* Increment the counter by 1 */
4  content: counter(section) ". "; /* Display the counter value */
5}

counter-increment 속성을 사용하여 카운터를 증가시키고 counter 함수를 통해 카운터 값을 표시할 수 있습니다.

counters()

CSS의 counters 함수는 리스트 항목 번호 매기기나 단락 정렬과 같은 커스텀 카운터 관리에 매우 유용합니다. 이 함수는 여러 카운터 값을 문자열로 연결하여 CSS 콘텐츠에 표시할 수 있습니다. 여기에서는 counters 함수의 기본 사용법부터 실용적인 응용 예제까지 자세히 설명하겠습니다.

counter와 counters의 차이점

counter와 counters 함수는 모두 카운터 값을 표시하는 데 사용되지만, 다음과 같은 차이점이 있습니다.

  • counter: 단일 카운터 값을 가져옵니다.
  • counters: 여러 카운터 값을 지정된 구분자로 연결하여 표시합니다.

예를 들어, 중첩된 리스트 항목에서 카운터를 사용하고자 할 경우 부모와 자식 카운터 값을 연결하여 counters 함수를 사용해 표시할 수 있습니다.

counters 함수의 문법 

counters(<counter-name>, <string>);

counters 함수는 다음과 같은 문법으로 사용됩니다.

  • <counter-name>: 사용할 카운터의 이름을 지정합니다.
  • <string>: 각 카운터 사이에 삽입할 문자열을 지정합니다 (보통 . 또는 - 같은 구분자).

counters 함수 사용 예제

다음으로, counters 함수를 사용하는 예제를 살펴보겠습니다.

 1ol {
 2    list-style: none;
 3    counter-reset: list-counter;
 4}
 5
 6li {
 7    counter-increment: list-counter;
 8}
 9
10li::before {
11    content: counters(list-counter, ".") " ";
12}
  • 이 예제에서는 2단계 중첩 리스트에 대해 부모와 자식 카운터가 연결됩니다.
    • list-counter 카운터가 정의되고 있습니다.
    • counters 함수는 부모 목록 카운터와 자식 목록 카운터를 연결하고 표시하는 데 사용됩니다.

다단계 카운터를 사용하는 고급 예제

counters 함수를 사용하면 사용자 정의 번호 매기기나 단락 번호 매기기와 같은 다단계 카운터를 유연하게 관리할 수 있습니다. 예를 들어, 장과 섹션이 포함된 문서를 작성할 때 유용합니다.

 1article {
 2    counter-reset: chapter;
 3}
 4
 5h1.chapter {
 6    font-size: 1.2rem;
 7    counter-increment: chapter;
 8    counter-reset: section;
 9}
10
11h1.chapter::before {
12    content: counter(chapter) " ";
13}
14
15h2.section {
16    font-size: 1.1rem;
17    counter-increment: section;
18    counter-reset: sub-section;
19}
20
21h2.section::before {
22    content: counters(chapter, ".") "." counter(section) " ";
23}
24
25h3.sub-section {
26    font-size: 1rem;
27    counter-increment: sub-section;
28}
29
30h3.sub-section::before {
31    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
32}

이 코드에서는 장(h1), 섹션(h2), 하위 섹션(h3)에 대한 카운터가 각각 초기화되며, counters 함수를 사용하여 각 레벨을 연결합니다.

요약

counters 함수는 다중 카운터를 계층적으로 커스터마이즈하여 표시하고 싶을 때 매우 유용합니다. CSS 카운터를 사용하면 목록과 제목의 번호 매기기를 자유롭게 커스터마이즈할 수 있어 웹 페이지에 고급 정보 구조를 제공합니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

박스 모델 장식과 관련된 CSS 속성테이블 관련 CSS 속성