크기를 지정하는 방법에는 여러가지가 있다. 절대단위으로 지정하는 경우에는 크기가 계속 동일하기 때문에 반응형 웹에 대응하기가 어렵다. 이런 경우 사용되는 상대단위에 대해 적어보고자 한다.
절대단위
- cm
- mm
- px
상대단위
- em
폰트크기를 위한 상대적 값으로 부모요소의 폰트크기를 기준으로 설정한다. 예로 2em은 부모요소의 폰트크기의 2배라는 뜻이다. - rem
폰트크기를 위한 상대적 값으로 <html>을 기준으로 폰트크기를 설정한다. - vw
브라우저 화면 너비를 기준으로 width를 지정한다. 1vw은 뷰포트 너비의 100분의 1을 의미한다. 최종 크기는 100vw이다. - vh
브라우저 화면 높이를 기준으로 height를 지정한다. 1vh는 뷰포트 높이의 100분의 1을 의미한다. 최종 크기는 100vH이다. - vmin
브라우저 너비와 높이 중에 작은 값을 기준으로 지정한다. 예로 10vmin은 너비와 높이 중 작은 값의 10%라는 뜻이다. - vmax
브라우저 너비와 높이 중에 큰 값을 기준으로 지정한다. - %
부모요소를 기준으로 상대적인 기준을 설정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container>div{
background-color: lightcoral;
border: 1px solid black;
width: 350px;
height: 100px;
margin: 10px;
}
.container>div:nth-of-type(1) {
width: 12vw;
}
.container>div:nth-of-type(2) {
width: 12%;
}
.container>div:nth-of-type(3){
height: 5vh;
}
.container>div:nth-of-type(4){
height: 5vmin;
}
.container>div:nth-of-type(5){
height: 5vmax;
}
.font-size {
font-size: 20pt;
}
.font-size>p:nth-of-type(1) {
font-size: 2em;
}
.font-size>p:nth-of-type(2) {
font-size: 2rem;
}
</style>
</head>
<body>
<div class="container">
<div>vw</div>
<div>%</div>
<div>vh</div>
<div>vmin</div>
<div>vmax</div>
</div>
<div class="font-size">
<p>em</p>
<p>rem</p>
</div>
</body>
</html>
vw와 %의 경우 12vw, 12%로 설정했는데 크기가 미묘하게 다른 것을 알 수 있다. vw의 경우 뷰포트 기준이고, %의 경우 부모요소를 기준으로 설정했기 때문에 차이가 있다.
vmin과 vmax를 둘 다 각각 5vmin, 5vmax로 설정했는데 크기가 다른 것을 알 수 있다. 브라우저의 너비가 높이보다 컸고, vmin의 경우 브라우저의 높이를 기준으로 그리고 vmax의 경우 브라우저의 너비의 기준으로 설정되었다.
em과 rem도 2em, 2rem으로 설정했는데 크기가 다른 이유는, 부모요소의 폰트를 20pt로 설정했기때문이다. em의 경우 부모요소의 폰트를 기준으로 2배를 하기 때문에 html을 기준으로 하는 rem보다 큰 폰트크기가 출력된다.
'Frontend > CSS' 카테고리의 다른 글
| CSS에서 수직 위치를 정해보자(z-index) (0) | 2024.07.13 |
|---|---|
| CSS의 flex를 함께 공부해보자 - 2. flex-items (0) | 2024.07.10 |
| CSS의 flex를 함께 공부해보자 - 1. flex-container (0) | 2024.07.10 |
| CSS의 반응형 웹을 위한 미디어쿼리(Media Query) 사용법 (0) | 2024.07.10 |
| CSS: backface-visibility에 대해 알아보자 (0) | 2024.07.10 |
| CSS3로 동적 변화를 만들어보자 - 3. Animation (0) | 2024.07.08 |
| CSS3로 동적 변화를 만들어보자 - 2. Transition (0) | 2024.07.08 |
| CSS3로 동적 변화를 만들어보자 - 1. Transform (0) | 2024.07.08 |