픽셀은 절대 단위이며 rem과 em은 상대 단위입니다.
(1) 픽셀 (pixel) 정의
정의 : 절대(absolute)단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위입니다.
대표적으로 많이 사용되는 단위가 픽셀(px)입니다
즉, 실생활에서 1cm가 항상 1cm 인 것처럼, 1px도 항상 1px입니다
1px(=0.02645833cm)
(2) rem 정의
rem은 root em의 약자입니다. 즉 최상단(root)의 기준으로 크기를 맞추겠다는 의미인데 최상위 태그인 html에 정의된 사이즈를 기준으로 배수하겠다는 것입니다.
(3) em 정의
em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것
em은 이와 같이 상위의 부모요소의 폰트사이즈를 기준으로 하기 때문에 아래와 같이 해당 요소를 계속 중첩하게 되고
단위도 em과 rem을 섞어서 사용하게 되면 사이즈계산이 복잡하게 되어 본인이 의도한 것이 아닌 값이 표현 될 수도 있습니다.
<style>
.parent{ font-size:12px }
.child{ font-size:1.2em }
</style>
<body>
<div class="parent">안녕하세요
<div class="child">안녕하세요
<div class="child">안녕하세요
<div class="child">안녕하세요</div>
</div>
</div>
</div>
</body>최종 중첩되어 있는 마지막 안녕하세요는 폰트값이 얼마일까요? 복잡하지요?
그러므로
많은 CSS 가이드들이 em을 사용해야만 하는 타당한 이유가 없는 경우라면 rem을 우선적으로 사용하도록 권고
(4) rem과 em 단위 계산
rem은 단위 계산에 있어서 기준이 html(최상위 요소)의 font-size속성값을 의미하기 때문에 단위 계산이 어렵지 않습니다 em은 해당 단위가 사용되고 있는 요소의 font-size속성값이 기준이 되기 때문에 html요소와 해당요소(예를 들어 div) 사이에 다른 요소들이 중첩되어 끼어 있으면 어떻게 될까요? 그리고 중첩되어 있는 요소의 font-size도 고정길이가 아닌 rem 이나 em으로 선언되어 있다면 때로는 단위 계산을 할 때 누락하고 사용하는 경우도 있을 것입니다.
(예시)
* 기준 폰트 사이즈
* rem 으로 계산
* em 으로 계산
'테크노트 > css' 카테고리의 다른 글
| CSS 포지션(position) (0) | 2022.05.10 |
|---|---|
| CSS 디스플레이 타입 (display types) (0) | 2022.04.29 |
| 초보개발자가 알아야 하는 CSS 기초 (0) | 2022.01.07 |
| CSS의 확장, 부트스트랩(bootstrap) (0) | 2021.11.05 |
| CSS 기초는 알아두자 (0) | 2021.11.03 |
댓글