CSS/자료형
덤프버전 : (♥ 1)
상위 문서: CSS
1. 개요[편집]
CSS의 속성에 값으로 들어갈 수 있는 자료형들에 대해 서술하는 문서이다. 속성에서 자료형이 사용되는 형식을 나타낼 때 꺾쇠괄호(<>)로 묶어서 표현한다.
2. 목록[편집]
전체 자료형은 MDN의 CSS 자료형 페이지에서 확인할 수 있다.
2.1. <color>[편집]
색을 나타내는 값이다.
background-color
, color
등의 속성에서 값으로 쓰인다.2.1.1. 헥스 코드[편집]
자세한 내용은 헥스 코드 문서를 참고하십시오.
2.1.2. 함수형 표기법[편집]
-
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의 소수점 숫자 혹은 퍼센트() 값이다.
-
hsl(H, S, L)
/hsl(H S L)
HSL(Hue Saturation Lightness)를 함수형으로 입력하는 방식이다. RGB와 달리 색의 채도와 밝기가 명시적으로 입력되어 있기 때문에 글자만 보고도 어떤 색일지 유추하기가 쉽다.
- H
원통형 색공간에서 각도() 값을 받아 색상을 나타낸다. RGB에 비유하자면 0°, 360°가 R이고 120°가 G, 240°가 B이다.
- S
채도를 의미하며 퍼센트() 값을 받는다. 0%일 경우, 무채색이 되어 H의 값이 아무 효력이 없어지다.
- L
밝기를 의미하며 퍼센트() 값을 받는다. 0%가 검은색, 100%가 흰색을 나타낸다.
-
hsla(H, S, L, A)
/hsla(H S L / A)
HSL에 투명도를 추가한 버전. 투명도 A는 0~1의 소수점 숫자 혹은 퍼센트() 값이다.
2.1.3. 키워드[편집]
특정 색상을 나타내는 키워드이다. white, red와 같이 단순한 색이름으로 입력한다. 모든 색상 키워드는 해당 문서 참조.
-
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
2.2. <gradient>[편집]
그라데이션을 나타내는 자료형이다.
background-image
등의 속성에서 자주 사용된다.2.2.1. 선형 그래디언트[편집]
linear-gradient(...)
직선적인 그래디언트를 만드는 문법이다.
2.2.2. 원형 그래디언트[편집]
radial-gradient(...)
타원 방사형으로 퍼지는 그래디언트를 만드는 문법이다.
2.2.3. 원뿔 그래디언트[편집]
conic-gradient(...)
점을 중심으로 돌아가는 그래디언트를 만드는 문법이다.
2.2.4. 반복 그래디언트[편집]
repeating-linear-gradient(...)
repeating-radial-gradient(...)
repeating-conic-gradient(...)
위에서 나온 그래디언트들을 반복시키는 문법이다.
이 문서의 내용 중 전체 또는 일부는 2024-04-06 13:46:22에 나무위키 CSS/자료형 문서에서 가져왔습니다.