상대 단위
상대 단위란 px처럼 고정되지 않고 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다.
상대 단위의 종류에는 em, rem, vh ,vw 등이 대표적인 css의 상대 단위이다.
이전에 블로그 웹 클론코딩할때 이 상대 단위를 사용하지 않고 절대 단위를 사용해서 웹페이지의 크기가 달라지면 내가 처음에 만들었던 모양이 다 깨졌던 경험이 있다. 그래서 3가지 화면 기준을 잡고 화면 크기마다 각각 다르게 px로 설정해줬던 기억이 있다.
한 페이지를 만드는데 3가지 다른 화면을 만들어야해서 완전 하드 코딩했었다.
그 당시 em, rem, vw, vh라는 단위가 있다는건 알았지만 뭔가 어렵게 느껴져서 사용할 엄두도 못 냈었다. (공부를 안 했으면서 핑계는..)
그래서 이번에는 상대단위에 대한 개념을 잡고 가기 위해 정리해보려고 한다.
em
em은 font-size 속성 값에 비례해서 결정되는 단위이다.
font-size를 따로 설정해주지 않으면 기본적으로 html에 16px이 font-size로 할당이 된다
div {
font-size: 1em;
}이 경우 div의 부모 요소에 font-size가 설정되어 있지 않아 1em은 16px이 된다
- 1em = 16px * 1 = 16px
만약 font-size가 2em과 0.5em 일 경우도 살펴보자
- 2em = 16px * 2 = 32px
- 0.5em = 16px * 0.5 - 8px
<style>
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em;
}
</style>
<div class="parent">
<div class="child">Child</div>
</div>여기서 child의 font-size는 1.5em이기 때문에 상위 부모 요소인 parent의 폰트 사이즈 20px의 1.5배가 된다
font-size를 10px로 설정할 경우도 살펴보자
- 0.5em = 10px * 0.5 = 5px
- 1em = 10px * 1 = 10px
- 2em = 10px * 2 = 20px
예시와 같이 em단위는 font-size 값에 비례해서 값이 결정된다.
rem
rem의 'r'은 root를 의미한다. rem은 루트(최상위 요소 = html 요소)에 지정된 사이즈에 따라서 크기가 결정된다.
em은 부모요소의 font-size를 기준으로 비례해서 값을 정했다면,
rem은 최상위 요소의 font-size를 기준으로 값을 정한다.
HTML에서 최상위 요소는 <html>이다.
html도 font-size가 따로 값이 정해지지 않았으면 기본값인 16px이다.
html {
font-size: 16px;
}
div {
font-size: 1.5rem;
}최상위 요소인 html의 font-size가 16px이므로 div의 font-size는 24px이다.
- 1.5 rem = 16px * 1.5 = 24px
rem도 em과 마찬가지로 값이 비례한다는 건 똑같지만, 어떤 값을 기준으로 비례하는지가 달라서 상황에 맞게 쓰면 된다.
폰트 사이즈를 결정할 때는 em단위보다는 rem단위를 쓰는 것을 더 권장한다고 한다.
em의 경우 부모 요소를 기준으로 계산되기 때문에 요소가 많아지면 실제 폰트 크기를 알기 어려워지지만 rem은 최상위 html의 폰트 사이즈를 기준으로 계산되어서 실제 폰트 크기를 쉽게 알 수 있기 때문이다.
그리고 em 단위를 사용할 경우 재사용이 어렵고 유지보수가 힘들어지는 경향도 있다고 한다.
vw
vw(viewport width)는 브라우저 창 너비 값의 100분의 1단 위이다. 1vw = 뷰포트 너비의 1%
- 예를 들어 브라우저 창의 너비가 1000px이면 1vw는 10px이 된다.
vh
vh(viewport height)는 브라우저 창 높이값의 100분의 1단 위이다. 1vh = 뷰포트 높이의 1%
- 예를 들어 브라우저 창의 높이가 100px이면 1vh는 1px이 된다.
반응형 웹을 만들 때 vw, vh를 사용하면 유연하게 크기 조정이 되어 반응형 웹 만들때 유용하다.
이렇게 공부하고 정리하니 이전에 어렵다고 생각해서 겁부터 먹고 공부 안 한 내가 한심하게 느껴진다..
웹 페이지 화면 3가지 경우에 따라 px로 화면을 만들 시간에 상대 단위에 대해서 공부하고 제대로 웹페이지를 만들었다면 반응형 웹을 만들 수 있지 않았을까??
다음 주 과제는 의미 있는 마크업과 반응형 웹페이지를 만드는 것을 목표로 한 주를 달려보자
'성장이야기 > TIL' 카테고리의 다른 글
| 220726 웹 페이지야 반응해줘.. (0) | 2022.07.26 |
|---|---|
| 220725 TIL 무지성 100문제 풀기 (0) | 2022.07.25 |
| 220723 TIL 또 대충 할거야? (0) | 2022.07.23 |
| 220722 TIL 아직 끝나지 않았다 (0) | 2022.07.22 |
| 220721 TIL 할 수 있다면 할 수 있다. - 피카소 (0) | 2022.07.21 |