CSS 사이즈 단위 정리

이번에는 CSS에서 자주 사용되는 사이즈 단위를 정리해 보았다. 개발하면서 px, %, em, rem 같은 단위들을 계속 접하지만 정확히 어떤 기준으로 크기가 정해지는지 헷갈릴 때가 많았다. 이번 기회에 확실히 짚고 넘어가려고 한다.

px

px은 픽셀 단위로, 화면 크기와 상관없이 고정된 절대적인 크기를 가진다. 그래서 브라우저 크기나 기기 해상도가 달라져도 변하지 않는다. 가장 기본적이고 직관적인 단위라고 할 수 있다.

%는 부모 요소를 기준으로 크기가 결정된다. 예를 들어 부모 요소의 width가 500px인데 자식 요소의 width를 50%로 주면 자식 요소의 실제 크기는 250px이 된다. 레이아웃을 유동적으로 조정할 때 유용하다.

em은 **부모 요소의 글자 크기(font-size)**를 기준으로 계산되는 상대 단위다. 예를 들어 부모의 글자 크기가 16px이라면 2em은 32px이 된다. 하지만 부모 요소 크기에 따라 계속 값이 달라질 수 있어 상황에 따라 주의가 필요하다.

rem에서 r은 **root(루트)**를 의미한다. 즉, HTML의 기본 글자 크기를 기준으로 하는 상대 단위다. 보통 브라우저의 기본 폰트 크기인 16px을 기준으로 계산된다. 접근성을 고려해 글자 크기를 키우거나 줄일 때 특히 유용하다.

vh와 vw에서 v는 **viewport(뷰포트)**를 의미한다.

예를 들어, width: 50vw라고 하면 화면 너비의 절반 크기가 된다. 이 단위들은 브라우저 창 크기에 따라 유동적으로 변하기 때문에 반응형 디자인에 자주 활용된다.

이렇게 정리하고 보니 어떤 상황에서 어떤 단위를 쓰면 좋을지 더 명확해졌다. 앞으로 반응형 디자인을 구현할 때는 px 대신 %, em, rem, vh, vw 같은 단위를 더 적극적으로 활용해 보아야겠다.