em
- 상위 요소 크기의 몇 배인지로 크기를 정한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
html { font-size: 16px; }
body { font-size: 1.5em; }
.a { font-size: 2.0em; }
</style>
</head>
<body>
<p class="a">Lorem Ipsum Dolor</p>
</body>
</html>html 요소의 크기는 16px.
body 요소의 크기는 상위 요소인 html 요소 크기의 1.5배인 24px.
a 크기는 상위요소 body의 24px의 2배인 48px가 된다.
rem
- 문서의 최상위 요소, html 요소의 크기의 몇 배인지로 크기를 정한다.
.a { font-size: 2.0rem; }글자 크기는 32px가 된다.
반응형
'Frontend > CSS' 카테고리의 다른 글
| [CSS] CSS 선택자 정리 - 가상 클래스 (0) | 2021.09.15 |
|---|---|
| [CSS] box-sizing (0) | 2021.07.30 |
| [CSS] 폰트 파일 적용시키기 @font-face (1) | 2021.07.23 |
| [CSS]가상 클래스/ 가상 요소 (0) | 2021.07.06 |
| [CSS]transform(3D)속성 : perspective(원근법) (0) | 2021.07.06 |
