1. px
px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다.
픽셀은 디바이스 해상도(resolution)에 따라 상대적인 크기를 갖는다.
이와 같이 디바이스 별로 픽셀(화소)의 크기는 제각각이기 때문에 픽셀을 기준으로 하는 단위는 명확하지 않다.
2. %
%는 백분률 단위의 상대 단위이다.
요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다.
<style>
body {
font-size: 14px;
}
div {
font-size: 120%; /* 14px * 1.2 = 16.8px */
}
</style>3. em
em은 배수 단위로 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. 예를 들어 1em은 요소에 지정된 사이즈와 같고 2em은 요소에 지정된 사이즈의 2배이다.
<style>
body {
font-size: 14px;
}
div {
padding: 2em; /* 16.8px * 2 = 33.6px */
}
</style>
🚫 중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 주의하여야 한다. 마찬가지로 중첩된 자식요소에 %를 사용하면 주의해야한다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 14px;
}
div {
font-size: 1.2em; /* 14px * 1.2 = 16.8px */
}
</style>
</head>
<body>
<div class='box1'>
Font size: 1.2em ⇒ 14px * 1.2 = 16.8px
<div class='box2'>
Font size: 1.2em ⇒ 16.8px * 1.2 = 20.16px
<div class='box3'>
Font size: 1.2em ⇒ 20.16px * 1.2 = 24.192px
</div>
</div>
</div>
</body>
</html>4.rem
em의 기준은 상속의 영향으로 바뀔 수 있다. 즉, 상황에 따라 1.2em은 각기 다른 값을 가질 수 있다.
rem은 최상위 요소(html)의 사이즈를 기준으로 삼는다. rem의 r은 root를 의미한다.
<style>
html {
font-size: 14px;
/* font-size 미지정 시에는 16px */
}
div {
font-size: 1.2rem; /* html font-size: 14px * 1.2 = 16.8px */
}
</style>em, rem을 사용하면 미디어쿼리를 통해 반응형을 손쉽게 만들 수 있다. 👍👍
- em의 예시
.title { font-size: 40px; }
.title__image { width: 10em; } //40px
.title__text { font-size: 0.4em; } //16px
@media all and (max-width: 750px) {
.title { font-size: 20px ; } // 이제 .title 아래에 있는 모든 em 단위가 영향을 받습니다.
}- rem의 예시
html { font-size: 62.5%; }
.image { width: 12rem; } //120px
.item { font-size: 1.6rem; } //16px
.copyright { margin-top: 5rem; } //50px
@media all and (max-width: 750px) {
html { font-size: 50%; } // 이제 문서 내 모든 rem 단위가 영향을 받습니다.
}브라우저가 지정해주는 기본 폰트 사이즈는 100% = 16px이고,
이걸 계산하기 쉽게 62.5% = 10px로 바꿔서 사용하면 좋다.
그런데 왜 10px를 사용하지 않고 62.5%를 사용하는 것일까? 🤔
사용자가 설정을 바꾸지 않았을 때 브라우저의 기본 폰트 사이즈는 16px이지만
사용자가 폰트 기본 사이즈를 Large로 바꾸든 Small로 바꾸든 그에 대응할 수 있도록 %로 지정해두는것이다.
5. Viewport 단위(vh, vw, vmin, vmax)
반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다. 하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다. 🥲
Viewport 단위는 상대적인 단위로 viewport를 기준으로 한 상대적 사이즈를 의미한다.
Viewport가 뭘까..? 🤔
Viewport란 브라우저에서 사용자에게 보이는 부분이다!!
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0px; }
.item {
width: 50vw;
height: 100vh;
text-align: center;
line-height: 100vh;
font-size: 4rem;
color: white;
}
.item1 { background-color: red; }
</style>
</head>
<body>
<div class='item item1'>item1</div>
</body>
</html>result
여기서 파란색이 브라우저에서 사용자에게 보이는 부분인 viewport이다. width가 50vw이기 때문에 width의 50%만큼 빨간색으로 채워진것을 볼 수 있다.
result
.png)
이렇게 반응형으로 줄였을 때도 마찬가지로 사용자에게 보여지는 width의 50%만큼 빨간색으로 보여준다!!
- vw : viewport 너비의 1/100
- vh : viewport 높이의 1/100
- vmin : viewport 너비 또는 높이 중 작은 쪽의 1/100
- vmax : viewport 너비 또는 높이 중 큰 쪽의 1/100
vmin은 vw와 vh 중 더 작은 것을 적용하고, vmax는 vw와 vh 중 더 큰 것을 적용한다.
예를 들어 1200px*600px의 뷰포트가 있다고 하자, 계산하면 1vw = 12px / 1vh = 6px이 된다.
따라서 1vmin = 1vh = 6px으로 계산되고, vmax는 더 큰 걸 적용할 테니, 1vmax = 1vw = 12px이 된다.
그러면 왜 vmin, vmax를 사용하는 것일까? 🤔
예를 들어 80vw * 80vw로 지정한 요소가 있다고 치면, 브라우저의 높이를 줄여보면 vw는 너비에만 반응할뿐 높이에 반응하지않기 때문에 요소가 잘려보일 수 있다. vmin은 둘 중 더 작은 값을 택하기 때문에, 작아진 높이값에 반응해서 잘리지 않고 화면에 표시된다. 즉, 너비/높이값 중 무엇이 바뀌던 상관없이 화면에 잘 나타낼 수 있다.
reference
