[[분류:스타일 시트 언어]]
[include(틀:상위 문서, top1=CSS)]
[목차]

== 개요 ==
[[CSS]]의 속성에 값으로 들어갈 수 있는 자료형들에 대해 서술하는 문서이다. 속성에서 자료형이 사용되는 형식을 나타낼 때 꺾쇠괄호(<>)로 묶어서 표현한다.

== 목록 ==
전체 자료형은 [[MDN]]의 [[https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Types|CSS 자료형]] 페이지에서 확인할 수 있다.

=== <color> ===
[[색]]을 나타내는 값이다. {{{background-color}}}, {{{color}}} 등의 속성에서 값으로 쓰인다.

==== [[헥스 코드]] ====
[include(틀:상세 내용, 문서명=헥스 코드)]

==== 함수형 표기법 ====
 * {{{rgb(R, G, B)}}} / {{{rgb(R G B)}}}
 [[RGB]]를 각각 0~255의 숫자로 입력하는 방식이다. 각 숫자를 16진수로 바꿔 # 앞에 이어서 적은 게 헥스 코드이다.

 * {{{rgba(R, G, B, A)}}} / {{{rgba(R G B / A)}}}
 RGB에 투명도를 추가한 버전. 투명도 A는 0~1의 소수점 숫자 혹은 퍼센트(<percentage>) 값이다.

 * {{{hsl(H, S, L)}}} / {{{hsl(H S L)}}}
 HSL(Hue Saturation Lightness)를 함수형으로 입력하는 방식이다. RGB와 달리 색의 [[채도]]와 밝기가 명시적으로 입력되어 있기 때문에 글자만 보고도 어떤 색일지 유추하기가 쉽다.
  * H
  원통형 색공간에서 각도(<angle>) 값을 받아 색상을 나타낸다. RGB에 비유하자면 0°, 360°가 R이고 120°가 G, 240°가 B이다.
  * S
  채도를 의미하며 퍼센트(<percentage>) 값을 받는다. 0%일 경우, [[무채색]]이 되어 H의 값이 아무 효력이 없어지다.
  * L
  밝기를 의미하며 퍼센트(<percentage>) 값을 받는다. 0%가 검은색, 100%가 흰색을 나타낸다.

 * {{{hsla(H, S, L, A)}}} / {{{hsla(H S L / A)}}}
 HSL에 투명도를 추가한 버전. 투명도 A는 0~1의 소수점 숫자 혹은 퍼센트(<percentage>) 값이다.

==== 키워드 ====
 * [[헥스 코드#CSS 색상|색상 키워드]]
 특정 색상을 나타내는 키워드이다. white, red와 같이 단순한 색이름으로 입력한다. 모든 색상 키워드는 [[헥스 코드#CSS 색상|해당 문서]] 참조.

 * {{{transparent}}}
 완전한 [[투명]]을 의미한다. rgba(R, G, B, 0), hsla(H, S, L, 0)와 똑같이 표시된다.

 * {{{currentColor}}}
 말 그대로 현재 색을 의미한다. 해당 요소의 글자색인 color 속성 값을 따라간다. 대소문자를 구분하지 않아 currentcolor로 사용해도 된다.

 * 시스템 색상
 웹 페이지의 특정 부분에 사용되는 기본 색상을 의미한다. 대소문자를 구분하지 않는다.
  * {{{ActiveText}}}
  * {{{ButtonBorder}}}
  * {{{ButtonFace}}}
  * {{{ButtonText}}}
  * {{{Canvas}}}
  * {{{CanvasText}}}
  * {{{Field}}}
  * {{{FieldText}}}
  * {{{GrayText}}}
  * {{{Highlight}}}
  * {{{HighlightText}}}
  * {{{LinkText}}}
  * {{{Mark}}}
  * {{{MarkText}}}
  * {{{VisitedText}}}

=== <gradient> ===
[[그라데이션]]을 나타내는 자료형이다. {{{background-image}}} 등의 속성에서 자주 사용된다.

==== 선형 그래디언트 ====
{{{linear-gradient(...)}}}

직선적인 그래디언트를 만드는 문법이다.

==== 원형 그래디언트 ====
{{{radial-gradient(...)}}}

타원 방사형으로 퍼지는 그래디언트를 만드는 문법이다.

==== 원뿔 그래디언트 ====
{{{conic-gradient(...)}}}

점을 중심으로 돌아가는 그래디언트를 만드는 문법이다.

==== 반복 그래디언트 ====
{{{repeating-linear-gradient(...)}}}
{{{repeating-radial-gradient(...)}}}
{{{repeating-conic-gradient(...)}}}

위에서 나온 그래디언트들을 반복시키는 문법이다.