{{ CSSTutorialTOC() }}
{{ previousPage("/en-US/docs/CSS/Getting_Started/Content", "내용물") }}CSS 시작하기 안내서 10번째 장; 이번 장에서는 CSS에서 리스트를 어떻게 보여줄 것인지 설정하는 법에 대해 알아보자. 리스트를 포함하는 새로운 예제 Document를 생성하고, 리스트 스타일을 위한 새로운 stylesheet도 생성하라.
지난 섹션에서 도전과제를 해결했다면, 어떤 elememt 앞에 리스트 아이템처럼 보여지는 내용물을 추가 하는 법을 보았을 것이다.
CSS는 리스트를 위한 특별한 속성을 제공한다. 이는 무엇보다도 사용하기 편리한 방법이다.
리스트 속성을 지정 하려면, {{ cssxref("list-style") }} 속성을 통해 마커 타입을 지정하라.
CSS에 있는 설렉터 규칙은 리스트 아이템 element를 선택 할 수도 있고(예를 들면, {{ HTMLElement("li") }}) 부모 리스트 element도 선택 가능하다. (예를 들면 {{ HTMLElement ("ul") }}) 리스트 element도 스타일을 상속 받는다.
무순서 리스트에서는, 각 리스트 아이템들이 같은 방식으로 mark된다.
CSS는 세가지 방법의 마커가 있다. 브라우저에서는 다음과 같이 보여진다.
disccirclesquare다른 이미지도 URL로 설정 가능하다.
아래 규칙은 서로 다른 class의 리스트 아이템에 서로 다른 마커를 사용하고 있다.
li.open {list-style: circle;}
li.closed {list-style: disc;}
When these classes are used in a list, they distinguish between open and closed items (for example, in a to-do list):
<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>
위 코드는 아래처럼 보여질 것이다.
|
순차리스트는 각 리스트 아이템이 순차적으로 순서가 표시된 마커와 보여진다.
{{ cssxref("list-style") }}속성으로 마커 타입을 설정 하라.
decimallower-romanupper-romanlower-latinupper-latin이 예제에서는 'info' class의 {{ HTMLElement("ol") }} elements에서, 아이템들이 대문자 순차 마커로 표시된다.
ol.info {list-style: upper-latin;}
아래 리스트 내의 {{ HTMLElement("li") }} element는 위의 스타일을 상속한다.
|
{{ cssxref("list-style") }}속성은 약어이다. 다소 복잡한 stylesheet에서는 속성과 그 값을 분리해서 사용하기를 원할 수 있다. 이 분리된 속성을 연결하는 방법이나 CSS에서 리스트에 더 자세한 설정법을 알려면{{ cssxref("list-style") }} 참조 페이지를 확인하라.
만약 HTML같은 관습적인 태그 비순차 리스트 아이템({{ HTMLElement("ul") }})와 순차 리스트 아이템({{ HTMLElement("ol") }})를 제공하는 마크업 언어를 사용한다면, 그 태그를 써서 쉽게 연습 해 볼 수 있다. 어쨌던 CSS써서 {{ HTMLElement("ul") }}를 순차 표시 할수 있고 {{ HTMLElement("ol") }} 를 통해 비순차를 원한다면 표시 할 수도 있다.
브라우저마다 리스트 스타일을 보여주는 자체 방식이 있다. Stylesheet로 모든 브라우저에서 동일하게 보여지는 것을 기대하지는 마라.
참고: 일부 브라우저는 카운터를 지원하지 않는다. Quirks Mode site의 CSS 내용물과 브라우저 호환성 페이지에 브라우저 호환 차트와 CSS의 다른 기능에 대한 호환성을 확인 할 수 있다. 이 사이트 CSS 참조Reference의 individual page(?)에는 브라우저 호환성 테이블도 확인 할 수 있다.
리스트 아이템 나열 뿐 아니라 Element를 순위매김 하기 위해 카운터를 사용할 수 있다. 예를 들어, documents내에서 머릿말니아 단락의 순서를 표시 하고 싶을때 사용 가능하다.
순위 매김을 사용하려면 카운터에 이름을 할당하여 사용하면 된다.
element에 순위메김 추가를 시작하기 전에 {{ cssxref("counter-reset") }}속성으로 초기화 하고 사용하고자 하는 카운터 이름을 쓰라. 카운터를 사용하는 elements의 부모에다 초기화 과정을 적용하는 것이 좋다. 그러나, 리스트 아이템 시작하기 전 어느 element에서든 초기화를 사용해도 된다.
카운터가 증가하는 각 element에서, {{ cssxref("counter-increment") }} 속성을 사용하여 증가 하고 증가 하고자 하는 이름도 표시하라.
카운터를 표시하기 위해서는 {{ cssxref(":before") }}나 {{ cssxref(":after") }} 설렉터를 써서 content속성을 사용하여라.(이전 페이지에서, Content사용에 대해 참고하라).
content 속성 값에 counter()카운터 이름과 함께 사용하라. 선택적으로 타입도 명시 가능하다. 타입은 위에서 언급한 Ordered lists 섹션에 나온것과 같다.
보통 카운터를 표시하는 element도 하나씩 카운터 값이 증가 한다.
이 규칙은 class가 'numbered'인 모든 {{ HTMLElement("h3") }} element의 카운터를 초기화 한다.
h3.numbered {counter-reset: mynum;}
이 아래 규칙은 모든 'numbered' class의 {{ HTMLELement("p") }} element에 카운터 값을 표시하고 그 값을 증가 시킨다.
p.numbered:before {
content: counter(mynum) ": ";
counter-increment: mynum;
font-weight: bold;}
결과는 아래와 같다.
| Heading 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum |
카운터가 지원되지 않는 브라우저에서는 카운터를 사용 할 수 없다.
카운터가 사용 가능하다면 카운터로 리스트아이템에서 지원 되는 것처럼 별도로 다른 내용물에 순위매김을 사용 할 수 있다. 예를 들면 위에서 처럼, 카운터는 굵은 글씨로 그외 아이템은 정상 글씨로 가능하다.
좀더 다양한 방법으로 카운터를 사용 할 수 있는데 —예를 들면, 형식적인 Document의 순서 섹션, 머릿말, 보조 머릿말과 단락등에서 사용 가능하다. 자세한 사항은 CSS사양서의 Automatic counters and numbering 를 확인 하라.
새로이 doc2.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>
style2.css를 만들어 아래 내용을 복사하라.
/* numbered paragraphs */
h3.numbered {counter-reset: mynum;}
p.numbered:before {
content: counter(mynum) ": ";
counter-increment: mynum;
font-weight: bold;
}
배치와 주석이 맘에 들지 않으면 마음대로 변경하라.
브라우저에서 열어보라. 만약 브라우저가 카운터를 지원 한다면 아래 예제와 같이 보일 것이다. 브라우저가 지원하지 않는다면 숫자는 보이지 않을 것이다. (콜론도 보이지 않을 것이다.)
|
The oceans
Numbered paragraphs 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum |
예제 stylesheet에 대양 표시 앞에 로마숫자로 i에서 v까지 나타나도록 추가 해 보라.
|
The oceans
|
예제 stylesheet를 아래와 같이 대문자가 단락앞에 나오도록 만들어 보라.
|
(A) The oceans . . . (B) Numbered paragraphs . . . |
{{ nextPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자") }}브라우저에서 예제 Document를 표시할때, element를 페이지에 element 주변으로 공간을 만든다. 다음장에서는 CSS가 어떻게 element아래쪽에 놓인 박스 모양과 동작하는지 설명한다(boxes.xm).