CSS - 단위와 색상

CSS 단위

CSS는 길이를 표현하기 위한 다양한 단위들이 있습니다.

단위의 분류

상대단위

어떤 기준을 통해 상대적으로 변할 수 있는 단위이며, 다양한 매체에 쓰기 적절합니다.

종류 : px, em, ex, %, rem, vw, vh, vmin, vmax

절대단위

정확한 기준에 의해 고정된 단위이며, 출력 매체에 쓰기 적절합니다.

종류 : in, cm, mm, pt, pc

단위	설명
px	모니터의 1dot이 1pixel을 의미하며, pixel은 해상도에 따라서 상대적인 크기를 갖습니다.
em	부모 요소의 대문자 너비를 기준으로 상대적인 값을 갖습니다.
ex	부모 요소의 소문자 너비를 기준으로 상대적인 값을 갖습니다.
%	부모 요소의 길이를 기준으로 상대적인 값(%)을 갖습니다.
rem	루트(root em) 요소의 크기를 기준으로 상대적인 값을 갖습니다.
vw	뷰포트(viewport) 브라우저 가로 크기를 기준으로 상대적인 값을 갖습니다.
vh	뷰포트(viewport) 브라우저 세로 크기를 기준으로 상대적인 값을 갖습니다.
vmin	뷰포트(viewport) 브라우저 가로 크기 또는 세로 크기 중 작은 값을 기준으로 상대적인 값을 갖습니다.
vmax	뷰포트(viewport) 브라우저 가로 크기 또는 세로 크기 중 큰 값을 기준으로 상대적인 값을 갖습니다.
in	in은 인치를 의미합니다. inch 단위로 계산(1in = 96px = 2.54cm)
cm	cm은 센치미터를 의미합니다. centimeter 단위로 계산(1cm = 10mm = 37.8px)
mm	mm는 밀리미터를 의미합니다. mm단위로 계산(1mm = 0.1cm = 3.78px)
pt	pt는 포인트를 의미합니다. point 단위로 계산(1pt = 1/72inch)
pc	pc는 파이카를 의미합니다. pica단위로 계산(1pc = 12pt)

CSS 색상

CSS는 색상을 표현하는 방법이 다양합니다.

16진수 표기법

두자리씩 묶어서 #RRGGBB 형식으로 표현합니다. RR은 빨간색, GG는 초록색, BB는 파란색이고 각 자리에 16진수(00~FF)로 각 색상의 양을 표현합니다.

16진수 표기법 예시

FF0000

00FF00

0000FF

RGB와 RGBA

rgb(255,255,255)는 십진수를 이용하여 표현합니다. 숫자는 색상의 양을 나타내고 a는 투명도(alpha)를 나태냅니다. 투명도는 0과 1사이 값으로 표현합니다.

rgb(red 값, green 값, blue 값);

rgba(red 값, green 값, blue 값, alpha 값);

HSL와 HSLA

HSL은 색상(hue), 채도(saturation), 밝기(lightness)를 나타냅니다. 색상은 둥글게 배치한 색상환으로 표시하고 0도와 360에는 빨간색, 120도에서는 초록색, 240도에서는 파란색이 배치됩니다. 채도가 0%이면 회색톤, 100%이면 순색으로 표시됩니다. 밝기는 0%에서는 가장 어둡고 100%에서는 가장 밝습니다.

hsl(hue 값, saturation 값, lightness 값);

hsla(hue 값, saturation 값, lightness 값, alpha 값);

색상 이름 표기법

색상 이름을 이용하여 색을 표현 할 수 있습니다. 가장 기본적인 16가지를 포함하여 216가지의 색상 이름 표기법이 있습니다.

aqua, black, blue, fnchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow