CSS 단위 총정리 : 색상, 크기, 시간, 각도

목차

1. CSS에서의 단위들

2. 색상 단위 (Color Units)

3. 크기 단위 (Length Units)

4. 시간 단위

5. 각도 단위

6. 해상도 단위(미디어 쿼리 사용)

7. 문자의 크기 기반 단위

---

1. CSS에서의 단위들

CSS에서는 다양한 단위를 사용해 스타일을 지정한다.

가장 많이 쓰이는 단위로는 색상 단위, 크기 단위가 있고,

애니메이션이나 반응형 디자인에서 사용하는 시간, 각도, 비율 단위도 있다.

 

---

2. 색상 단위 (Color Units)

CSS에서 색상을 표현하는 방식이다.

 

1. 색상 이름 (Color Names)

기본적인 색상은 CSS에 정의된 영문 이름으로 사용할 수 있다.

표현할 수 있는 색상의 한계가 있어서 자주 사용하지는 않는다.

color: red;
background-color: green;

 

2. 16진수 색상 코드 (Hexadecimal)

16진수로 빨강, 초록, 파랑의 값을 표현한다.

#RRGGBB 형식으로 작성하며, 대소문자 구분을 하지 않는다.

#FFF(#FFFFFF)와 같이 축약해서 작성할 수도 있다.

color: #FF0000;	/* 빨강 */
color: #00FF00; /* 초록 */
color: #FFFF00;	/* 노랑 */

3. RGB / RGBA

10진수로 RGB(A) 값을 정한다.

A(알파)는 불투명도(opacity)로, 0은 투명, 1은 불투명이다.

color: rgb(255, 255, 0);	/* 노랑색 */
color: rgba(255, 255, 0, 0.5);	/* 반투명한 노랑색 */

4. HSL / HSLA

색조(Hue), 채도(Saturation), 밝기(Lightness)로 색을 표현한다.

color: hsl(60, 100%, 50%);	/* 노랑색 */
color: hsla(60, 100%, 50%, 0.5);	/* 반투명한 노랑 */

 

 

 

---

3. 크기 단위 (Length Units)

크기 단위는 절대 단위와 상대 단위로 나뉜다.

 

1. 절대 단위

단위	의미	예시
px	픽셀	width: 200px;
cm, mm, in, pt, pc	인쇄물 기준 단위	거의 사용되지 않는다.

 

 

2. 상대 단위

%, em, rem, [vw, vh, vmin, vmax], fr 로 여섯 가지 종류가 있다.

 

✅ % : 부모 요소 기준

height: 50%;	/* 부모 높이의 절반 */

 

✅ em : 부모 요소의 font-size 기준

font-size: 2em;	/* 부모 글자 크기의 2배 */

 

✅ rem : <htrml>(root) 요소의 font-size 기준

font-size: 2rem; /* 루트 글자 크기의 2배 */

 

✅ vw, vh, vmin, vmax : 뷰포트 기반 단위

뷰포트는 전체 웹페이지가 아닌 사용자가 현재 보고 있는 화면의 창이다.

데스크탑에서 브라우저 창을 가로 1200px, 세로 800px로 띄웠을 때는 1200x800

모바일에서 브라우저를 보고 있다면 모바일 기기의 화면 크기

단위	의미
vw	뷰포트 너비의 1% (width) 기준
vh	뷰포트 높이의 1% (width) 기준
vmin	너비, 높이 중 더 작은 값의 1%
vmax	너비, 높이 중 더 큰 값의 1%

 

width: 100vw;	/* 전체 가로폭 */
height: 100vh;	/* 전체 세로폭 */

 

 

✅ fr : CSS Grid 전용 비율 단위

grid-template-columns: 1fr 2fr;	/* 전체 너비를 3등분 해서 1:2로 나눔 */

 

 

---

4. 시간 단위

주로 애니메이션에서 동작 시간을 지정할 때 사용한다.

transition: 1s;	/* 1초 */
animation-delay: 500ms;	/* 500밀리초 */

 

 

---

5. 각도 단위

애니메이션 진행 각도, gradient 방향 등을 지정할 때 주로 사용한다.

단위	의미	예시
deg	도 (degress)	rotate(45deg)
rad	라디안	rotate(3.14rad)
grand	그라디언트 단위	rotate(100grad)
turn	회전 단위 (1turn = 360도)	rotate(3.5turn)

 

---

6. 해상도 단위 (미디어 쿼리에서 사용)

애니메이션 진행 각도, gradient 방향 등을 지정할 때 주로 사용한다.

단위	의미	예시
dpi	인치당 점 수	min-resolution: 300dpi
dppx	픽셀 밀도 (1dppx = 96dpi)	min-resolution: 2dppx

 

---

7. 문자의 크기 기반 단위

애니메이션 진행 각도, gradient 방향 등을 지정할 때 주로 사용한다.

단위	의미	예시
ch	숫자 0의 너비	width: 30ch;
ex	소문자 x의 높이	거의 사용되지 않음
lh	현재 요소의 line-height	margin-top: 2lh;

 

 

 

 

참고

MDN Web Docs