1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
|
---
title: 리스트
slug: Web/CSS/시작하기/리스트
translation_of: Learn/CSS/Styling_text/Styling_lists
---
<p>{{ CSSTutorialTOC() }}</p>
<div class="warning">
<strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Content", "내용물") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 10번째 장; 이번 장에서는 CSS에서 리스트를 어떻게 보여줄 것인지 설정하는 법에 대해 알아보자. 리스트를 포함하는 새로운 예제 Document를 생성하고, 리스트 스타일을 위한 새로운 stylesheet도 생성하라.</p>
<h2 class="clearLeft" id="정보_리스트">정보: 리스트</h2>
<p><a href="/en-US/docs/CSS/Getting_Started/Content" title="/en-US/docs/CSS/Getting_Started/Content">지난 섹션</a>에서 도전과제를 해결했다면, 어떤 elememt 앞에 리스트 아이템처럼 보여지는 내용물을 추가 하는 법을 보았을 것이다.</p>
<p>CSS는 리스트를 위한 특별한 속성을 제공한다. 이는 무엇보다도 사용하기 편리한 방법이다.</p>
<p>리스트 속성을 지정 하려면, {{ cssxref("list-style") }} 속성을 통해 마커 타입을 지정하라.</p>
<p>CSS에 있는 설렉터 규칙은 리스트 아이템 element를 선택 할 수도 있고(예를 들면, {{ HTMLElement("li") }}) 부모 리스트 element도 선택 가능하다. (예를 들면 {{ HTMLElement ("ul") }}) 리스트 element도 스타일을 상속 받는다.</p>
<h3 id="무순서_리스트">무순서 리스트</h3>
<p><em>무순서</em> 리스트에서는, 각 리스트 아이템들이 같은 방식으로 mark된다.</p>
<p>CSS는 세가지 방법의 마커가 있다. 브라우저에서는 다음과 같이 보여진다.</p>
<ul style="padding-left: 2em;">
<li style="list-style-type: disc;"><code>disc</code></li>
<li style="list-style-type: circle;"><code>circle</code></li>
<li style="list-style-type: square;"><code>square</code></li>
</ul>
<p>다른 이미지도 URL로 설정 가능하다.</p>
<div class="tuto_example">
<div class="tuto_type">
예제</div>
<p>아래 규칙은 서로 다른 class의 리스트 아이템에 서로 다른 마커를 사용하고 있다.</p>
<pre class="brush:css">li.open {list-style: circle;}
li.closed {list-style: disc;}
</pre>
<p>When these classes are used in a list, they distinguish between open and closed items (for example, in a to-do list):</p>
<pre class="brush:css"><ul>
<li class="open">Lorem ipsum</li>
<li class="closed">Dolor sit</li>
<li class="closed">Amet consectetuer</li>
<li class="open">Magna aliquam</li>
<li class="closed">Autem veleum</li>
</ul>
</pre>
<p>위 코드는 아래처럼 보여질 것이다.</p>
<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
<tbody>
<tr>
<td>
<ul style="padding-right: 6em;">
<li style="list-style-type: circle;">Lorem ipsum</li>
<li style="list-style-type: disc;">Dolor sit</li>
<li style="list-style-type: disc;">Amet consectetuer</li>
<li style="list-style-type: circle;">Magna aliquam</li>
<li style="list-style-type: disc;">Autem veleum</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="순차_리스트">순차 리스트</h3>
<p>순차리스트는 각 리스트 아이템이 순차적으로 순서가 표시된 마커와 보여진다.</p>
<p>{{ cssxref("list-style") }}속성으로 마커 타입을 설정 하라.</p>
<ul style="padding-left: 2em;">
<li style=""><code>decimal</code></li>
<li style=""><code>lower-roman</code></li>
<li style=""><code>upper-roman</code></li>
<li style=""><code>lower-latin</code></li>
<li style=""><code>upper-latin</code></li>
</ul>
<div class="tuto_example">
<div class="tuto_type">
예제</div>
<p>이 예제에서는 'info' class의 {{ HTMLElement("ol") }} elements에서, 아이템들이 대문자 순차 마커로 표시된다.</p>
<pre class="brush:css">ol.info {list-style: upper-latin;}
</pre>
<p>아래 리스트 내의 {{ HTMLElement("li") }} element는 위의 스타일을 상속한다.</p>
<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
<tbody>
<tr>
<td>
<ul>
<li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li>
<li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li>
<li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li>
<li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li>
<li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tuto_details">
<div class="tuto_type">
좀더 자세히</div>
<p>{{ cssxref("list-style") }}속성은 약어이다. 다소 복잡한 stylesheet에서는 속성과 그 값을 분리해서 사용하기를 원할 수 있다. 이 분리된 속성을 연결하는 방법이나 CSS에서 리스트에 더 자세한 설정법을 알려면{{ cssxref("list-style") }} 참조 페이지를 확인하라.</p>
<p>만약 HTML같은 관습적인 태그 비순차 리스트 아이템({{ HTMLElement("ul") }})와 순차 리스트 아이템({{ HTMLElement("ol") }})를 제공하는 마크업 언어를 사용한다면, 그 태그를 써서 쉽게 연습 해 볼 수 있다. 어쨌던 CSS써서 {{ HTMLElement("ul") }}를 순차 표시 할수 있고 {{ HTMLElement("ol") }} 를 통해 비순차를 원한다면 표시 할 수도 있다.</p>
<p>브라우저마다 리스트 스타일을 보여주는 자체 방식이 있다. Stylesheet로 모든 브라우저에서 동일하게 보여지는 것을 기대하지는 마라.</p>
</div>
<h3 id="카운터">카운터</h3>
<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
<p><strong>참고: </strong> 일부 브라우저는 카운터를 지원하지 않는다. <a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/">Quirks Mode site의 </a><a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html">CSS 내용물과 브라우저 호환성</a> 페이지에 브라우저 호환 차트와 CSS의 다른 기능에 대한 호환성을 확인 할 수 있다. 이 사이트 <a href="/en/CSS_Reference" title="https://developer.mozilla.org/en/CSS_Reference">CSS 참조Reference</a>의 individual page(?)에는 브라우저 호환성 테이블도 확인 할 수 있다.</p>
</div>
<p>리스트 아이템 나열 뿐 아니라 Element를 순위매김 하기 위해 카운터를 사용할 수 있다. 예를 들어, documents내에서 머릿말니아 단락의 순서를 표시 하고 싶을때 사용 가능하다.</p>
<p>순위 매김을 사용하려면 카운터에 이름을 할당하여 사용하면 된다.</p>
<p>element에 순위메김 추가를 시작하기 전에 {{ cssxref("counter-reset") }}속성으로 초기화 하고 사용하고자 하는 카운터 이름을 쓰라. 카운터를 사용하는 elements의 부모에다 초기화 과정을 적용하는 것이 좋다. 그러나, 리스트 아이템 시작하기 전 어느 element에서든 초기화를 사용해도 된다.</p>
<p>카운터가 증가하는 각 element에서, {{ cssxref("counter-increment") }} 속성을 사용하여 증가 하고 증가 하고자 하는 이름도 표시하라.</p>
<p>카운터를 표시하기 위해서는 {{ cssxref(":before") }}나 {{ cssxref(":after") }} 설렉터를 써서 <code>content속성을 사용하여라.</code>(이전 페이지에서, <strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Content</a></strong>사용에 대해 참고하라).</p>
<p><code>content</code> 속성 값에 <code>counter()카운터 이름과 함께 사용하라.</code> 선택적으로 타입도 명시 가능하다. 타입은 위에서 언급한 <strong>Ordered lists</strong> 섹션에 나온것과 같다.</p>
<p>보통 카운터를 표시하는 element도 하나씩 카운터 값이 증가 한다.</p>
<div class="tuto_example">
<div class="tuto_type">
예제</div>
<p>이 규칙은 class가 'numbered'인 모든 {{ HTMLElement("h3") }} element의 카운터를 초기화 한다.</p>
<pre class="brush:css">h3.numbered {counter-reset: mynum;}
</pre>
<p> </p>
<p>이 아래 규칙은 모든 'numbered' class의 {{ HTMLELement("p") }} element에 카운터 값을 표시하고 그 값을 증가 시킨다.</p>
<pre class="brush:css">p.numbered:before {
content: counter(mynum) ": ";
counter-increment: mynum;
font-weight: bold;}
</pre>
<p>결과는 아래와 같다.</p>
<table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;">
<tbody>
<tr>
<td><strong>Heading</strong><br>
<p><strong>1: </strong>Lorem ipsum</p>
<p><strong>2: </strong>Dolor sit</p>
<p><strong>3: </strong>Amet consectetuer</p>
<p><strong>4: </strong>Magna aliquam</p>
<p><strong>5: </strong>Autem veleum</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tuto_details">
<div class="tuto_type">
좀더 자세히</div>
<p>카운터가 지원되지 않는 브라우저에서는 카운터를 사용 할 수 없다.</p>
<p>카운터가 사용 가능하다면 카운터로 리스트아이템에서 지원 되는 것처럼 별도로 다른 내용물에 순위매김을 사용 할 수 있다. 예를 들면 위에서 처럼, 카운터는 굵은 글씨로 그외 아이템은 정상 글씨로 가능하다.</p>
<p>좀더 다양한 방법으로 카운터를 사용 할 수 있는데 —예를 들면, 형식적인 Document의 순서 섹션, 머릿말, 보조 머릿말과 단락등에서 사용 가능하다. 자세한 사항은 CSS사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> 를 확인 하라.</p>
</div>
<h2 id="액션_화려한_리스트">액션: 화려한 리스트</h2>
<p><code>새로이 doc2.html</code>파일을 만들어라. 아래 코드를 복사하라.</p>
<pre class="brush:html;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document 2</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<h3 id="oceans">The oceans</h3>
<ul>
<li>Arctic</li>
<li>Atlantic</li>
<li>Pacific</li>
<li>Indian</li>
<li>Southern</li>
</ul>
<h3 class="numbered">Numbered paragraphs</h3>
<p class="numbered">Lorem ipsum</p>
<p class="numbered">Dolor sit</p>
<p class="numbered">Amet consectetuer</p>
<p class="numbered">Magna aliquam</p>
<p class="numbered">Autem veleum</p>
</body>
</html>
</pre>
<p><code>style2.css</code>를 만들어 아래 내용을 복사하라.</p>
<pre class="brush:css;">/* numbered paragraphs */
h3.numbered {counter-reset: mynum;}
p.numbered:before {
content: counter(mynum) ": ";
counter-increment: mynum;
font-weight: bold;
}
</pre>
<p>배치와 주석이 맘에 들지 않으면 마음대로 변경하라.</p>
<p>브라우저에서 열어보라. 만약 브라우저가 카운터를 지원 한다면 아래 예제와 같이 보일 것이다. 브라우저가 지원하지 않는다면 숫자는 보이지 않을 것이다. (콜론도 보이지 않을 것이다.)</p>
<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
<tbody>
<tr>
<td>
<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
<ul style="">
<li>Arctic</li>
<li>Atlantic</li>
<li>Pacific</li>
<li>Indian</li>
<li>Southern</li>
</ul>
<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p>
<p><strong>1: </strong>Lorem ipsum</p>
<p><strong>2: </strong>Dolor sit</p>
<p><strong>3: </strong>Amet consectetuer</p>
<p><strong>4: </strong>Magna aliquam</p>
<p><strong>5: </strong>Autem veleum</p>
</td>
</tr>
</tbody>
</table>
<div class="tuto_example">
<div class="tuto_type">
도전</div>
<p>예제 stylesheet에 대양 표시 앞에 로마숫자로 i에서 v까지 나타나도록 추가 해 보라.</p>
<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
<tbody>
<tr>
<td>
<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
<ul style="">
<li>Arctic</li>
<li>Atlantic</li>
<li>Pacific</li>
<li>Indian</li>
<li>Southern</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>예제 stylesheet를 아래와 같이 대문자가 단락앞에 나오도록 만들어 보라.</p>
<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
<tbody>
<tr>
<td>
<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p>
<p><strong>. . .</strong></p>
<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p>
<p><strong>. . .</strong></p>
</td>
</tr>
</tbody>
</table>
</div>
<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Lists" title="en/CSS/Getting started/Challenge solutions#Lists">정답 확인.</a></p>
<h2 id="다음에는">다음에는?</h2>
<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자") }}브라우저에서 예제 Document를 표시할때, element를 페이지에 element 주변으로 공간을 만든다. 다음장에서는 CSS가 어떻게 element아래쪽에 놓인 박스 모양과 동작하는지 설명한다(<a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">boxes</a>.xm).</p>
|
