공통점
- CSS의 font-size 값에 비례해서 결정되는 상대 단위
차이점
- font-size이 어느 기준(태그)이냐에 따라 차이가 발생
- em : 해당 단위가 사용되는 스타일 지정 태그의 font-size 속성 값이 기준
(만약 없으면? 부모요소로 부터 font-size 값을 상속(inherit)받는다.) - rem : r은 root, 즉 최상위 태그의 font-size 속성 값을 기준으로 한다.
HTML에서 최상위 태그? <html> 즉, html 태그의 font-size 속성 값이 기준
예시 1
html {
font-size: 16px;
}
div {
font-size: 20px;
width: 10em; /* 200px */
}
div {
font-size: 20px;
width: 10rem; /* 160px */
}예시 2
- html
<html>
<body>
<div class ="container">
<div class ="content1"></div>
<div class ="content2"></div>
</div>
</body>
</html>- css
html {
font-size: 16px;
}
body {
font-size: 2em;
}
div.container { font-size: 2em; }
div.content1 { font-size: 2rem; } /* 32px */
div.content2 { font-size: 2em; } /* 128px */
언제 사용해야해? 반응형!
- em : 번동성이 큰 요소일 경우, 화면 사이즈 변화에 계속 폰트사이즈가 바뀌고, 여백도 바뀌는 경우 pandding, margin을 em으로 주기도 한다. 상속을 계속 고려야해 함으로 필요할 때 사용
- rem : 브라우저 기본 폰트 사이즈에 따라 크기가 변해야 하는 곳
참고
https://fromnowwon.tistory.com/entry/em-rem
[CSS] rem 과 em 의 차이를 간단히 알아보자 – 모두의매뉴얼
HTML 에서 CSS 를 이용해 폰트나 마진, 패딩 등의 크기를 지정할 때 정확한 px 로 지정할 수도 있지만, 상대적인 값을 표현해주는 단위인 rem 이나 em 을 사용하기도 합니다. 그런데 이 rem 과 em 이 표
triki.net
'코딩 > HTML&CSS' 카테고리의 다른 글
| [CSS] min-width / max-width (0) | 2022.06.03 |
|---|---|
| 내가 만든 페이지가 이상했던 이유(box-sizing 속성) (0) | 2022.05.18 |