font, padding, margin 등 모든 종류에서 px라는 고정 단위로 값을 통제할 경우 반응형으로 크기 조절이 되지 않는다.
사용자가 어떤 글씨 크기를 원하든 " 응 ~ 난 무조건 24px 할 거야~ 무조건 옆으로 길게 뻗을 거야~ " 이런 식으로 막 나간다 이 말이다.
물론 우리가 신이고 웹 이용자가 창조물 같은 관계라면 우리 마음대로 정해놓고 알아서 쓰라고 해도 되겠지만, 웹 개발자와 사용자는 생산자와 소비자 관계이기 때문에 최대한 소비자 편의에 맞춰 사용할 수 있게 해주어야 한다.
그래서 되도록 px나 pt같은 절대값(absolute)이 아닌 상대값(relative)을 사용하는 것이 좋다.
| 주로 사용되는 상대값 | |
| % (percent) | 부모 요소 width값의 n% |
| vw(view width) | 현재 열려있는 브라우저 width값의 n% |
| vh(view height) | 현재 열려있는 브라우저 height값의 n% |
| em | 부모의 px값 * n rem |
| rem | 해당 웹의 default px값 * n rem |
| vmin, vmax | 해당 창의 너비와 높이중 값이 낮은 곳, 혹은 높은 곳의 n% |
위의 이미지로 앞서 배운 상대값을 모두 이해할 수 있다.
먼저 %와 vw, vm의 차이부터 알아보자.
body {
margin: 0;
width: 50%;
height: 50vh;
background-color: black;
}
.box {
width: 100vw;
background-color: blanchedalmond;
height: 100%;
}
HTML은 굳이 안 봐도 빤하니 CSS만 보도록 하자.
첫 번째로 body의 width는 50%로 설정되어 있고 box의 width는 100vw로 설정되어 있다.
부모인 body의 width가 50% 임에도 불구하고 box의 백그라운드 컬러인 발체달몬드가 너비를 가득 채우고 있는 것을 볼 수 있다.
vw와 vh는 이와 같이 부모의 크기를 무시하고 무조건 사용자의 화면에서 지정된 만큼의 크기를 차지한다.
두 번째로 body의 height는 50vh, height는 100%로 설정되어 있다.
높이가 100%로 설정되어 있으니 발체달몬드 컬러로 높이가 가득 채워져야 하지만 부모의 크기인 50vh를 넘지 못한다.
이렇게 보면 %와 vh의 차이가 명확하게 이해될 것이다.
다음은 em과 rem의 차이이다.
<body>
<div class="box">
<div class="em_textbox">
나는 em2 사이즈다
<div class="rem_textbox">
나는 rem2 사이즈다
<div class="rem_texbox2">
나는 rem2 사이즈다
<div class="em_textbox2">
나는 em2 사이즈다
</div>
</div>
</div>
</div>
</div>.rem_textbox {
font-size: 2rem;
}
.rem_texbox2 {
font-size: 2rem;
}
.em_textbox {
font-size: 2em;
}
.em_textbox2 {
font-size: 2em;
}
rem과 em 모두 2em, 2rem으로 같은 값을 받았음에도 2rem 둘은 크기가 같고 2em 둘은 크기가 다르다.
rem은 부모와 관계 없이 웹의 기본 폰트 값을 기준으로 계산하지만 (아무런 설정도 하지 않았을 시 기본 값은 16pt이다.) em은 부모의 폰트 값을 기준으로 곱하게 된다.
즉 위의 2rem은 모두 16pt x 2 = 32pt의 크기를 가지지만 첫 em은 16 x 2 = 32pt, 마지막 em은 32 x 2 = 64pt의 폰트 크기를 가지게 된다.
아니.. 이러면 em은 대체 언제 써요? 부모 값이 바뀔 때마다 계속해서 수치가 변하면 그걸 어떻게 써요?
사실 거의 안 쓴다고 한다. 폰트 주변의 텍스트 박스 등 글자 크기와 연동하여 조절 가능해서 요긴하게 사용 가능하다고는 하는데.. 보기만 해도 머리 아파서 나는 별로 시도해보고 싶지 않다..
본론만 간단하게 적었지만 다시 한번 요약.
1. %는 부모의 값을 넘지 못한다.
2. vh, vw는 부모의 값을 무시하고 무조건 창을 지정한 값만큼 차지한다.
3. em은 부모의 크기를 곱해서 계산하고 rem은 기본값을 곱해서 계산한다.
4. 그냥 rem 쓰자.
5. 살면서 발체달몬드라는 색은 처음 들어본다.
끝
'Language & Framework > HTML CSS' 카테고리의 다른 글
| 구시대의 유물? float과 inline-block 활용하여 레이아웃 구성하기 (1) | 2022.01.29 |
|---|---|
| 시맨틱 태그(Semantic Tag)는 왜 필요하고 어떻게 사용할까? 핵심만 간단하게. (0) | 2022.01.05 |
| Flexbox Froggy 정답 및 풀이 복습 (0) | 2021.12.26 |
| CSS 기초 정리 및 복습 (0) | 2021.12.25 |
| CSS diner 정답 및 풀이 복습 (0) | 2021.12.24 |
