CSS 색상과 크기 단위

색상을 표현하는 방법

CSS에서 색은 이름 말고도 몇 가지 방식으로 표현할 수 있습니다.

표현 방식	예시	특징
색상 이름	red, skyblue	직관적이지만 표현 가능한 색이 제한적
HEX 코드	#ff0000	빨강·초록·파랑을 16진수 두 자리씩(RRGGBB)으로 표현
RGB	rgb(255, 0, 0)	빨강·초록·파랑을 0~255 숫자로 표현
RGBA	rgba(255, 0, 0, 0.5)	RGB에 불투명도(alpha) 추가

HEX 코드 읽는 법: #ffffff는 ff(빨강) + ff(초록) + ff(파랑) 세 쌍으로 나뉩니다. 각 쌍이 00이면 그 색이 하나도 없다는 뜻, ff면 최대치라는 뜻입니다. #ffffff는 세 색이 전부 최대라 흰색, #000000은 전부 0이라 검은색이 됩니다.

불투명도(Alpha): rgba()의 마지막 숫자는 0(완전 투명)부터 1(완전 불투명) 사이의 값입니다. 배경색만 살짝 비치게 하고 싶을 때 자주 씁니다.

크기를 표현하는 단위

단위	의미	비유
px	고정된 픽셀 수	종이에 자로 잰 절대 길이
%	부모 요소 기준 비율	"부모 크기의 절반" 같은 상대 길이
em	부모(또는 자기 자신) 글자 크기 기준 배수	"지금 글자 크기의 몇 배"
rem	문서 최상위(html) 글자 크기 기준 배수	페이지 전체 기준 눈금자

px은 다루기 쉽지만 화면 크기가 달라져도 절대 안 바뀌고, %/em/rem은 상황에 맞게 크기가 유동적으로 변합니다. 반응형 디자인을 만들 때는 상대 단위를 많이 쓰게 됩니다.

참고: 개인 Notion 학습 노트