From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../index.html" | 244 +++++++++++++++++++++ 1 file changed, 244 insertions(+) create mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\246\254\354\212\244\355\212\270/index.html" (limited to 'files/ko/web/css/시작하기/리스트/index.html') diff --git "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\246\254\354\212\244\355\212\270/index.html" "b/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\246\254\354\212\244\355\212\270/index.html" new file mode 100644 index 0000000000..527eaaa768 --- /dev/null +++ "b/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\246\254\354\212\244\355\212\270/index.html" @@ -0,0 +1,244 @@ +--- +title: 리스트 +slug: Web/CSS/시작하기/리스트 +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +

{{ CSSTutorialTOC() }}

+
+ 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+

{{ 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는 세가지 방법의 마커가 있다. 브라우저에서는 다음과 같이 보여진다.

+ +

다른 이미지도 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>
+
+

위 코드는 아래처럼 보여질 것이다.

+ + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+

순차 리스트

+

순차리스트는 각 리스트 아이템이 순차적으로 순서가 표시된 마커와 보여진다.

+

{{ cssxref("list-style") }}속성으로 마커 타입을 설정 하라.

+ +
+
+ 예제
+

이 예제에서는 'info' class의 {{ HTMLElement("ol") }} elements에서, 아이템들이 대문자 순차 마커로 표시된다.

+ 
ol.info {list-style: upper-latin;}
+
+

아래 리스트 내의 {{ HTMLElement("li") }} element는 위의 스타일을 상속한다.

+ + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+
+
+ 좀더 자세히
+

{{ 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

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+

Numbered paragraphs

+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+ 도전
+

예제 stylesheet에 대양 표시 앞에 로마숫자로 i에서 v까지 나타나도록 추가 해 보라.

+ + + + + + +
+

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

 

+

예제 stylesheet를 아래와 같이 대문자가 단락앞에 나오도록 만들어 보라.

+ + + + + + +
+

(A) The oceans

+

. . .

+

(B) Numbered paragraphs

+

. . .

+
+
+

정답 확인.

+

다음에는?

+

{{ nextPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자") }}브라우저에서 예제 Document를 표시할때, element를 페이지에 element 주변으로 공간을 만든다. 다음장에서는 CSS가 어떻게 element아래쪽에 놓인 박스 모양과 동작하는지 설명한다(boxes.xm).

-- cgit v1.2.3-54-g00ecf