CSS/자료형

상위 문서: CSS

1. 개요2. 목록

2.1. <number>2.2. <length>

2.2.1. 절대 길이 단위2.2.2. 상대 길이 단위

2.3. <angle>

2.3.1. 각도 단위

2.4. <color>

2.4.1. 헥스 코드2.4.2. 함수형 표기법

2.4.2.1. 상대적 색상

2.4.3. 키워드

2.5. <gradient>

2.5.1. 선형 그래디언트2.5.2. 원형 그래디언트2.5.3. 원뿔 그래디언트2.5.4. 반복 그래디언트

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;"

}}}에서 각도(<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의 소수점 숫자(<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)`
<colbgcolor=#fff,#1c1d1f>	결과	`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. 키워드

색상 키워드
특정 색상을 나타내는 키워드이다. 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.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이다.

CSS/자료형

1. 개요

2. 목록

2.1. <number>

2.2. <length>

2.2.1. 절대 길이 단위

2.2.2. 상대 길이 단위

2.3. <angle>

2.3.1. 각도 단위

2.4. <color>

2.4.1. 헥스 코드

2.4.2. 함수형 표기법

2.4.2.1. 상대적 색상

2.4.3. 키워드

2.5. <gradient>

2.5.1. 선형 그래디언트

2.5.2. 원형 그래디언트

2.5.3. 원뿔 그래디언트

2.5.4. 반복 그래디언트

분류