프론트엔드 개발은 화면의 구조를 설계한 후 css로 화면에 어떻게 보여줄지 결정한다.
위 과정을 퍼블리싱이라고 하는데.
퍼블리싱을 할 때 어떤 속성의 값으로 줄 수 있는 단위가 있다.
속성은 margin, padding, width, height, font-size 등등이 있고,
해당 속성의 값으로는 수치를 나타내는 숫자와 단위를 조합한다.
예를 들면 margin: 10px , width: 10px 이런 식으로 속성과 값을 정의할 수 있다.
위의 예에서는 px 단위를 사용했지만, css에는 unit이라고 불리우는 여러 단위들이 존재한다.
그중에서 가장 널리 그리고 자주 사용되는 단위로는 px, % 가 있고,
em, rem, vw, vh 등등 작성하지 않은 단위들도 여럿 있다.
이 글에서는 px, %, em, rem, vw, vh에 대해서 다뤄보려고 한다.
프론트엔드 개발을 시작하고 나는 퍼블리싱을 할 때 정적인 단위 px과 동적인 단위 %를 주로 사용했다.
px은 100px이면 딱 100size 그대로이다. 절대절대 바뀌지 않는다.
반면, %는 화면에서 백분율로 나눠 나타내는데 width: 20% 라고 정의를 하면 해당 화면에서 100% 중에 20%만큼의 size이다.
width(너비)가 1024일때 20%하고, 1440일때 20%는 다르다.
또한 % 단위는 부모에게 고정적인 값이 있을 때 부모의 고정값에 %만큼의 size를 나타낸다.
vw, vh는 보이는 화면(view port)을 기준으로 1vw, 1vh는 1%를 나타낸다.
%는 보이지 않는 화면까지 포함하여 전체 화면을 기준으로 하고, vw/vh는 보이는 화면이 기준으로 구분할 수 있다.
rem은 루트(html)의 font-size를 기준으로 배수의 값을 가진다.
브라우저에서 기본적으로 html의 font-size는 16px인데,
내가 만든 태그에서 속성을 font-size: 2rem라고 정의를 하면 브라우저에서는 16 * 2로 32px로 표현된다.
em은 부모의 font-size를 기준으로 배수의 값을 가진다.
html의 font-size: 16px, 부모 태그의 font-size: 2em, 자식 태그의 font-size: 2em 일 경우에는 16 2 2로 브라우저에서는 64px로 표현된다.
%, vw, vh, rem, em을 잘 사용하면 다양한 디바이스에 반응형을 구현할 수 있다.
font는 기본적으로 rem 단위가 반응형하기에 알맞으며, 부모의 font-size에 따라 자식 font-size도 동적으로 변경해야하는 특수한 경우에 em 단위가 알맞다.
em은 부모로부터 font-size를 상속받다 계산하므로 남용하면 헬게이트가 열린다.
