CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다.
자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다.
- 부모의 크기에 따라서 사용하는 경우는 %와 em을 사용
- 브라우저의 크기에 따라서 사용하는 경우는 v*와 rem을 사용합니다.
1. em
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="em_tree.css" />
</head>
<body>
<div class="level1">
<h1>level 1</h1>
<div class="level2">
<h1>level 2</h1>
<div class="level3">
<h1>level 3</h1>
<div class="level4">
<h1>level 4</h1>
</div>
</div>
</div>
</div>
</body>
</html>.level1 {
font-size: 2em;
}
.level2 {
font-size: 2em;
}
.level3 {
font-size: 2em;
}
.level4 {
font-size: 2em;
}
- 부모 요소보다 2배씩 커지게 됩니다.
2. rem
rem의 경우는 전체 브라우저 창의 크기를 기준으로 하기 때문에 일정한 크기를 갖습니다.
.level1 {
font-size: 2rem;
}
.level2 {
font-size: 2rem;
}
.level3 {
font-size: 2rem;
}
.level4 {
font-size: 2rem;
}
'Coding > HTML & CSS' 카테고리의 다른 글
| [클론 코딩] 유튜브 사이트 만들기 (0) | 2021.07.14 |
|---|---|
| [CSS] 반응형 CSS 단위 정리 1 (0) | 2021.07.13 |
| [CSS] CSS 정리3 (Flexbox) (0) | 2021.07.11 |
| [CSS] CSS 정리 2 (display, position) (0) | 2021.07.11 |
| [CSS] CSS 정리1 (0) | 2021.07.11 |