목록 관련 CSS 속성을 한번에 설정하는 속기 속성이다.
<'list-style-position'> || <'list-style-image'> || <'list-style-type'>
공백으로 구분된 값의 설정 순서는 정해지지 않았다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
<image> | none
2차원 이미지를 나타낸다.
<url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()
는 지원하지 않는다.
두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);
선형 그라데이션
background: radial-gradient(#FF0000, #00FF00, #FFFF00);
원형 그라데이션
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
<url()> | <src()>
src()
함수의 매개변수를 나타낸다.
src( <string> <url-modifier>* )
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url() 함수의 매개변수를 나타낸다.
url( <string> <url-modifier>* ) | <url-token>
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
inside | outside
마커가 목록의 항목 내용이 시작되는 영역내에 위치한다.
마커가 목록의 항목 내용이 위치한 컨테이너 외부에 위치한다.
<counter-style> | <string> | none
카운터 스타일을 지정하는 키워드를 나타낸다.
공식적인 일본어 한자 방식의 번호 매기기(예: 壱阡壱百壱拾壱)
비공식 일본어 한자 방식의 번호 매기기(예: 千百十一)
대한민국의 공식적인 한글 방식의 번호 매기기(예: 일백일십일)
대한민국의 공식적인 한자 방식의 번호 매기기(예: 壹仟壹百壹拾壹)
대한민국의 한자 방식의 비공식적인 번호 매기기(예: 千百十一)
중국어 간체 방식의 공식적인 번호 매기기(예: 壹仟壹佰壹拾壹)
중국어 간체 방식의 비공식 번호 매기기(예: 一千一百一十一)
중국어 번체 방식의 공식적인 번호 매기기(예: 壹仟壹佰壹拾壹)
중국어 번체 방식의 비공식 번호 매기기(예: 一千一百一十一)
히라가나 문자 방식의 순서 매기기(예: あ, い, う, ..., ん, ああ, あい)
히라가나 문자의 이로하 방식의 순서 매기기(예: い, ろ, は, ..., す, いい, いろ)
가타카나 문자 방식의 순서 매기기(예: ア, イ, ウ, ..., ン, アア, アイ)
가타카나 문자의 이로하 방식의 순서 매기기(예: イ, ロ, ハ, ..., ス, イイ, イロ)
알파벳 소문자 방식의 순서 매기기(예: a, b, c, ..., z, aa, ab)
그리스어 소문자로 순서 매기기(예: α, β, γ, ..., ω, αα, αβ)
라틴어 소문자 방식의 순서 매기기(예: a, b, c, ..., z, aa, ab)
알파벳 대문자로 순서 매기기(예: A, B, C, ..., Z, AA, AB)
라틴어 대문자로 순서 매기기(예: A, B, C, ..., Z, AA, AB)
지지(地支) 또는 십이지(十二支) 문자 방식으로 순서를 매김
천간(天干) 또는 십간(十干) 방식으로 순서를 매김
아랍, 인도 문자 방식의 번호 매기기(예: ١, ٢, ٣, ٤, ..., ٩٨, ٩٩, ١٠٠)
아르메니아 문자 방식으로 번호 매기기(예: Ա, Բ, Գ, ..., ՂԸ, ՂԹ, Ճ)
뱅골 문자 방식의 번호 매기기(예: ১, ২, ৩, ..., ৯৮, ৯৯, ১০০)
캄보디아 문자 방식의 번호 매기기(예: ១, ២, ៣, ..., ៩៨, ៩៩, ១០០)
한자(漢字) 방식의 번호 매기기(예: 一, 二, 三, ..., 九八, 九九, 一〇〇)
1부터 시작하는 10진수를 나타낸다.(예: 1, 2, 3, ..., 98, 99, 100)
앞 자리가 0으로 채워진 타입의 숫자(예: 01, 02, 03, ..., 98, 99, 100)
데바나가리 문자 방식의 번호 매기기(예: १, २, ३, ..., ९८, ९९, १००)
조르지아 문자 방식의 번호 매기기(예: ა, ბ, გ, ..., ჟჱ, ჟთ, რ)
구자라트어 문자 방식의 번호 매기기(예: ૧, ૨, ૩, ..., ૯૮, ૯૯, ૧૦૦)
구르무키 문자 방식의 번호 매기기(예: ੧, ੨, ੩, ..., ੯੮, ੯੯, ੧੦੦)
히브리어 문자 방식의 번호 매기기(예: א, ב, ג, ..., צח, צט, ק)
칸나다어 문자 방식의 번호 매기기(예: ೧, ೨, ೩, ..., ೯೮, ೯೯, ೧೦೦)
크메로 문자 방식의 번호 매기기(예: ១, ២, ៣, ..., ៩៨, ៩៩, ១០០)
라오스어 문자 방식의 번호 매기기(예: ໑, ໒, ໓, ..., ໙໘, ໙໙, ໑໐໐)
아르메니아 문자식의 소문자로 번호 매기기(예: ա, բ, գ, ..., ղը, ղթ, ճ)
소문자 로마 문자 방식의 번호 매기기(예: i, ii, iii, ..., xcviii, xcix, c)
말라얄람어 문자 방식의 번호 매기기(예: ൧, ൨, ൩, ..., ൯൮, ൯൯, ൧൦൦)
몽고어 문자 방식의 번호 매기기(예: ᠑, ᠒, ᠓, ..., ᠙᠘, ᠙᠙, ᠑᠐᠐)
미얀마 문자 방식의 번호 매기기(예: ၁, ၂, ၃, ..., ၉၈, ၉၉, ၁၀၀)
오리야 문자 방식의 번호 매기기(예: ୧, ୨, ୩, ..., ୯୮, ୯୯, ୧୦୦)
페르시아어 문자 방식의 번호 매기기(예: ۱, ۲, ۳, ۴, ..., ۹۸, ۹۹, ۱۰۰)
타밀 문자 방식의 번호 매기기(예: ௧, ௨, ௩, ..., ௯௮, ௯௯, ௧௦௦)
텔루구어 문자 방식의 번호 매기기(예: ౧, ౨, ౩, ..., ౯౮, ౯౯, ౧౦౦)
태국어 문자 방식의 번호 매기기(예: ๑, ๒, ๓, ..., ๙๘, ๙๙, ๑๐๐)
티베트어 문자 방식의 번호 매기기(예: ༡, ༢, ༣, ..., ༩༨, ༩༩, ༡༠༠)
아르메니아 문자식의 대문자로 번호 매기기(예: Ա, Բ, Գ, ..., ՂԸ, ՂԹ, Ճ)
대문자 로마 문자 방식의 번호 매기기(예: I, II, III, ..., XCVIII, XCIX, C)
빈 원 형태
채워진 원 형태
열리거나 닫히는 방식의 요소(<details>
)에게 적합한 기호를 가진 형태로써 닫혔을 경우를 나타낸다.
열리거나 닫히는 방식의 요소(<details>
)에게 적합한 기호를 가진 형태로써 열렸을 경우를 나타낸다.
내부가 채워진 사각형
모든 속성을 표시하지 않을 수도 있다.
목록의 마커의 모양을 설정한다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
모든 속성을 표시하지 않을 수도 있다.
목록의 항목에 대한 마커를 사용자의 이미지로 설정한다.
목록의 항목에 적용할 마커의 위치를 내어쓰기와 들여쓰기로 설정한다.
목록의 마커의 모양을 설정한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
목록 스타일을 적용하지 않는다. 즉 list-style-type
속성이 none
이라고 할 수 있다.
마커가 목록의 항목 내용이 시작되는 영역내에 위치한다.
중심점을 기준으로 회전하는 방식으로 그라데이션을 생성한다.
선형 그라디언트를 생성한다.
원형 그라디언트를 생성한다.
설정된 <linear-gradient> 값이 반복되는 선형 그라디언트를 생성한다.
설정된 <radial-gradient> 값이 반복되는 원형 그라디언트를 생성한다.
CSS에서 사용할 외부 리소스를 가져온다.
공식적인 일본어 한자 방식의 번호 매기기(예: 壱阡壱百壱拾壱)
비공식 일본어 한자 방식의 번호 매기기(예: 千百十一)
대한민국의 공식적인 한글 방식의 번호 매기기(예: 일백일십일)
대한민국의 공식적인 한자 방식의 번호 매기기(예: 壹仟壹百壹拾壹)
대한민국의 한자 방식의 비공식적인 번호 매기기(예: 千百十一)
중국어 간체 방식의 공식적인 번호 매기기(예: 壹仟壹佰壹拾壹)
중국어 간체 방식의 비공식 번호 매기기(예: 一千一百一十一)
중국어 번체 방식의 공식적인 번호 매기기(예: 壹仟壹佰壹拾壹)
중국어 번체 방식의 비공식 번호 매기기(예: 一千一百一十一)
히라가나 문자 방식의 순서 매기기(예: あ, い, う, ..., ん, ああ, あい)
히라가나 문자의 이로하 방식의 순서 매기기(예: い, ろ, は, ..., す, いい, いろ)
가타카나 문자 방식의 순서 매기기(예: ア, イ, ウ, ..., ン, アア, アイ)
가타카나 문자의 이로하 방식의 순서 매기기(예: イ, ロ, ハ, ..., ス, イイ, イロ)
앞 자리가 0으로 채워진 타입의 숫자(예: 01, 02, 03, ..., 98, 99, 100)
list-style: none;
마커를 지정하지 않는다.
object.style.listStyle = "square inside";
자바스크립트 형식
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Lists and Counters Module Level 3 | 초안 작업 | 목록 카운터와 관련된 스타일, 위치 지정 및 값을 조정하는 기능을 설명한다. Last review date: 2022-5-28 |