고정 크기 단위
px, pt, in, cm, mm
(기본 px: 16px)
가변 크기 단위
em, %, rem, vw, vh
em
부모가 가진 font-size의 n배
(부모의 크기값 * 자식의 em 값) = 자식이 가지게 될 크기 값
rem
중첩 무시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가변 크기 단위</title>
<style>
html, body {
font-size: 10px;
}
p {
font-size: 2em;
font-weight: 700;
}
div {
font-size: 2em;
}
.one {
font-size: 2rem;
}
</style>
</head>
<body>
<h1>hello world</h1>
<p>hello world</p>
<!-- em, %, rem, vw, vh -->
<div>
<!-- 10px * 2 = 20px -->
<div>
<!-- 20px * 2 = 40px -->
<div>
<!-- 40px * 2 = 80px -->
hello world
</div>
</div>
</div>
<div>
<!-- 10px * 2 = 20px -->
<div>
<!-- 20px * 2 = 40px -->
<div class="one">
<!-- 40px * 2 = 80px -->
hello world
</div>
</div>
</div>
</body>
</html>
%
상대적인 크기 지정
부모의 크기 & (자식의 %값/100) = 자식이 가지게 될 px 값
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body { font-size: 30px; }
div { font-size: 50%; }
p { font-size: 110%; }
</style>
</head>
<body>
<!-- body의 크기인 30px을 따른다. -->
%의 처음 크기는 30px 입니다.
<div>
<!-- 부모 body의 크기인 30px에 div의 크기인 0.5을 곱한다. -->
<br/>%의 크기는 30 * 0.5 = 15px 입니다.
</div>
<!-- 부모 body의 크기인 30px에 p 크기인 1.1을 곱한다. -->
<p>p의 크기는 30 * 1.1 = 33px 입니다. </p>
</body>
</html>'HTML·CSS' 카테고리의 다른 글
| [HTML] 블록 요소와 인라인 요소 (0) | 2022.02.07 |
|---|---|
| [HTML] table 태그 (0) | 2022.02.04 |
| [HTML] Form 태그 (0) | 2022.02.04 |
| [HTML] Emmet (2) | 2022.02.04 |
| [HTML] 미디어 태그 (0) | 2022.02.04 |