반응형으로 웹디자인을 하다보면 넓이와 높이, 사이즈 단위에 대한 고민을 하게 된다. 반응형을 고려하지 않고 디자인을 할 때는 px를 썼지만, 좀 더 유연한 페이지를 디자인 하고자 한다면 em, rem단위를 사용하는 것이 좋다. 이 단위들은 어떤 차이가 있고, 어떤 단위를 사용하는 게 좋은지 이번에 확실히 알아두고자 한다.
px는 값이 고정되어있는 절대값의 단위이고, em과 rem은 환경에 따라 변하는 상대단위이다.
➡️ 상대단위 & 절대단위
상대 단위란 고정되지 않고 어떤 기준에 따라 유동적으로 바뀌는 길이를 나타내는 단위이다. 대표적으로는 em, rem, %, vw, vh 등이 있다.
절대 단위란 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이다. 절대 단위도 상대 단위처럼 여려 단위가 있지만, 웹에서 절대 단위는 px을 제외하고는 잘 쓰이지 않는다. 보편적으로 책이나 신문과 같은 인쇄 콘텐츠는 항상 그 크기가 고정적이므로 절대 단위를 사용해야 하지만, 웹은 디바이스나 사용자 환경에 따라 콘텐츠 크기가 유동적으로 변하기 때문에 절대 단위를 사용하면 콘텐츠의 유연성이 저하된다.
➡️ px
픽셀은 절대값을 사용하는 단위이다. 1cm가 항상 1cm인 것처럼, 1px는 항상 1px이다. 즉 1px은 고정된 물리적 크기에 해당한다.
❗px 사용의 문제점
모든 브라우저는 사용자가 font-size 설정이 가능하다. 따로 font-size를 지정하지 않은 경우에는 일반적으로 16px로 표시 되는데 개발자가 만약 font-size를 px로 고정하면, 사용자가 브라우저 설정에서 font-size를 변경하려고 해도 개발자가 정해둔 font-size에서 변경이 되지 않는다.
예를 들어 css에서 font-size를 24px로 설정해두고 브라우저에서 사용자가 font-size를 40px로 바꾸려고 해도 화면에 표시되는 크기는 24px에서 변하지 않는다.
한마디로 px은 사용자의 설정값을 덮어쓴다는 뜻이다.
➡️ 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안에 있기 때문에, 14x1.5x0.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.5x0.3 = 3.15px
height은 10.5x0.4 = 4.2px
➡️ rem
rem에서 r은 root, 즉 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환된다. HTML에서 최상위 요소는 html태그이다. 따라서 rem의경우, html 요소의 font-size 속성값이 기준이 된다. 만약 별도의 font-size를 설정하지 않았을 경우에는 각 브라우저에서 기본적으로 설정된 값을 상속 받는다. (일반적으로 16px)
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는 14x0.3 = 4.2px
height은 14x0.4 = 5.6px
결론
많은 CSS 가이드들이 em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권고하고 있다. 왜냐하면 em의 경우 위에서 보았듯이 실제 몇 px로 변환될지에 영향을 주는 변수가 많아지기 때문에 em을 사용해서 스타일된 요소의 경우 재사용이 어렵고 유지보수가 힘들어지는 경향이 있기 때문이다.
하지만 rem과 em도 용도에 맞게 적절히 혼용해서 사용할 수 있다. 예를 들어 어느 페이지에서든 고정된 사이즈를 사용해야 한다면 rem을, 부모 요소에 따라 유동적으로 변해야 하는 곳에는 em을 사용하면 된다. 그래서 보통 font-size에는 rem을 사용하고 padding이나 margin같이 화면에 따라 유연하게 변하는 크기는 em을 사용한다.
출처
