List 속성 - by. UXKM

  • Publishing
  • CSS
  • CSS 초급
  • List 속성
요약 설명

CSS의 list 속성은 리스트 항목의 마커(숫자, 기호)를 제어하는 속성들로 구성됩니다.
마커의 스타일(list-style-type), 마커로 사용할 이미지(list-style-image), 마커의 위치(list-style-position) 등을 개별적으로 설정하거나, list-style 축약형 속성을 사용하여 한 번에 설정할 수 있습니다.

list-style-type

리스트 항목 앞에 표시되는 숫자나 기호를 마커(marker)라고 합니다.
list-style-type 속성으로 다양한 마커를 적용할 수 있습니다.
마커의 타입은 숫자형(Numeric), 알파벳형(Alphabetic), 심볼형(Symbolic)으로 구분됩니다.

  1. 넘버순(Numeric)

    decimal : (e.g., 1, 2, 3, ..., 98, 99, 100).

    decimal-leading-zero : (e.g., 01, 02, 03, ..., 98, 99, 100).

    arabic-indic : (e.g., ١‎, ٢‎, ٣‎, ٤‎, ..., ٩٨‎, ٩٩‎, ١٠٠‎).

    armenian, upper-armenian : (e.g., Ա, Բ, Գ, ..., ՂԸ, ՂԹ, Ճ).

    lower-armenian : (e.g., ա, բ, գ, ..., ղը, ղթ, ճ).

    bengali : (e.g., ১, ২, ৩, ..., ৯৮, ৯৯, ১০০).

    cambodian, khmer : (e.g., ១, ២, ៣, ..., ៩៨, ៩៩, ១០០).

    cjk-decimal : (e.g., 一, 二, 三, ..., 九八, 九九, 一〇〇).

    devanagari : (e.g., १, २, ३, ..., ९८, ९९, १००).

    georgian : (e.g., ა, ბ, გ, ..., ჟჱ, ჟთ, რ).

    gujarati : (e.g., ૧, ૨, ૩, ..., ૯૮, ૯૯, ૧૦૦).

    gurmukhi : (e.g., ੧, ੨, ੩, ..., ੯੮, ੯੯, ੧੦੦).

    hebrew : (e.g., א‎, ב‎, ג‎, ..., צח‎, צט‎, ק‎).

    kannada : (e.g., ೧, ೨, ೩, ..., ೯೮, ೯೯, ೧೦೦).

    lao : (e.g., ໑, ໒, ໓, ..., ໙໘, ໙໙, ໑໐໐).

    malayalam : (e.g., ൧, ൨, ൩, ..., ൯൮, ൯൯, ൧൦൦).

    mongolian : (e.g., ᠑, ᠒, ᠓, ..., ᠙᠘, ᠙᠙, ᠑᠐᠐).

    myanmar : (e.g., ၁, ၂, ၃, ..., ၉၈, ၉၉, ၁၀၀).

    oriya : (e.g., ୧, ୨, ୩, ..., ୯୮, ୯୯, ୧୦୦).

    persian : (e.g., ۱, ۲, ۳, ۴, ..., ۹۸, ۹۹, ۱۰۰).

    lower-roman : (e.g., i, ii, iii, ..., xcviii, xcix, c).

    upper-roman : (e.g., I, II, III, ..., XCVIII, XCIX, C).

    tamil : (e.g., ௧, ௨, ௩, ..., ௯௮, ௯௯, ௧௦௦).

    telugu : (e.g., ౧, ౨, ౩, ..., ౯౮, ౯౯, ౧౦౦).

    thai : (e.g., ๑, ๒, ๓, ..., ๙๘, ๙๙, ๑๐๐).

    tibetan : (e.g., ༡, ༢, ༣, ..., ༩༨, ༩༩, ༡༠༠).

  2. 알파벳순(Alphabetic)

    lower-alpha, lower-latin : (e.g., a, b, c, ..., z, aa, ab).

    upper-alpha, upper-latin : (e.g., A, B, C, ..., Z, AA, AB).

    cjk-earthly-branch : (e.g., 子, 丑, 寅, ..., 亥, 子子, 子丑).

    cjk-heavenly-stem : (e.g., 甲, 乙, 丙, ..., 癸, 甲甲, 甲乙).

    lower-greek : (e.g., α, β, γ, ..., ω, αα, αβ).

    hiragana : (e.g., あ, い, う, ..., ん, ああ, あい).

    hiragana-iroha : (e.g., い, ろ, は, ..., す, いい, いろ).

    katakana : (e.g., ア, イ, ウ, ..., ン, アア, アイ).

    katakana-iroha : (e.g., イ, ロ, ハ, ..., ス, イイ, イロ)

  3. 심볼(Symbolic)

    disc, circle, square, disclosure-open, disclosure-closed

    disc : • U+2022 BULLET.

    circle : ◦ U+25E6 WHITE BULLET.

    square : ◾ U+25FE BLACK MEDIUM SMALL SQUARE.

list-style-type 예제

list-style-image

마커로 사용할 이미지를 지정하는 속성입니다.
이미지를 사용하면 기본 마커 대신 지정한 이미지가 표시됩니다.

list-style-position

마커가 리스트 항목의 안쪽에 위치할지 바깥쪽에 위치할지 설정하는 속성입니다.
기본값은 outside로, 마커가 항목의 바깥쪽에 위치합니다.
inside로 설정하면 마커가 항목의 안쪽에 위치합니다.

list-style Shorthand

모든 list-style 속성을 한 줄에 축약형 방식으로 설정할 수 있습니다.
list-style-type, list-style-position, list-style-image를 한 번에 지정할 수 있습니다.