List 속성 - by. UXKM

요약 설명

CSS를 이용하면 리스트에 다양한 효과를 적용할 수 있습니다.
목록 요소는 내비게이션 메뉴를 만들 때 자주 사용된다.
기본 속성 스타일은 'display: list-item' 이며 CSS에서 사용할 수 있는 list-style 속성은 다음과 같습니다.
list-style-type
list-style-image
list-style-position
list-style

list-style-type

리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 합니다.
리스트에 다양한 마커(marker)를 적용할 수 있습니다.
미리 정의된 타입의 마커는 다양하게 있지만 모든 브라우저를 지원하지는 않습니다.
마커의 타입은 다음과 같이 있습니다.

  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-image 속성을 이용하면 마커(marker)로 자신만의 이미지를 사용할 수 있습니다.

list-style-position

list-style-position 속성을 이용하면 리스트 요소의 위치를 설정할 수 있습니다.
list-style-position 속성의 기본 속성값은 outside로 설정되어 있습니다.

list-style Shorthand

모든 list-style 속성을 이용한 스타일을 한 줄에 축약형 방식으로 설정할 수 있음.