CSS Types

CSS 데이터 타입은 CSS 속성과 함수 등에서 사용이 가능한 값의 종류를 정의한다.

CSS 데이터 타입은 각 레퍼런스에서 표시되는 모든 것들이 공식적인 표준 타입이라고 말하기는 어렵지만 꺽음괄호를 사용('<' 와 '>'로 감쌈)하여 표기한다.

W3C Standards
- 〈absolute-size〉
  UA가 계산하고 보관하는 글꼴 크기를 키워드로 나타내는 타입이다.
- 〈alpha-value〉
- 〈angle-percentage〉
  <angne>과 <percentage> 타입 모두 가능한 타입을 나타낸다.
- 〈angle〉
  0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.
- 〈attachment〉
- 〈auto-repeat〉
- 〈auto-track-list〉
- 〈baseline-position〉
- 〈basic-shape〉
  clip-path, shape-outside, offset-path 속성에 사용되는 형태를 나타낸다.
- 〈bg-image〉
  <background-image> 속성에 사용되는 값의 타입이다.
- 〈bg-layer〉
  배경 레이어가 겹쳐있는 경우 맨 마지막(아래)이(가) 아닌 위치의 배경에 대한 설정 값 타입이다. <background-color> 값을 지정할 수 없다.
- 〈bg-position〉
  <background-position> 속성에 사용되는 값의 타입이다.
- 〈bg-size〉
  <background-size> 속성에 사용하는 값의 타입이다.
- 〈blend-mode〉
  요소가 겹쳐 있는 경우 각 요소의 색상이 겹쳐서 보여지는 방식을 정의한다.
- 〈box〉
- 〈calc-product〉
  곱셈 또는 나누기의 결과값을 나타낸다.
- 〈calc-sum〉
  덧셈(뺄셈 포함)으로 계산되는 값을 나타낸다.
- 〈calc-value〉
  <number>, <dimension>, <percentage>, <calc-sum> 타입의 값을 나타낸다.
- 〈color-stop-list〉
- 〈color〉
  sRGB 색상 공간의 색상값이다. 알파 채널 투명도 값을 포함 할 수 있으며, 색상이 배경과 합성되는 방법을 나타낸다.
- 〈common-lig-values〉
- 〈content-distribution〉
  justify-content, align-content 속성에서 사용된다.
- 〈content-list〉
- 〈content-position〉
  justify-content, align-content 속성에서 사용된다.
- 〈content-replacement〉
  지정된 <image> 타입으로 채워진 요소 또는 가상 요소를 대체 요소로 생성한다. 지정된 <image> 타입의 값이 유효하지 않은 이미지를 나타내는 경우 투명한 검정색으로 채워진 자연적인 너비와 높이가 0인 이미지를 나타내는 것으로 처리된다.
- 〈contextual-alt-values〉
- 〈counter-name〉
  <custom-ident> 타입의 카운터의 이름을 나타낸다.
- 〈counter-style〉
  카운터 스타일을 갖는 값
- 〈counter〉
  순번 매김같은 값을 문자열이나 이미지로 나타내는 counter() 및 counters() 함수를 통해 생성된 값을 나타낸다.
- 〈cubic-bezier-easing-function〉
- 〈custom-ident〉
  임의의 사용자 정의 문자열을 표현한다.
- 〈dimension〉
  단위로 연결된 <number> 타입을 나타낸다.
- 〈discretionary-lig-values〉
- 〈display-box〉
- 〈display-inside〉
- 〈display-internal〉
- 〈display-legacy〉
- 〈display-listitem〉
- 〈display-outside〉
- 〈easing-function〉
  애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다. 이를 통해 움직임의 지속 시간에 대한 속도 변화를 줄 수가 있다.
- 〈east-asian-variant-values〉
- 〈east-asian-width-values〉
- 〈ending-shape〉
- 〈explicit-track-list〉
- 〈extent-keyword〉
- 〈family-name〉
  일반 구성이 아닌 글꼴명을 자료로 하는 타입이다. 따옴표로 인용되어야 한다.
- 〈filter-function〉
  이미지의 모습을 변형할 수 있는 그래픽 효과를 지정할 수 있다.
