반응형
em
em은 현재의 글자 크기(font-size)를 정의한다. 예를 들어, body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받는다.
HTML
<body>
<div class="test">Test</div>
</body>
CSS
body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}예를들어 <div>에 font-size를 1.2em으로 지정했다고 하자. 이 예제에서는 <body>의 font-size인 14px을 기준으로 1.2배의 폰트 사이즈로 표현이 되어, 결과적으로 16.8px의 크기가 된다.
rem(root em)
HTML
<div> Test (14 * 1.2 = 16.8px)
<div> Test (16.8 * 1.2 = 20.16px)
<div> Test (20.16 * 1.2 = 24.192px)
</div>
</div>
</div>
그럼 이렇게 <div>가 다른 <div>를 자식 요소로 가지고 있고, 또 <div>를 자식 요소로 갖고... 이런 과정이 위의 코드와 같이 반복된다고 가정해보자.
em으로 정의한 폰트 사이즈를 또 다시 자신의 자식 요소에 선언하면 어떤 일이 생길까?
각각의 <div>는 각자 자기 자신의 부모의 폰트 사이즈를 상속받으며 괄호에 표시했듯이 1.2배씩 점점 커지게 될 것이다.
하지만, 점점 커지는 것이 아니라 모든 <div>의 폰트들을 단일 사이즈로 표현하려고 의도 한 경우도 있을 것이다. 바로 이런 경우에 rem단위를 사용하면 된다. 여기서 rem의 'r'은 바로 'root'를 뜻한다. 즉, rem은 최상위 요소에 지정한 것을 기준으로 삼는다는 것이다. 여기서는 body를 기준으로 모든 div의 크기가 결정된다.
반응형
'Web > HTML, CSS' 카테고리의 다른 글
| [CSS] Selector Reference (0) | 2020.12.17 |
|---|---|
| [CSS] Flex (0) | 2020.12.12 |
| [CSS] :active를 활용해 버튼 누르는 효과 내기 (6) | 2020.12.11 |
| [CSS] Selector, Class와 Id의 차이점 (0) | 2020.12.10 |
댓글