1. 개요
CSS의 속성에 값으로 들어갈 수 있는 자료형들에 대해 서술하는 문서이다. 속성에서 자료형이 사용되는 형식을 나타낼 때 꺾쇠괄호(<>)로 묶어서 표현한다.2. 목록
전체 자료형은 MDN의 CSS 자료형 페이지에서 확인할 수 있다.2.1. <number>
숫자를 나타내는 값이다. 여러 숫자를 사용하는 자료형에서 조합되어 사용된다.| <colbgcolor=#f5f5f5,#2d2f34> 유효한 숫자 예시 | |
12 | 정수 |
1.25 | 양의 실수 |
-9.8 | 음의 실수 |
.75 | -1~1 사이의 소수점 이하 값의 경우 맨 앞의 0을 생략할 수 있습니다. |
10e3-3.4e-2 | 과학적 기수법 |
2.2. <length>
길이를 나타내는 값이다.width, margin 등 많은 속성에서 사용된다. 퍼센트(<percentage>) 값은 길이(<length>)와는 다른 자료형이다.0은 단위에 관계 없이 모두 같은 값을 가지기 때문에 따로 단위를 붙이지 않아도 된다.
2.2.1. 절대 길이 단위
| <colbgcolor=#f5f5f5,#2d2f34> 디스플레이 | |
px | 픽셀 |
| 국제단위계 | |
cm | 센티미터 |
mm | 밀리미터 |
| 영미 단위계 | |
in | 인치 |
pc | 피카[1] |
pt | 포인트 |
2.2.2. 상대 길이 단위
| <colbgcolor=#f5f5f5,#2d2f34> 글꼴 상대 길이 | |
em | font-size 값 |
rem | 루트 요소의 font-size 값 |
lh | line-height 값 |
rlh | 루트 요소의 line-height 값 |
ex | 폰트의 엑스하이트 |
ch | 폰트에서 '0' 문자의 너비 |
| 뷰포트[2] 상대 길이 | |
vw | 화면 너비의 1% |
vh | 화면 높이의 1% |
vmin | vw, vh 중 작은 길이 |
vmax | vw, vh 중 큰 길이 |
svw | 작은 뷰포트[3] 너비의 1% |
svh | 작은 뷰포트 높이의 1% |
lvw | 큰 뷰포트[4] 너비의 1% |
lvh | 큰 뷰포트 높이의 1% |
dvw | 동적인 뷰포트[5] 높이의 1% |
dvh | 동적인 뷰포트 높이의 1% |
2.3. <angle>
각도를 나타내는 값이다.translate의 rotate나 hsl과 같은 곳에서 사용된다.2.3.1. 각도 단위
| <colbgcolor=#f5f5f5,#2d2f34> 각도 단위 | |
deg | 도 |
rad | 라디안 |
grad | 그레이드 |
turn | 회전 수[6] |
2.4. <color>
색을 나타내는 값이다.background-color, color 등의 속성에서 값으로 쓰인다.2.4.1. 헥스 코드
2.4.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의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
hsl(H, S, L)/hsl(H S L)
HSL(Hue Saturation Lightness)를 함수형으로 입력하는 방식이다. RGB와 달리 색의 채도와 밝기가 명시적으로 입력되어 있기 때문에 글자만 보고도 어떤 색일지 유추하기가 쉽다.- H
원형 색공간{{{#!wiki style="display: inline-block; vertical-align: middle; margin: 0 2px; background: conic-gradient(in hsl longer hue, red, red); width: 20px; height: 20px; border-radius: 50%; border: 1px solid #888;"
- S
채도를 의미하며 퍼센트(<percentage>) 값을 받는다. 0%일 경우, 무채색이 되어 H의 값이 아무 효력이 없어지다. - L
밝기를 의미하며 퍼센트(<percentage>) 값을 받는다. 0%가 검은색, 100%가 흰색을 나타낸다.
hsla(H, S, L, A)/hsla(H S L / A)
HSL에 투명도를 추가한 버전. 투명도 A는 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
lab(L a b)/lab(L a b / A)
Lab 색 공간을 함수형으로 입력하는 방식이다.- L
색의 밝기를 나타낸다. 0~100의 숫자(<number>) 혹은 0%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다. - a
초록에서 빨강까지의 축을 나타낸다. 낮을 수록 초록에, 높을 수록 빨강에 가까워 진다. -125~125의 숫자(<number>) 혹은 -100%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다. - b
파랑에서 노랑까지의 축을 나타낸다. 낮을 수록 파랑에, 높을 수록 노랑에 가까워 진다. -125~125의 숫자(<number>) 혹은 -100%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다. - A (옵션)
투명도를 의미하며 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
color-mix(in ~, COLOR1, COLOR2)
색을 섞는 함수이다. 섞을 보간 방법(<color-interpolation-method>)과 두 색을 넣어서 사용할 수 있다.
2.4.2.1. 상대적 색상
함수 내부에 키워드를 추가해 특정 색 기준 상대적 색을 사용할 수 있다. 함수형 표기법 내부 맨 처음 값에from <color>를 넣을 경우 해당 값 기준으로 계산된다. 단, 2024년 9월 27일 기준 몇몇 브라우저들은 아직 상대 색상의 기준으로 currentColor 값을 사용할 수 없다.| <colbgcolor=#fff,#1c1d1f> | 문법 | <colbgcolor=#fff,#1c1d1f>rgb(from blue r g b) |
| 결과 | rgb(0 0 255) | |
| 문법 | rgb(from blue r 255 b) | |
| 결과 | rgb(0 255 255) | |
| 문법 | rgb(from blue r g 0) | |
| 결과 | rgb(0 0 0) |
2.4.3. 키워드
transparent
완전한 투명을 의미한다. rgba(R, G, B, 0), hsla(H, S, L, 0)와 똑같이 표시된다.
currentColor
말 그대로 현재 색을 의미한다. 해당 요소의 글자색인 color 속성 값을 따라간다. 대소문자를 구분하지 않아 currentcolor로 사용해도 된다.
- 시스템 색상
웹 페이지의 특정 부분에 사용되는 기본 색상을 의미한다. 대소문자를 구분하지 않는다. ActiveTextButtonBorderButtonFaceButtonTextCanvasCanvasTextFieldFieldTextGrayTextHighlightHighlightTextLinkTextMarkMarkTextVisitedText
2.5. <gradient>
그라데이션을 나타내는 자료형이다.background-image 등의 속성에서 자주 사용된다.2.5.1. 선형 그래디언트
linear-gradient(...)직선적인 그래디언트를 만드는 문법이다.
<colbgcolor=#fff,#1c1d1f>linear-gradient(white, black) | |
| 색()을 쉼표로 나열하여 그래디언트를 만든다. 기본적으로 색을 나열한 순서대로 위에서 아래로 내려오는 그래디언트가 생성된다. | |
<colbgcolor=#fff,#1c1d1f>linear-gradient(white 50%, black) | |
linear-gradient(black, white 20% 80%, black) | |
linear-gradient(white 50%, black 50%)linear-gradient(white 50%, black 0) | |
| 색이 위치할 지점을 설정할 수 있다. 지점을 2개 설정하면 해당색이 차지할 공간을 설정할 수 있다. 이전 지점과 같은 지점이거나 더 전의 지점을 설정할 경우, 불연속적인 무늬를 만들 수 있다. | |
<colbgcolor=#fff,#1c1d1f>linear-gradient(to right, white, black) | |
linear-gradient(to bottom right, white, black) | |
linear-gradient(45deg, white, black) | |
linear-gradient(30deg, white 50%, black 50%) | |
linear-gradient(30deg, white 50%, black calc(50% + 1px)) | |
| 그래디언트의 방향은 색을 나열하기 전에 맨 앞에서 설정할 수 있다. 사용할 수 있는 방향은 top, bottom, left, right가 있으며 수직과 수평은 섞을 수 있다. 특정 각도를 설정할 수도 있다. 0deg는 12시 방향을 의미하며 각도는 시계방향으로 움직인다. 비스듬한 각도에서 그래디언트를 불연속적으로 만들 경우 계단 현상이 일어나기 때문에 calc로 1px의 위치 차이를 줘서 그래디언트를 통해 안티에일리어싱처럼 만들 수 있다. | |
<colbgcolor=#fff,#1c1d1f>linear-gradient(red, blue) | |
linear-gradient(in hsl, red, blue) | |
linear-gradient(in hsl 45deg, red, blue) | |
linear-gradient(in hsl longer hue, red, blue) | |
| 색을 보간하는 방법을 설정할 수 있다. 색 보간 방법과 각도는 쉼표로 구분하지 않는다. in hsl을 통해 HSL로 보간하도록 설정할 경우 색상 red인 0deg에서 blue인 240deg으로 서서히 변화한다. 두 각도에서 기본적으로 가까운 180도 이하 각으로 변화하기에 2번째 예시의 경우 120deg의 거리를 움직이지만 longer hue를 사용할 경우 240deg쪽으로 변화한다. | |
2.5.2. 원형 그래디언트
radial-gradient(...)타원 방사형으로 퍼지는 그래디언트를 만드는 문법이다.
<colbgcolor=#fff,#1c1d1f>radial-gradient(white, black) | |
| 기본적으로 색을 나열하면 가운데 타원으로 생성된다. | |
<colbgcolor=#fff,#1c1d1f>radial-gradient(ellipse at top, white, black) | |
radial-gradient(circle at top, white, black) | |
radial-gradient(circle at top right, white, black) | |
radial-gradient(circle at 0 50px, white, black) | |
| 그래디언트의 모양과 시작될 중심점의 위치를 설정할 수 있다. ellipse는 타원, circle은 원을 의미한다. 중심점은 at X Y로 설정할 수 있으며, 하나만 할 경우 X와 Y가 같게 설정된다. 위치는 left, center, right, top, bottom의 키워드가 있으며, 길이 값을 설정해줄 수도 있다. | |
<colbgcolor=#fff,#1c1d1f>radial-gradient(closest-side at 25% 25%, white, black) | |
radial-gradient(closest-corner at 25% 25%, white, black) | |
radial-gradient(farthest-side at 25% 25%, white, black) | |
radial-gradient(farthest-corner at 25% 25%, white, black) | |
| 색이 어디까지 퍼질지 설정할 수 있다. 가까운 꼭짓점, 가까운 변, 먼 꼭짓점, 먼 변의 4가지가 있다. | |
2.5.3. 원뿔 그래디언트
conic-gradient(...)점을 중심으로 돌아가는 그래디언트를 만드는 문법이다.
<colbgcolor=#fff,#1c1d1f>conic-gradient(white, black) | |
conic-gradient(white, black 90deg 270deg, white) | |
| 색을 나열한 순서대로 시계방향으로 그래디언트가 생성된다. 처음색과 끝색을 똑같이 만들어야 불연속적인 부분이 사라진다. 따로 설정이 없을 경우 기본적으로 0deg인 12시 방향에서 시작된다. 색 지점은 각도()나 퍼센트(<percentage>) 값을 받는다. | |
<colbgcolor=#fff,#1c1d1f>conic-gradient(from 45deg, white, black) | |
from 을 통해 그래디언트의 시작 각도를 설정할 수 있다. | |
2.5.4. 반복 그래디언트
repeating-linear-gradient(...)repeating-radial-gradient(...)repeating-conic-gradient(...)위에서 나온 그래디언트들을 반복시키는 문법이다.
<colbgcolor=#fff,#1c1d1f>repeating-linear-gradient(white, black 10px, white 20px) | |
repeating-radial-gradient(white, black 10px, white 20px) | |
repeating-conic-gradient(white, black 10deg, white 20deg) | |
| 나열한 색의 설정된 지점이 끊긴 부분부터 처음 부분이 반복된다. | |
[1] 1/6인치[2] 보여지고 있는 전체 화면 영역[3] 모바일 등에서 브라우저 UI에 가린 부분은 포함하지 않은 화면.[4] 모바일 등에서 브라우저 UI에 가린 부분까지 포함한 화면.[5] 모바일 등에서 브라우저 UI가 사라졌다 생겼다 함에 따라 달라지는 화면.[6] 1turn은 360deg이다.