path: root/files/ko/web/css/시작하기/리스트/index.html

---
title: 리스트
slug: Web/CSS/시작하기/리스트
translation_of: Learn/CSS/Styling_text/Styling_lists
translation_of_original: Web/Guide/CSS/Getting_started/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">&lt;ul&gt;
  &lt;li class="open"&gt;Lorem ipsum&lt;/li&gt;
  &lt;li class="closed"&gt;Dolor sit&lt;/li&gt;
  &lt;li class="closed"&gt;Amet consectetuer&lt;/li&gt;
  &lt;li class="open"&gt;Magna aliquam&lt;/li&gt;
  &lt;li class="closed"&gt;Autem veleum&lt;/li&gt;
&lt;/ul&gt;
</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;">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Sample document 2&lt;/title&gt;
    &lt;link rel="stylesheet" href="style2.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;

    &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
    &lt;ul&gt;
      &lt;li&gt;Arctic&lt;/li&gt;
      &lt;li&gt;Atlantic&lt;/li&gt;
      &lt;li&gt;Pacific&lt;/li&gt;
      &lt;li&gt;Indian&lt;/li&gt;
      &lt;li&gt;Southern&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h3 class="numbered"&gt;Numbered paragraphs&lt;/h3&gt;
    &lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
    &lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
    &lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
    &lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
    &lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;

  &lt;/body&gt;
&lt;/html&gt;
</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>