Properties

Properties

Editing
  • account_tree
  • bug_report

list-style

목록 관련 CSS 속성을 한번에 설정하는 속기 속성이다.

사용 가능한 값 타입

<'list-style'>

DEVDIC-Specified Data Types

list-style 속기 속성에 사용되는 타입이다.

  • CSS Lists and Counters Module Level 3
    <'list-style-position'> || <'list-style-image'> || <'list-style-type'>

    공백으로 구분된 값의 설정 순서는 정해지지 않았다.

    속기 속성으로 목록의 마커와 위치, 내장된 마커 대신 사용자 이미지를 마커로 지정

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <'list-style-image'>

    DEVDIC-Specified Data Types

    list-style-image 속성에 사용되는 타입이다.

    • CSS Lists and Counters Module Level 3
      <image> | none
    Details

    포함된 타입

    • <image>

      2차원 이미지를 나타낸다.

      • CSS Images Module Level 4
        <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

        <url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.

        현재 image()는 지원하지 않는다.

      Details

      포함된 타입

      • <gradient>

        두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.

        • background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);

          선형 그라데이션

          Example
        • background: radial-gradient(#FF0000, #00FF00, #FFFF00);

          원형 그라데이션

          Example
        Details

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background

          요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

      • <url>

        이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

        • CSS Values and Units Module Level 4
          <url()> | <src()>
        Details

        포함된 타입

        • <src()>

          src() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            src( <string> <url-modifier>* )
          Details

          포함된 타입

          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details

            동일한 타입을 사용하는 관련 속성

            모든 속성을 표시하지 않을 수도 있다.

            • font-family

              글꼴을 지정한다.

            • content

              가상 요소로 생성할 콘텐츠를 설정한다.

            • quotes

              인용 부호의 유형을 설정한다.

          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

        • <url()>

          url() 함수의 매개변수를 나타낸다.

          • CSS Values and Units Module Level 4
            url( <string> <url-modifier>*| <url-token>
          Details

          포함된 타입

          • <url-token>

            URL Token Railroad Diagrams

            <ident-token "url"> ( ws* not " ' ( ) \ ws or non-printable escape ws* )
          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<string>]
          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<url-modifier>]

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

        • clip-path

          요소의 클리핑 범위를 설정한다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    공통적으로 사용되는 값

    다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

    • none

      어떠한 값도 설정하지 않음을 나타낸다.

  • <'list-style-position'>

    DEVDIC-Specified Data Types

    list-style-position 속성에 사용되는 타입이다.

    • CSS Lists and Counters Module Level 3
      inside | outside
    Details

    사용되는 키워드

    • inside

      마커가 목록의 항목 내용이 시작되는 영역내에 위치한다.

    • outside

      마커가 목록의 항목 내용이 위치한 컨테이너 외부에 위치한다.

  • <'list-style-type'>

    DEVDIC-Specified Data Types

    list-style-type 속성에 사용되는 타입이다.

    • CSS Lists and Counters Module Level 3
      <counter-style> | <string> | none
    Details

    포함된 타입

    • <counter-style>

      카운터 스타일을 지정하는 키워드를 나타낸다.

      Details

      사용되는 키워드

      • japanese-formal

        공식적인 일본어 한자 방식의 번호 매기기(예: 壱阡壱百壱拾壱)

      • japanese-informal

        비공식 일본어 한자 방식의 번호 매기기(예: 千百十一)

      • korean-hangul-formal

        대한민국의 공식적인 한글 방식의 번호 매기기(예: 일백일십일)

      • korean-hanja-formal

        대한민국의 공식적인 한자 방식의 번호 매기기(예: 壹仟壹百壹拾壹)

      • korean-hanja-informal

        대한민국의 한자 방식의 비공식적인 번호 매기기(예: 千百十一)

      • simp-chinese-formal

        중국어 간체 방식의 공식적인 번호 매기기(예: 壹仟壹佰壹拾壹)

      • simp-chinese-informal

        중국어 간체 방식의 비공식 번호 매기기(예: 一千一百一十一)

      • trad-chinese-formal

        중국어 번체 방식의 공식적인 번호 매기기(예: 壹仟壹佰壹拾壹)

      • trad-chinese-informal

        중국어 번체 방식의 비공식 번호 매기기(예: 一千一百一十一)

      • hiragana

        히라가나 문자 방식의 순서 매기기(예: あ, い, う, ..., ん, ああ, あい)

      • hiragana-iroha

        히라가나 문자의 이로하 방식의 순서 매기기(예: い, ろ, は, ..., す, いい, いろ)

      • katakana

        가타카나 문자 방식의 순서 매기기(예: ア, イ, ウ, ..., ン, アア, アイ)

      • katakana-iroha

        가타카나 문자의 이로하 방식의 순서 매기기(예: イ, ロ, ハ, ..., ス, イイ, イロ)

      • lower-alpha

        알파벳 소문자 방식의 순서 매기기(예: a, b, c, ..., z, aa, ab)

      • lower-greek

        그리스어 소문자로 순서 매기기(예: α, β, γ, ..., ω, αα, αβ)

      • lower-latin

        라틴어 소문자 방식의 순서 매기기(예: a, b, c, ..., z, aa, ab)

      • upper-alpha

        알파벳 대문자로 순서 매기기(예: A, B, C, ..., Z, AA, AB)

      • upper-latin

        라틴어 대문자로 순서 매기기(예: A, B, C, ..., Z, AA, AB)

      • cjk-earthly-branch

        지지(地支) 또는 십이지(十二支) 문자 방식으로 순서를 매김

      • cjk-heavenly-stem

        천간(天干) 또는 십간(十干) 방식으로 순서를 매김

      • arabic-indic

        아랍, 인도 문자 방식의 번호 매기기(예: ١‎, ٢‎, ٣‎, ٤‎, ..., ٩٨‎, ٩٩‎, ١٠٠)

      • armenian

        아르메니아 문자 방식으로 번호 매기기(예: Ա, Բ, Գ, ..., ՂԸ, ՂԹ, Ճ)

      • bengali

        뱅골 문자 방식의 번호 매기기(예: ১, ২, ৩, ..., ৯৮, ৯৯, ১০০)

      • cambodian

        캄보디아 문자 방식의 번호 매기기(예: ១, ២, ៣, ..., ៩៨, ៩៩, ១០០)

      • cjk-decimal

        한자(漢字) 방식의 번호 매기기(예: 一, 二, 三, ..., 九八, 九九, 一〇〇)

      • decimal

        1부터 시작하는 10진수를 나타낸다.(예: 1, 2, 3, ..., 98, 99, 100)

      • decimal-leading-zero

        앞 자리가 0으로 채워진 타입의 숫자(예: 01, 02, 03, ..., 98, 99, 100)

      • devanagari

        데바나가리 문자 방식의 번호 매기기(예: १, २, ३, ..., ९८, ९९, १००)

      • georgian

        조르지아 문자 방식의 번호 매기기(예: ა, ბ, გ, ..., ჟჱ, ჟთ, რ)

      • gujarati

        구자라트어 문자 방식의 번호 매기기(예: ૧, ૨, ૩, ..., ૯૮, ૯૯, ૧૦૦)

      • gurmukhi

        구르무키 문자 방식의 번호 매기기(예: ੧, ੨, ੩, ..., ੯੮, ੯੯, ੧੦੦)

      • hebrew

        히브리어 문자 방식의 번호 매기기(예: א‎, ב‎, ג‎, ..., צח‎, צט‎, ק)

      • kannada

        칸나다어 문자 방식의 번호 매기기(예: ೧, ೨, ೩, ..., ೯೮, ೯೯, ೧೦೦)

      • khmer

        크메로 문자 방식의 번호 매기기(예: ១, ២, ៣, ..., ៩៨, ៩៩, ១០០)

      • lao

        라오스어 문자 방식의 번호 매기기(예: ໑, ໒, ໓, ..., ໙໘, ໙໙, ໑໐໐)

      • lower-armenian

        아르메니아 문자식의 소문자로 번호 매기기(예: ա, բ, գ, ..., ղը, ղթ, ճ)

      • lower-roman

        소문자 로마 문자 방식의 번호 매기기(예: i, ii, iii, ..., xcviii, xcix, c)

      • malayalam

        말라얄람어 문자 방식의 번호 매기기(예: ൧, ൨, ൩, ..., ൯൮, ൯൯, ൧൦൦)

      • mongolian

        몽고어 문자 방식의 번호 매기기(예: ᠑, ᠒, ᠓, ..., ᠙᠘, ᠙᠙, ᠑᠐᠐)

      • myanmar

        미얀마 문자 방식의 번호 매기기(예: ၁, ၂, ၃, ..., ၉၈, ၉၉, ၁၀၀)

      • oriya

        오리야 문자 방식의 번호 매기기(예: ୧, ୨, ୩, ..., ୯୮, ୯୯, ୧୦୦)

      • persian

        페르시아어 문자 방식의 번호 매기기(예: ۱, ۲, ۳, ۴, ..., ۹۸, ۹۹, ۱۰۰)

      • tamil

        타밀 문자 방식의 번호 매기기(예: ௧, ௨, ௩, ..., ௯௮, ௯௯, ௧௦௦)

      • telugu

        텔루구어 문자 방식의 번호 매기기(예: ౧, ౨, ౩, ..., ౯౮, ౯౯, ౧౦౦)

      • thai

        태국어 문자 방식의 번호 매기기(예: ๑, ๒, ๓, ..., ๙๘, ๙๙, ๑๐๐)

      • tibetan

        티베트어 문자 방식의 번호 매기기(예: ༡, ༢, ༣, ..., ༩༨, ༩༩, ༡༠༠)

      • upper-armenian

        아르메니아 문자식의 대문자로 번호 매기기(예: Ա, Բ, Գ, ..., ՂԸ, ՂԹ, Ճ)

      • upper-roman

        대문자 로마 문자 방식의 번호 매기기(예: I, II, III, ..., XCVIII, XCIX, C)

      • circle

        빈 원 형태

      • disc

        채워진 원 형태

      • disclosure-closed

        열리거나 닫히는 방식의 요소(<details>)에게 적합한 기호를 가진 형태로써 닫혔을 경우를 나타낸다.

      • disclosure-open

        열리거나 닫히는 방식의 요소(<details>)에게 적합한 기호를 가진 형태로써 열렸을 경우를 나타낸다.

      • square

        내부가 채워진 사각형

      관련 @Rules

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

      • "this is a 'string'."
      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • font-family

        글꼴을 지정한다.

      • content

        가상 요소로 생성할 콘텐츠를 설정한다.

      • quotes

        인용 부호의 유형을 설정한다.

속기에 사용되는 관련 속성

모든 속성을 표시하지 않을 수도 있다.

  • list-style-image

    목록의 항목에 대한 마커를 사용자의 이미지로 설정한다.

  • list-style-position

    목록의 항목에 적용할 마커의 위치를 내어쓰기와 들여쓰기로 설정한다.

  • list-style-type

    목록의 마커의 모양을 설정한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • CSS Lists and Counters Module Level 3

    목록 스타일을 적용하지 않는다. 즉 list-style-type 속성이 none이라고 할 수 있다.

  • CSS Lists and Counters Module Level 3

    마커가 목록의 항목 내용이 시작되는 영역내에 위치한다.

    Example
  • CSS Images Module Level 4

    중심점을 기준으로 회전하는 방식으로 그라데이션을 생성한다.

    Example
  • CSS Images Module Level 4

    선형 그라디언트를 생성한다.

    Example
  • CSS Images Module Level 4

    원형 그라디언트를 생성한다.

    Example
  • CSS Images Module Level 4

    설정된 <linear-gradient> 값이 반복되는 선형 그라디언트를 생성한다.

    Example
  • CSS Images Module Level 4

    설정된 <radial-gradient> 값이 반복되는 원형 그라디언트를 생성한다.

    Example
  • CSS Values and Units Module Level 3

    CSS에서 사용할 외부 리소스를 가져온다.

    Example
  • 〈counter-style〉japanese-formal
    CSS Lists and Counters Module Level 3

    공식적인 일본어 한자 방식의 번호 매기기(예: 壱阡壱百壱拾壱)

    Example
  • 〈counter-style〉japanese-informal
    CSS Lists and Counters Module Level 3

    비공식 일본어 한자 방식의 번호 매기기(예: 千百十一)

    Example
  • 〈counter-style〉korean-hangul-formal
    CSS Lists and Counters Module Level 3

    대한민국의 공식적인 한글 방식의 번호 매기기(예: 일백일십일)

    Example
  • 〈counter-style〉korean-hanja-formal
    CSS Lists and Counters Module Level 3

    대한민국의 공식적인 한자 방식의 번호 매기기(예: 壹仟壹百壹拾壹)

    Example
  • 〈counter-style〉korean-hanja-informal
    CSS Lists and Counters Module Level 3

    대한민국의 한자 방식의 비공식적인 번호 매기기(예: 千百十一)

    Example
  • 〈counter-style〉simp-chinese-formal
    CSS Lists and Counters Module Level 3

    중국어 간체 방식의 공식적인 번호 매기기(예: 壹仟壹佰壹拾壹)

    Example
  • 〈counter-style〉simp-chinese-informal
    CSS Lists and Counters Module Level 3

    중국어 간체 방식의 비공식 번호 매기기(예: 一千一百一十一)

    Example
  • 〈counter-style〉trad-chinese-formal
    CSS Lists and Counters Module Level 3

    중국어 번체 방식의 공식적인 번호 매기기(예: 壹仟壹佰壹拾壹)

    Example
  • 〈counter-style〉trad-chinese-informal
    CSS Lists and Counters Module Level 3

    중국어 번체 방식의 비공식 번호 매기기(예: 一千一百一十一)

    Example
  • CSS Lists and Counters Module Level 3

    히라가나 문자 방식의 순서 매기기(예: あ, い, う, ..., ん, ああ, あい)

    Example
  • 〈counter-style〉hiragana-iroha
    CSS Lists and Counters Module Level 3

    히라가나 문자의 이로하 방식의 순서 매기기(예: い, ろ, は, ..., す, いい, いろ)

    Example
  • CSS Lists and Counters Module Level 3

    가타카나 문자 방식의 순서 매기기(예: ア, イ, ウ, ..., ン, アア, アイ)

    Example
  • 〈counter-style〉katakana-iroha
    CSS Lists and Counters Module Level 3

    가타카나 문자의 이로하 방식의 순서 매기기(예: イ, ロ, ハ, ..., ス, イイ, イロ)

    Example
  • 〈counter-style〉decimal-leading-zero
    CSS Lists and Counters Module Level 3

    앞 자리가 0으로 채워진 타입의 숫자(예: 01, 02, 03, ..., 98, 99, 100)

    Example

구문

  • list-style: none;
    CSS Lists and Counters Module Level 3

    마커를 지정하지 않는다.

  • object.style.listStyle = "square inside";
    CSS Lists and Counters Module Level 3

    자바스크립트 형식

버전 명세

Modules
Module NameStatusSummary
CSS Lists and Counters Module Level 3초안 작업

 목록 카운터와 관련된 스타일, 위치 지정 및 값을 조정하는 기능을 설명한다.


Last review date: 2022-5-28

지원 웹브라우저