- 〈filter-value-list〉
- 〈final-bg-layer〉
  배경 레이어가 겹쳐있는 경우 맨 마지막(아래)에 위치할 배경에 대한 설정 값 타입이다. <background-color> 값이 지정되어 있다.
- 〈fixed-breadth〉
- 〈fixed-repeat〉
- 〈fixed-size〉
- 〈flex〉
- 〈font-stretch-css3〉
- 〈font-variant-css21〉
- 〈font-variant-css2〉
- 〈frequency〉
  목소리의 높낮이 등의 주파수를 나타낸다.
- 〈generic-family〉
  CSS에서 정의한 일반적으로 사용되는 범주에 속하는 글꼴을 나타내는 타입이다. 따옴표로 인용될 수 없다.
- 〈gradient〉
  두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
- 〈grid-line〉
- 〈historical-lig-values〉
- 〈ident〉
  식별자로 사용되는 임의의 문자열을 나타낸다.
- 〈image〉
  2차원 이미지를 나타낸다.
- 〈inflexible-breadth〉
- 〈integer〉
  소숫점이 없는 정수를 표현한다.
- 〈isolation-mode〉
- 〈keyframes-name〉
  <custom-ident> 또는 <string> 타입을 묶어서 표현하는 타입이다.
- 〈leader-type〉
- 〈leader〉
- 〈length-percentage〉
  <length>와 <percentage> 타입을 나타낸다.
- 〈length〉
  숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
- 〈line-name-list〉
- 〈line-names〉
- 〈line-style〉
- 〈line-width〉
- 〈linear-color-hint〉
- 〈linear-color-stop〉
- 〈name-repeat〉
- 〈number-percentage〉
  <number>와 <percentage> 타입 값을 나타낸다.
- 〈number〉
  정수 또는 실수를 표현한다.
- 〈numeric-figure-values〉
- 〈numeric-fraction-values〉
- 〈numeric-spacing-values〉
- 〈overflow-position〉
- 〈percentage〉
  어떠한 기준으로 부터 백분율로 표현한다.
- 〈position〉
  박스형의 요소에 대한 상대적인 2차원 좌표 값을 나타낸다.
- 〈quote〉
  큰따옴표 또는 작은 따옴표로 감싸진 <string> 타입을 나타낸다.
- 〈ratio〉
  미디어 쿼리(media query)에서 스크린의 종횡비를 나타낸다.
- 〈relative-size〉
  현재 글꼴 크기를 기준으로 상대적으로 크기를 지정하는 키워드를 나타내는 타입이다.
- 〈repeat-style〉
- 〈resolution〉
  출력 장치의 해상도를 나타낸다.
- 〈self-position〉
  justify-self, align-self 속성에서 사용되며 justify-items, align-items에서도 사용된다.
- 〈shadow〉
- 〈shape-box〉
  인접한 인라인 콘텐츠가 둘러싸는 방법을 제시하는 키워드를 나타낸다.
- 〈shape〉
  clip 속성에서 사용 가능한 클리핑 영역을 나타내는 타입이다.
- 〈single-animation-direction〉
  애니메이션에 사용되는 키프레임의 진행 방향을 지정한다.
- 〈single-animation-fill-mode〉
- 〈single-animation-iteration-count〉
- 〈single-animation-play-state〉
- 〈single-animation〉
- 〈single-transition-property〉
- 〈single-transition〉
- 〈string〉
  따옴표로 감싸진 데이터 유형을 표현한다.
- 〈target〉
- 〈time-percentage〉
  <time> 또는 <percentage> 타입을 나타낸다.
- 〈time〉
  초(seconds) 또는 밀리초(milliseconds)로 시간을 나타낸다.
- 〈tmp〉
- 〈track-breadth〉
- 〈track-list〉
- 〈track-repeat〉
- 〈track-size〉
- 〈type-or-unit〉
  속성 값을 해석하는 방법을 UA(User Agent)에게 알려주고 attr() 함수에서 유형을 정의하는 키워드를 나타낸다.
- 〈url-modifier〉
  URL의 의미나 해석을 어떻게든 변경하는 타입이다.
- 〈url〉
  이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
DEVDIC Specified
- 〈align-content〉
  align-content 속성에 사용하는 타입이다.
