Post

발단

얼마 전에 HTML, CSS, Vanilla JS 만을 이용하여 앱을 클론하는 프로젝트를 하다가 덮어둔 적이 있다. 이미 하고 있던 게 더 급해서 하루 동안 벼락치기로 한 게 전부이기도 하고 그러다보니 상당히 주먹구구식으로 진행했다.

그렇게 대충 넘긴 것 중에 하나가 반응형 디자인을 전혀 고려하지 않고 폰트 크기, 높이 등등 단위를 전부 고정값으로 작성한 것이다. 리팩토링을 시작하며 반응형으로 고치려 하는데 그에 필요한 CSS 단위 지식을 정리하고자 한다.

정리

• %
  • 부모 요소의 크기에 따라 해당 퍼센트만큼 크기를 차지한다.
• em
  • 1em은 부모 요소의 폰트 사이즈와 같다.
  • 부모 요소가 font-size: 10px; 이라면, 자식 요소가 font-size: 2em; 인 경우, 20px으로 계산된다.
• rem
  • 1rem은 최상위 요소(즉 html)의 폰트 사이즈와 같다.
  • 각각의 부모를 기준으로 하지 않기 때문에 일반적으로 em보다 편리하다.
  • 폰트가 아닌 아닌 속성에서도 작성할 수 있다. e.g., height: 3rem;
• vw, vh
  • viewport width & height, 즉 뷰포트의 너비와 높이값에 반응하는 값
  • 1vh(1vw)는 viewport 높이(너비)의 1%에 해당한다.
  • 최대, 최소값을 지정할 수 있는 vmin과 vmax 프로퍼티도 있다.