#3. CSS 프로퍼티 값의 단위

CSS에는 cm, mm, inch등의 단위들이 존재하기도 하지만 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다.

px는 절대값이고 em, %는 상대값이다.

대부분의 브라우저의 폰트 기본값은 16px, 1em, 100%이다.

 

1.1 px

px는 픽셀(화소) 단위이다. 1px는 화소 1개의 크기를 의미한다.

예를들어 보통 요즘 영상들은 1920 * 1080의 해상도를 따라가는데 이는 가로에 1920픽셀, 세로에 1080픽셀을 가진다는 의미이다.

 

디바이스 별로 픽셀(화소)의 크기는 제각각이기 때문에 픽셀을 기준으로 하는 단위는 명확하지 않다. 따라서 대부분의 브라우저는 1px를 1/96인치의 절대단위로 인식한다.

px는 요소의 크기나 이미지 크기 지정에 주로 사용된다.

 

1.2 %

%는 백분률 단위의 상대 단위이다. 요소에 지정된 사이즈에 상대적인 사이즈를 설정한다.

ex) 14px * 120 % = 16.8px

 

1.3 em

em은 배수단위로 상대 단위이다. 요소에 지정된 사이즈에 상대적인 사이즈를 설정한다.

예를 들어 1em은 요소에 지정된 사이즈와 같고 2em은 요소에 지정된 사이즈의 2배이다.

 

폰트 사이즈 설정이나 콘텐츠를 포함하는 컨테이너의 크기 설정에 사용하면 상대적인 설정이 가능하여 편리하다.

ex)1.2em > 14px * 1.2 = 16.8px

 

1.4 rem

rem은 최상위 요소의 사이즈를 기준으로 삼는다. rem의 r은 root를 의미한다.

Reset Css를 사용하여 사전에 html요소의 font-size지정이 필요하다. 미 지정시 기본값은 16px이다.

 

1.5 Viewport단위(vh, vw, vmin, vmax)

Viewport단위는 상대적인 단위로 viewport를 기준으로 한 상대적 사이즈를 의미한다.

vw	viewport 너비의 1/100
vh	viewport 높이의 1/100
vmin	viewport 너비 또는 높이 중 작은 쪽의 1/100
vmax	viewport 너비 또는 높이 중 큰 쪽의 1/100

예를 들어 viewport너비가 1000px, 높이가 600px인 경우,

1vw : viewport 너비 1000px의 1% 인 10px

1vh : viewport 높이 600px의 1% 인 6px

1vmin : viewport 높이 600px의 1% 인 6px

1vmax :  viewport 너비 1000px의 1% 인 10px

 

2. 색상 표현 단위

색상을 지정하기 위해서는 키워드를 사용할 수 있다. 사용이 간편하지만 표현할 수 있는 색상의 수는 제한된다.

CSS에서 사용할 수 있는 color목록은 이곳을 참조하기를 바란다.

https://developer.mozilla.org/ko/docs/Web/CSS/color_value

<color> - CSS: Cascading Style Sheets | MDN

 

키워드 뿐만 아니라 더 다양한 색상을 이용하고 싶다면 아래와 같은 색상 표현 단위를 사용할 수 있다.

HEX 코드 단위	#00000
RGB	rgb(255, 255, 0)
RGBA	rgba(255, 255, 0, 1)
HSL	hsl(0, 100%, 25%)
HSLA	hsla(60, 100%, 50%, 1)