- 〈align-items〉
- 〈align-self〉
- 〈animation-name〉
- 〈border-image-outset〉
- 〈border-image-repeat〉
- 〈border-image-slice〉
- 〈border-image-source〉
- 〈border-image-width〉
- 〈border-image〉
- 〈border〉
  요소의 테두리를 축약 형식으로 지정할 수 있는 타입이다. 순서는 무관하다.
- 〈box-decoration-break〉
- 〈box-shadow〉
- 〈box-size〉
  상자의 가로, 세로 크기를 지정하는 값의 타입이다.
- 〈clip〉
- 〈column-count〉
- 〈column-fill〉
- 〈column-gap〉
- 〈column-rule〉
- 〈column-span〉
- 〈column-width〉
- 〈content〉
- 〈counter-values〉
- 〈direction〉
- 〈filter〉
- 〈flex-basis〉
- 〈flex-direction〉
- 〈flex-value〉
  그리드 컨테이너 내에서 유연한 크기로 표시될 수 있도록 지정된 유형이다.
- 〈flex-wrap〉
- 〈font-kerning〉
- 〈font-size〉
  CSS에서 글꼴 크기를 지정하는 다양한 값을 나타내는 타입이다.
- 〈font-stretch〉
- 〈font-style〉
- 〈font-variant〉
- 〈font-weight〉
- 〈font〉
- 〈global〉
- 〈gradient-size〉
- 〈grid-auto-flow〉
- 〈grid-template-areas〉
- 〈grid-template-both〉
- 〈grid-template〉
- 〈grid〉
- 〈image-orientation〉
- 〈image-rendering〉
- 〈justify-content〉
- 〈justify-items〉
- 〈justify-self〉
- 〈line-height〉
- 〈list-style-image〉
- 〈list-style-position〉
- 〈list-style-type〉
- 〈margin〉
- 〈object-fit〉
- 〈positioning-coordinates〉
- 〈row-gap〉
- 〈tab-size〉
- 〈text-align〉
- 〈text-combine-upright〉
- 〈text-orientation〉
- 〈text-spacing〉
- 〈text-transform〉
- 〈transition-property〉
- 〈unicode-bidi〉
- 〈vertical-align〉
- 〈white-space〉
- 〈word-break〉
- 〈writing-mode〉

CSS ReferenceHTMLJavaScriptSVGLinux ServerDevelopment

CSS Types

CSS Types

W3C Standards

DEVDIC Specified

CSS Types

W3C Standards

〈absolute-size〉

〈alpha-value〉

〈angle-percentage〉

〈angle〉

〈attachment〉

〈auto-repeat〉

〈auto-track-list〉

〈baseline-position〉

〈basic-shape〉

〈bg-image〉

〈bg-layer〉

〈bg-position〉

〈bg-size〉

〈blend-mode〉

〈box〉

〈calc-product〉

〈calc-sum〉

〈calc-value〉

〈color-stop-list〉

〈color〉

〈common-lig-values〉

〈content-distribution〉

〈content-list〉

〈content-position〉

〈content-replacement〉

〈contextual-alt-values〉

〈counter-name〉

〈counter-style〉

〈counter〉

〈cubic-bezier-easing-function〉

〈custom-ident〉

〈dimension〉

〈discretionary-lig-values〉

〈display-box〉

〈display-inside〉

〈display-internal〉

〈display-legacy〉

〈display-listitem〉

〈display-outside〉

〈easing-function〉

〈east-asian-variant-values〉

〈east-asian-width-values〉

〈ending-shape〉

〈explicit-track-list〉

〈extent-keyword〉

〈family-name〉

〈filter-function〉

〈filter-value-list〉

〈final-bg-layer〉

〈fixed-breadth〉

〈fixed-repeat〉

〈fixed-size〉

〈flex〉

〈font-stretch-css3〉

〈font-variant-css21〉

〈font-variant-css2〉

〈frequency〉

〈generic-family〉

〈gradient〉

〈grid-line〉

〈historical-lig-values〉

〈ident〉

〈image〉

〈inflexible-breadth〉

〈integer〉

〈isolation-mode〉

〈keyframes-name〉

〈leader-type〉

〈leader〉

〈length-percentage〉

〈length〉

〈line-name-list〉

〈line-names〉

CSS Reference
HTML
JavaScript
SVG
Linux Server
Development