목차
1. px 단위
2. rem 단위
3. em 단위
4. % 단위
1. px
상위 요소에 상관없이 어떤 절대적인 값으로 결정됨.
✅ pixel(픽셀)이란?
화면 해상도를 나타내는 단위로, 화소라고도 한다.
pixel 값이 클수록 화면을 더 조밀하게 구성할 수 있다.
2. rem
<html> 태그에서 설정한 font-size 속성값을 기준으로 값이 결정된다.
html {
font-size: 16px;
}
.box1 {
font-size: 1rem; // 16px
}
.box2 {
font-size: 1.5rem; // 24px
}
.box3 {
font-size: 2rem; // 32px
}<div class="box1">
font-size: 1rem;
</div>
<div class="box2">
font-size: 1.5rem;
</div>
<div class="box3">
font-size: 2rem;
</div>
실행 결과
3. em
rem과 달리 본인 요소의 font-size 크기를 기준으로 값이 결정된다.
✅ 따로 본인 요소에 font-size를 지정하지 않은 경우, font-size가 설정된 가장 가까운 부모 요소의 값을 기준으로 한다.
.box {
font-size: 16px;
}
.box1 {
padding: 1rem; // 16px
}
.box2 {
padding: 1.5rem; // 24px
}
.box3 {
padding: 2rem; // 32px
}<div class="box box1">
padding: 1em;
</div>
<div class="box box2">
padding: 1.5em;
</div>
<div class="box box3">
padding: 2em;
</div>
실행 결과
4. %
가장 가까운 부모 요소를 기준으로 값이 결정되며, 백분율로 설정한다.
어떤 속성에 %를 설정하느냐에 따라 2가지 경우로 나뉜다.
(1) font-size
부모 요소의 font-size 크기를 기준으로 값이 결정된다.
.parent {
font-size: 16px;
}
.box1 {
font-size: 100%; // 16px
}
.box2 {
font-size: 150%; // 24px
}
.box3 {
font-size: 100%; // 32px
}<div class="parent">
<div class="box1">
font-size: 100%;
</div>
<div class="box2">
font-size: 150%;
</div>
<div class="box3">
font-size: 200%;
</div>
</div>
실행 결과
(2) width나 padding, margin 등
부모 요소의 width 크기를 기준으로 값이 결정된다.
✅ 주의할 점은 padding-top, padding-bottom과 같은 상하 속성도 부모 요소의 height가 아닌 width로 결정된다.
.parent {
width: 860px;
}
.box1 {
width: 20%; // 172px
}
.box2 {
width: 40%; // 344px
}
.box3 {
width: 60%; // 516px
}<div class="parent">
<div class="box1">
width: 20%;
</div>
<div class="box2">
width: 40%;
</div>
<div class="box3">
width: 60%;
</div>
</div>
실행 결과
'Front-end' 카테고리의 다른 글
| node & npm 완전 삭제하기 (0) | 2023.08.05 |
|---|---|
| [Node.js] npm run dev, npm run build, npm run start 차이 (0) | 2023.06.22 |
| [CSS] focus 가상 클래스 | :focus, :focus-within, :focus-visible (0) | 2023.04.18 |
| html width와 window.innerWidth(웹 브라우저 너비) 차이 발생하는 이유 (0) | 2023.04.13 |
| [HTML, CSS, JS] 언어별 주석 달기 (0) | 2021.01.12 |