01. 상대 단위
상대단위란, 단위가 절대적인 값을 갖는것이 아니라, 항상 상대적인 크기의 값을 갖는것을 말한다. 이런 상대단위를 사용하는 이유는 브라우저의 크기가 가변적이므로, 반응형으로 디자인 하기 위함이다. 대표적인 절대 단위중 하나인 1px은 모든 상황에 항상 1px만큼의 크기를 차지하지만, CSS에서 em 혹은 rem 같은 상대단위는 브라우저의 상황에 따라 다른 px의 값을 갖게 된다.
02. em과 rem의 변환 기준
em과 rem 둘다 font-size의 속성 값에 따라 브라우저가 적절한 px 값으로 변환해준다는 점은 같지만, 어떤 기준으로 변환할 것인가에 차이를 갖는다.
em
em값을 px로 변환하는 기준은 스타일 요소의 폰트 크기가 기준이 된다. 이 지정돤 요소의 폰트 크기에 em의 값만큼 곱한 결과가 최종적으로 변환한 값이 된다.
div {
font-szie: 12px;
padding: 10rem; /* 160px */
}위 코드의 경우 스타일을 지정한 div의 font-size인 12px이 기준이되며, padding값은 최종적으로 12 x 10 = 120px이 된다.
rem
rem 값을 px로 변환하는 기준은 페이지 최상위 요소, 즉 html 요소의 폰트 크기가 기준이 된다. 이 최상위 요소의 폰트 크기에다가 rem의 값 만큼 곱한 결과가 최종적으로 변환한 값이 된다.
html {
font-size: 16px;
padding: 10rem; /* 160px */
}위 코드의 경우 html 요소의 font-size인 16px이 기준이되며, padding 값은 최종적으로 16 x 10 = 160px이 된다.
div {
font-szie: 12px;
padding: 10rem; /* 160px */
}위 코드의 경우 div 스타일의 font-size는 12px이지만, rem은 항상 최상위 html의 font-size의 값을 따르므로 마찬가지로 16 x 10 = 160px이 된다.
03. 무엇을 써야 하나?
일반적인 상황에서는 rem을 사용하는것이 더 권장된다.
em을 사용하는것이 상대적으로 고려해야할 사항이 많기 때문인데, 예를 들어 다음과 같은 상황을 고려해보자.
div {
padding: 10em; /* ??? */
}padding에 em단위를 사용하였지만, 해당 스타일에는 지정해둔 font-size가 없다. 때문에 부모의 font-size를 그대로 상속해서 사용할 것이다.
<html>
...
<body>
<div>
</div>
</body>
</html>예를 들어 위와 같은 구조일 때는 body의 font-size가 지정되어 있다면, 해당 값을 상속하여 사용하게 된다. 그러나 다른곳에서의 div태그의 부모가 또 다른 스타일요소를 가지고 있다면, 전혀 다른 px값으로 변환될 것이다. em은 따로 font-size가 없을 경우 상속받는 font-size에 영향을 받게되기 때문에, 이는 개발자로 하여금 em의 크기를 예상하기 어렵게 할 수 있다.
그러나 특정 디자인 요소가 지닌 특별한 상황에 따라서는 em을 사용하여 좀 더 어울리는 디자인을 작성할 수 있다. html의 font-size 크기를 따르지 않고 특별히 크기를 바꾸어주어야 하는 경우에 한해 em을 사용하면 더욱 유연한 디자인을 작성할 수 있다.
이와 반해 rem은 항상 html 요소의 font-size를 따르기 때문에, 사용자가 임의로 브라우저 자체의 html 폰트 크기를 변경하는등, 브라우저의 상태가 변하더라도 쉽게 통일감 있는 디자인을 구성할 수 있다.
즉, 대부분의 상황에서는 rem을, 디자인적으로 필요한 경우에 한해서만 em을 사용하는것이 권장된다.
Reference
'WEB' 카테고리의 다른 글
| [React] useState의 동작원리에 관하여 (0) | 2022.12.28 |
|---|---|
| next-sitemap을 사용하여 동적 생성 페이지 sitemap 생성하기 (0) | 2022.12.19 |
| DOM(Document Object Model) (0) | 2022.06.27 |
| JavaScript 기본 동작 원리 (with Stack, Queue, Event Loop) (0) | 2022.06.25 |
| CORS(Cross-Origin Resource Sharing) 기본 (0) | 2022.06.24 |