반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh – 웹 코딩 강좌

웹 디자이너를 위한 웹 코딩 강좌 열다섯 번째 시간입니다.
오늘도 CSS에서 반응형으로 코딩할 때 자주 사용하는 단위에 대해서 배워볼게요. %, em, rem, vw, vh 이렇게 5가지를 알아볼게요.
평소에 몇 개는 알고 몇 개는 어렴풋이 알고 있었다면 이번 강좌를 통해 직접 눈으로 보면서 알아보도록 해요.

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

핵심 요약

% 란, 전체의 몇 퍼센트인지에 대한 값입니다. 부모 기준으로 자식의 넓이를 %라고 합니다.
예를 들어, 부모 태그의 넓이가 1200px일때 자식에게 50%를 적용하면 자식 태그의 넓이는 600px이 됩니다.

em과 rem입니다.
em 단위는 상위 요소 크기의 몇 배인지를 정하는 단위입니다.
예를 들어, 상위 태그의 폰트 크기가 16px 인경우, 하위 태그에 폰트 크기에 1em으로 적용한다면 1em = 16px 이 됩니다.
1.5em = 24px(16*1.5) 인 거죠

추가로, rem 이란 em 앞에 R이 붙죠. 이건 Root의 약자인데 최상위라는 뜻이에요. 그래서 그냥 가장 상위인 html 태그에 적용된 폰트 사이즈가 기준이 되는 거죠. em과 다르게 현재 태그 위치를 기준으로 부모 태그의 폰트 사이즈는 전혀 연관이 없습니다. 더 사용하기가 편하죠.
예를 들어, HTML(or Body) 태그의 폰트 크기가 16px 인경우, 어떤 태그에나 1rem으로 적용한다면 1rem = 16px 이 됩니다.

​
마지막은 vw, vh입니다.
이건 viewport width / viewport height의 약자입니다.
Vw- 뷰포트의 폭에 근거하여 1vw는 width의 1%와 같습니다.
Vh – 뷰포트의 높이에 근거하여 1vh는 height의 1%와 같습니다.

뷰 포트라는 것은 실제로 보이는 화면입니다.
검색창, 최소화, 끄기 등의 브라우저 기능을 제외하고 실제로 눈에 보이는 부분을 말합니다.

가로로 뷰포트 크기를 조절해보면 vw 단위를 사용한 부분이 달라지고, 세로로 뷰포트 크기를 조절해보면 vh 단위를 사용한 부분이 달라집니다.
생각보다 간단하죠?
우리는 px에 익숙해져 있지만, 웹 코딩을 하다 보면 이런 유동적인 단위를 알아두는 것이 좋습니다. 실제 작업하면서 어떻게 적용할 수 있을지 고민해 보세요.