1. px
* CSS 에서 사용되는 가장 기본적인 단위
* 브라우저의 값이 변경되어도 항상 고정값인 절대값
💬 예시
.box {
width: 300px;
}2. em
* 부모로 부터 상속된 폰트 크기 값에 따라 바뀌는 상대값
* 부모의 폰트 크기가 지정되어 있지 않으면 1em = 16px 로 인식된다. (why? 브라우저의 기본값이 16px이기 때문)
💬 예시
<div class="parent">
<p class="child"></p>
</div>.parent {
font-size: 20px; /* 1em = 20px */
}
.child {
font-size: 2em; /* 2 * 20px = 40px */
}3. rem
* root요소(최상위 요소)의 폰트 크기 값에 따라 바뀌는 상대값
💬 예시
<body>
<div class="parent">
<p class="child"></p>
</div>
</body>body {
font-size: 16px;
}
.parent {
font-size: 10px;
width: 200px;
height: 100px;
background-color: red;
}
.child {
width: 10rem; /* 1rem = 16px → 10 * 16px = 160px */
height: 20em; /* 1em = 10px → 10 * 10px = 100px */
background-color: blue;
}❓ em / rem 둘 다 상대값이기 때문에 반응형 작업을 할 때 많이 사용된다.
4. vw (viewport width) / vh (viewport height)
* 브라우저의 가로, 세로 크기 값에 따라 바뀌는 상대값
💬 예시
<div class="parent">
<p class="child"></p>
</div>.parent {
width: 100vw;
height: 50vw;
background-color: pink;
}
.child {
width: 50vw;
height: 10vh;
background-color: skyblue;
}✏️ 결과
5. %
* 부모 크기의 값에 따라 바뀌는 상대값
💬 예시
<div class="parent">
<p class="child"></p>
</div>.parent {
width: 200px;
height: 200px;
background-color: orange;
}
.child {
width: 50%; /* 200px의 50% = 100px */
height: 100%; /* 200px의 100% = 200px */
background-color: brown;
}✏️ 결과
'CSS' 카테고리의 다른 글
| [CSS] CSS 기본 (0) | 2024.05.04 |
|---|---|
| [CSS] CSS의 reset (0) | 2024.05.02 |
