최근 수정 시각 : 2024-04-07 11:50:46

CSS/자료형


파일:상위 문서 아이콘.svg   상위 문서: CSS
1. 개요2. 목록
2.1. <length>
2.1.1. 절대 길이 단위2.1.2. 상대 길이 단위
2.2. <angle>
2.2.1. 각도 단위
2.3. <color>
2.3.1. 헥스 코드2.3.2. 함수형 표기법
2.3.2.1. 상대적 색상
2.3.3. 키워드
2.4. <gradient>
2.4.1. 선형 그래디언트2.4.2. 원형 그래디언트2.4.3. 원뿔 그래디언트2.4.4. 반복 그래디언트

1. 개요

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

2. 목록

전체 자료형은 MDN의 CSS 자료형 페이지에서 확인할 수 있다.

2.1. <length>

길이를 나타내는 값이다. width, margin 등 많은 속성에서 사용된다. 퍼센트(<percentage>) 값은 길이(<length>)와는 다른 자료형이다.

0은 단위에 관계 없이 모두 같은 값을 가지기 때문에 따로 단위를 붙이지 않아도 된다.

2.1.1. 절대 길이 단위

<colbgcolor=#f5f5f5,#2d2f34> 디스플레이
px 픽셀
국제단위계
cm 센티미터
mm 밀리미터
영미 단위계
in 인치
pc 피카[1]
pt 포인트

2.1.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.2. <angle>

각도를 나타내는 값이다. translate의 rotate나 hsl과 같은 곳에서 사용된다.

2.2.1. 각도 단위

<colbgcolor=#f5f5f5,#2d2f34> 각도 단위
deg 도
rad 라디안
grad 그레이드
turn 회전 수[6]

2.3. <color>

색을 나타내는 값이다. background-color, color 등의 속성에서 값으로 쓰인다.

2.3.1. 헥스 코드

파일:상세 내용 아이콘.svg   자세한 내용은 헥스 코드 문서
를
의 번 문단을
의 부분을
참고하십시오.

2.3.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의 소수점 숫자 혹은 퍼센트(<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의 소수점 숫자 혹은 퍼센트(<percentage>) 값이다.
  • color-mix(in ~, COLOR1, COLOR2)
    색을 섞는 함수이다. 섞을 보간 방법(<color-interpolation-method>)과 두 색을 넣어서 사용할 수 있다.
2.3.2.1. 상대적 색상
함수 내부에 키워드를 추가해 특정 색 기준 상대적 색을 사용할 수 있다. 함수형 표기법 내부 맨 처음 값에 from <color>를 넣을 경우 해당 값 기준으로 계산된다. 2024년 4월 6일 기준 Firefox, 삼성 인터넷은 아직 지원하지 않는다.
<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.3.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.4. <gradient>

그라데이션을 나타내는 자료형이다. background-image 등의 속성에서 자주 사용된다.

2.4.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.4.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.4.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.4.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이다.

분류