많이는 봤지만 정확히는 몰랐던 차이
CSS를 작성하다 보면 다양한 넓이 단위와 높이 단위를 마주하게 된다. 자주 쓰이지만 사실 정확한 의미보다는 대략적으로만 알고 넘어갔던게 많다고 생각했다. 오늘 한번 정리를 해보자. 일단 CSS에서 길이 단위는 2가지 종류로 나뉜다.
절대 길이 단위
절대 길이 단위는 다른 요소들의 크기와 상관없이 항상 동일한 값으로 간주된다. (ex. px, pt, cm, mm 등) 예를들어 10px이라는 값을 입력한다고 했을때 10px은 주변의 어떠한 요소와도 상관없이 고정된 값을 가진다. 절대 길이 단위는 예로 든 단위 외에도 단위가 더 있지만 실질적으로는 px, pt 정도만 사용된다. 사실 절대 길이 단위는 그냥 10px 찍으면 10px짜리 무언가가 되기 때문에 어떻게 보면 너무나 당연한 개념이다. 사실 우리가 정확히 의미를 잘 모르고 쓰는 단위는 상대 길이 단위일 확률이 높다.
상대 길이 단위
- em 과 rem
em과 rem은 글꼴의 크기를 나타낼때 사용하는 단위이다. 대충 알기로는 상위요소의 글꼴 크기에 비례해서 크기가 변한다 정도만 알고 있었는데 이는 em에만 해당하는 말이고 rem은 아니다.(다르니까 이름이 다르겠지..) 앞서 말한대로 em은 상위요소의 글꼴크기에 비례한다.
<style>
html {
font-size: 16px;
}
body {
font-size: 2em;
}
.message {
font-size: 2em;
}
</style>
<body>
<p class="message">Hello World</p>
</body>위의 예시를 보자. 만약 html의 font-size가 16px이고 body의 font-size가 2em이라면 body의 상위요소는 html이기 때문에 html font-size의 2배인 32px이 된다. 그렇다면 message 클래스를 가진 p 태그속의 font-size는 어떻게 될까? 아까 em은 상위요소의 font-size에 비례한다고 했으므로 message의 상위 클래스는 body니까 2em의 2em이 된다. body는 16px의 2배인 32px이었으니 이를 다시 2배로 하면 message속 font-size는 64px이 된다. 이렇듯 em은 상위요소의 font-size에 비례한다.(왠지 잘못 사용하면 글자가 점점 커지는 상황이 생길 수 도 있을거 같다.)
반면 rem은 상위요소가 아닌 rem(root em) 뿌리가 되는 요소의 크기에 비례한다.
<style>
html {
font-size: 16px;
}
body {
font-size: 2rem;
}
.message {
font-size: 2rem;
}
</style>
<body>
<p class="message">Hello World</p>
</body>위의 예시를 보자. 아까와 똑같은 예시이지만 단위만 rem으로 바꿨다. 만약 html의 font-size가 16px이고 body의 font-size가 2rem이라면 body의 뿌리 요소는 html이기 때문에 html font-size의 2배인 32px이 된다. 그렇다면 message 클래스를 가진 p 태그속의 font-size는 어떻게 될까? 아까 rem은 최상위 요소, 즉 뿌리 요소의 font-size에 비례한다고 했으므로 message의 최상위 클래스는 html이고 2rem 이므로 message도 body와 똑같은 32px이된다.
뭔가 대충보기만 해도 rem이 더 일관성 있어보인다. 상위요소에 비례하는 em은 자칫 잘못하면 중첩을 타고 계속 잘못된 css 값이 출력될 우려가 있어 보인다. 물론 상황마다 다르겠지만
- vw 와 vh
vw와 vh는 (vertical height, vertical width)의 약자이다. 만약 반응형 웹을 만든다고 했을때 보통 요소의 크기를 %로 설정하는 경우가 많았을 것이다. 하지만 %만으로는 한계가 있다. 이때 vw와 vh가 쓰인다. vw와 vh는 뷰포트 크기(주로 브라우저창의 크기)의 100분의 1에 해당하는 단위이다. 예를 들어 브라우저 창의 높이가 500px일때 1vh는 5px이다. 마찬가지로 브라우저 창의 넓이가 500px이라면 1vw는 5px이다. 앞서 말했다시피 주로 반응형 웹을 만들때 사용하는데, 예를들어 브라우저 넓이에 꽉차는 사이즈의 메시지를 출력하고 싶을때 원하는 태그의 스타일에 vw를 100으로 설정해주면 브라우져의 넓이에 따라서 글자의 크기가 바뀌는것을 눈으로 확인 할 수 있다.
참고자료 : https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units
참고자료 : https://webclub.tistory.com/356
