특정 목록 스타일 사용

개요

이 강좌는 글 머리기호 같은 것을 제어하기 위한 목록 지정 CSS를 사용하는 방법의 기본사항을 다룬다.

정보: 목록

[/en-US/docs/CSS/Getting_Started/Content last section]을 공부하였다면, 목록 항목으로 표시하기 위해 요소 앞에 내용을 추가하는 방법을 보았을 것이다.

CSS는 목록을 디자인하는 특별한 속성을 제공한다. 할 수 있을 때 언제든지, 이 속성을 사용하는 것이 보통은 더 편리하다.

리스트에 스타일을 지정하기 위해, 마커의 유형을 지정하는 [list-style] 속성을 사용한다.

CSS 규칙에서 선택자는 목록 항목 요소를 선택하거나 (예,

  • ), 또는 부모 목록 요소를 선택할 수 있다 (예, 목록 항목이 스타일을 상속받도록 [ul]을 선택할 수 있다).

    비순차 목록 (Unordered lists)

    unordered 목록에서, 각각의 목록 항목은 같은 방식으로 표시(mark)된다.

    CSS는 세 가지 유형으로 표시된다. 이것이 브라우저에서 표시되는 방법이다:

    • disc
    • circle
    • square

    다른 방법으로, 글머리 기호 아이콘을 위한 이미지 파일의 URL을 지정할 수 있다.

    이 규칙은 다른 목록 항목에 다른 표시를 한다:

    한 목록에 이와 같이 다른 항목을 사용할 때, open 및 closed 항목을 구분한다 (예를 들어, 할 일 목록에서):

    결과는 다음과 같을 수 있다:

    Add screenshot of results? Or Dabblet?

    순차 목록 (Ordered lists)

    순차 목록에서, 각 목록 항목은 순서를 나타내기 위해 다르게 표시된다.

    표시 유형을 지정하기 위해 [list-style] 속성을 사용한다:

    • decimal
    • lower-roman
    • upper-roman
    • lower-latin
    • upper-latin

    Add screenshot of results? Or Dabblet?

    이 규칙은 info 클래스를 가지고 있는 [ol] 요소에 지정된다. 항목들은 첫 머리 문자로 식별된다.

    목록에 있는

  • 요소는 이 스타일을 상속 받는다:</nowiki>

    Add screenshot of result? Or Dabblet?

    The Template:cssxref(“list-style”) 속성은 축약 속성이다. 복잡한 스타일 시트에서, 별도 값을 설정하기 위해 별도의 속성을 사용하는 것을 선호할 수도 있다. 이 별도의 속성에 링크하기 위해, CSS가 목록을 지정하는 방법에 대해 더 자세히 배우려면, Template:cssxref(“list-style”) 참조 페이지 참고하자.

    비순차 (Template:HTMLElement(“ul”)) 및 순차 (Template:HTMLElement(“ol”)) 목록에 대한 전통적인 태그를 제공하는, HTML과 같은 마크 업 언어를 사용하고 있다면, 이것이 요구하는 방식으로 태그를 사용하는 것이 좋은 방법이다. 그러나, 원한다면 CSS를 사용하여, Template:HTMLElement(“ul”) 를 순차적으로 표시하고, Template:HTMLElement(“ol”) 를 비순차적으로 표시할 수 있다.

    브라우저들은 목록에 스타일을 적용하는 방식이 다르다. 스타일 시트가 모든 브라우저에서 같은 결과를 제공할 것이라고 기대하지 말자.

    Counters

    참고: 일부 브라우저는 counter를 지원하지 않는다. Quirks Mode site 사이트의 CSS contents and browser compatibility 페이지는 이것과 기타 CSS 기능의 브라우저 호환성에 대한 상세한 차트를 제공하고 있다. 이 사이트의 [/en/CSS_Reference CSS Reference] 섹션에 있는 개별 페이지에는 브라우저 호환성 테이블도 포함하고 있다.

    목록 항목 뿐만 아니라, 모든 요소의 번호에 counter를 사용할 수 있다. 예를 들어, 일부 문서에서 제목과 문단에 번호를 매길 수 있다.

    번호를 매기기 위해, 지정한 이름을 가진 counter를 추가할 수 있다.

    일부 요소에서 수를 세기 시작하기 전에, counter를 Template:cssxref(“counter-reset”) 속성과 counter 이름으로 재설정한다. 수를 세는 요소의 부모는 이것을 수행하기 위한 좋은 지점이다. 하지만 목록 항목 앞에 있는 모든 요소를 사용할 수 있다.

    counter increments가 있는 각 요소에, Template:cssxref(“counter-increment”) 속성과 counter 이름을 사용한다.

    counter를 표시하기 위해, 선택자의 Template:cssxref(“:before”) 또는 Template:cssxref(“:after”)content 속성을 사용한다 (이전 페이지에서 했던 대로, [/en/CSS/Getting_Started/Content Content]).

    content 속성 값 안에, counter 이름을 가진 counter() 를 지정한다. 선택적으로 유형을 지정한다. 유형은 위의 Ordered lists 섹션에 있는 것과 같다.

    일반적으로 counter를 표시하는 요소는 증가를 나타내는 요소이다.

    이 규칙은 numbered 클래스인 모든 Template:HTMLELement(“p”) 요소에 대해 counter를 표시하고 증가시킨다.This rule displays and increments the for every element with the class :

    결과는 이와 같을 것이다:

    Add screenshot of result? Or Dabblet?

    문서를 읽는 모든 사람이 이것들을 지원하는 브라우저를 가지고 있다는 확신이 없는 한, counter를 사용할 수 없다.

    counter를 사용할 수 있다면, 목록 항목에서 counter를 개별적으로 스타일 할 수 있는 이점이 있다. 위의 예제에서, counter는 굵은 글꼴이지만, 목록 항목은 아니다.

    또한 counter를 복잡한 방식으로 사용할 수 있다. 예를 들어, 공식적인 문서의 섹션, 제목, 부제목, 문단에 번호를 매길 수 있다. You can also uses in more complex ways—for example, to number sections, headings, subheadings and paragraphs in formal documents. 자세한 내용은 CSS 설명서의 Automatic counters and numbering 참조.

    실습: 목록 스타일 지정 (Styled lists)

    1. 새 HTML 문서를 만들고,doc2.html 이라는 이름으로 저장한다. 문서에 아래 코드를 복사하여 붙여 넣기 한다:

    2. 새 스타일 시트를 만들고, style2.css 라는 이름으로 저장한다. 이 문서에 아래 CSS 복사하여 붙여 넣기 한다:

      원한다면, 업데이트하기 위해 레이아웃과 주석을 편집할 수 있다.

    3. 브라우저에서 문서를 연다. 브라우저가 counter를 지원한다면, 아래 예제와 같은 것을 볼 수 있다. 브라우저가 counter를 지원하지 않는다면, 번호를 볼 수 없을 것이다 (콜론도 표시되지 않을 것이다):

      Add screenshot of result? Or Dabblet?

    4. 참고

      연습 문데

      • 스타일 시트에 규칙 하나를 추가한다. Roman 숫자를 사용하여 i 에서 v 까지 대양에 번호를 매긴다.:
      • 이와 같이 괄호 안에 제목을 첫 문자로 구별하기 위해 스타일 시트를 변경하자:

    답글 남기기