반응형 웹을 만들다보면 넓이와 높이, 단위에 대한 고민은 필수적으로 하게된다.
반응형을 고려하지 않을 땐 px를 사용했지만 반응형 웹 페이지를 개발하고자 한다면 em, rem 단위를 사용하는 것이 좋다는 것을 프론트엔드 개발자라면 당연히 알고 있을 것이다.
그렇다면 px, em, rem, %, vw, vh는 어떤 차이가 있을까?
📏 px ( pixel )
px은 절대값을 사용하는 단위이다. 고정된 물리적 크기에 해당한다.
상대적인 단위가 아니므로 화면의 크기나 해상도에 관계없이 크기가 일정하게 유지된다.
화면의 크기나 해상도에 관계없이 동일한 크기를 유지해야 하는 요소에는 px를 사용할 수 있다.
⚠️ px 사용의 문제점
모든 브라우저는 사용자가 font-size 설정이 가능하다. 따로 font-size를 지정하지 않은 경우에는 일반적으로 16px로 표시되는데 개발자가 만약 font-size를 px로 고정하면, 사용자가 브라우저 설정에서 font-size를 변경하려고 해도 개발자가 정해둔 font-size에서 변경이 되지 않는다.
📐 em
em은 해당 단위가 사용되고 있는 요소의 font-size를 기준으로 px로 바뀌어 화면에 표시된다.
같은 엘리먼트에 설정된 포트 크기 값이 없을 경우에는 상위 요소의 폰트 사이즈가 기준이 된다.
html {
font-size: 16px;
}
div {
font-size: 20px;
width: 10em; /* 200px */
}✏️ 중첩인 경우
<style>
.container {
font-size: 14px;
}
.container.title {
font-size: 2em; // 28px
}
.container.subtitle {
font-size: 1.5em; // 21px
}
.container.subtitle.leading {
font-size: 0.5em;
}
</style>
<body>
<div class="container">
<div class="title"></div>
<div class="subtitle"></div>
</div>
</body>leading의 글꼴의 크기는 container > subtitle 안에 있기 때문에, 14 x 1.5 x 0.5 = 10.5px이 된다
✏️ 넓이 ( width )와 높이 ( height )속성의 값은?
<style>
.container {
font-size: 14px;
}
.container.title {
font-size: 2em; // 28px
}
.container.subtitle {
font-size: 1.5em; // 21px
}
.container.subtitle.leading {
font-size: 0.5em; // 10.5px
width: 0.3em;
height: 0.4em;
}
</style>
<body>
<div class="container">
<div class="title"></div>
<div class="subtitle"></div>
</div>
</body>width는 10.5 x 0.3 = 3.15px
height는 10.5 x 0.4 = 4.2px
📐 rem
최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환된다.
HTML에서 최상위 요소는 html 태그이므로 rem의 경우, html 요소의 font-size 속성값이 기준이 된다.
별도의 font-size를 설정하지 않았을 경우에는 각 브라우저에서 기본적으로 설정된 값을 상속받는다.
html {
font-size: 16px;
}
div {
font-size: 20px;
width: 10rem; /* 160px */
}✏️ 넓이 ( width )와 높이 ( height )속성의 값은?
<style>
.container {
font-size: 14px;
}
.container.title {
font-size: 2rem; // 28px
}
.container.subtitle {
font-size: 1.5rem; // 21px
}
.container.subtitle.leading {
font-size: 0.5rem; // 7px
width: 0.3rem;
height: 0.4rem;
}
</style>
<body>
<div class="container">
<div class="title"></div>
<div class="subtitle"></div>
</div>
</body>width는 14 x 0.3 = 4.2px
height는 14 x 0.4 = 5.6px
많은 CSS 가이드들이 em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권고한다.
em의 경우 실제 몇 px로 변환될지에 영향을 주는 변수가 많아지기 때문에 em을 사용해서 스타일된 요소의 경우 재사용이 어렵고 유지보수가 힘들어지는 경향이 있기 때문이다.
하지만 rem과 em도 용도에 맞게 적절히 혼용해서 사용할 수 있다. 어느 페이지에서든 고정된 사이즈를 사용해야 한다면 rem을, 부모 요소에 따라 유동적으로 변해야 하는 곳에는 em을 사용할 수 있다.
📐 %
상위 요소의 크기를 기반으로 하는 상대적인 측정 단위.
상위 요소의 너비가 500px이고 하위 요소의 너비가 50%로 지정된 경우 하위 요소의 너비는 250 픽셀이 된다.
📐 VW ( Viewport Width ) & VH ( Viewport Height )
VW와 VH는 각각 웹 페이지의 보이는 부분 (뷰포트) 의 너비와 높이를 기준으로 하는 상대적인 측정 단위로 1VW는 뷰포트 너비의 1%, 1VH는 뷰포트 높이의 1%에 해당한다.
