난 이제까지 크기나 길이를 지정할 때, px(픽셀)을 많이 사용해왔다. 하지만 px는 고정된 단위이기 때문에 반응형 웹 페이지를 구현할 때는 권장하지 않는 방법이다.
그렇다면 요소의 길이, 폰트 크기 등을 화면에 따라 유동적이게 변하게 해주는 단위에는 어떤 것들이 있을까?🧐
1. %
%는 부모의 영향을 받는 단위이다. 부모의 길이를 기준으로 %한 값이 바로 자식 요소의 길이가 되는 것이다.
만약 body의 너비와 높이를 1400px, 300px라고 정했다면 자식 요소인 wrapper의 너비와 높이를 50%, 20%한 값은 700px, 60px가 되고, wrapper의 자식 요소인 container의 너비와 높이는 350px, 3px가 되는 것이다.
2. em과 rem
em과 rem은 둘 다 font-size의 영향을 받는 단위이다.
하지만 em은 각 부모의 폰트 크기를 기준으로, rem은 root em으로 최상위 부모의 폰트 크기를 기준으로 잡고 계산한다는 점에서 약간의 차이가 있다.
1em=부모의 폰트 크기1rem=최상위 부모의 폰트 크기=<html> 폰트 크기
폰트의 기본 크기는 16px이기 때문에 부모의 폰트 크기를 따로 정해주지 않았다면
1em = 16px이다.
em을 적용한 wrapper와 container의 너비와 높이는 다음과 같다.
wrapper width = 20em = 20 * 16= 320px
wrapper height = 10em = 10 * 16= 160px
container width = 15em = 15 * 16= 240px
container height = 5em = 5 * 16= 80px
rem을 적용한 wrapper2와 container2의 너비와 높이는 정수 * html에서 정의한 font-size의 값 으로 계산할 수 있다.
wrapper2 width = 20rem = 20 * 20= 400px
wrapper2 height = 10rem = 10 * 20= 200px
container2 width = 15rem = 15 * 20= 300px
container2 height = 5rem = 5 * 20= 100px
3. vw와 vh
v(viewport)란?
뷰포트는 무엇일까? view '보다'라는 단어로 어렴풋이 알 것 같다.
viewport란 단어의 의미대로 사용자가 보는 화면을 의미한다. 즉, 보여지는 영역이라는 말이다!
그럼 vw와 vh는? 보여지는 화면을 기준값으로 너비와 높이를 결정한다.
1vw = 뷰포트 너비에서 1%에 해당되는 단위
1vh = 뷰포트 높이에서 1%에 해당되는 단위
만약 뷰포트의 너비와 높이가 1100px, 700px이라면
1vw = 1100 * 0.01 = 11px
1vh = 700 * 0.01 = 7px
이렇게 계산할 수 있다.
언제 사용할까?
vw, vh는 viewport 영역 전체를 차지하거나 일부분만 차지하게 할 수 있다.
예를 들어, 메인 페이지에 꽉 찬 헤드라인을 만들고 싶다고 한다면 vw, vh를 사용하여 쉽게 만들 수 있다.
4. vmin과 vmax
이것들도 v가 들어가니 보여지는 영역을 기준으로 할 것이다.
그럼 vw, vh와 뭐가 다를까? 한 마디로 말하자면 작은 것 기준! 큰 것 기준!
vmin = 작은 것 기준!
vmax = 큰 것 기준!
vmin은 너비와 높이 중 작은 것을, vmax는 너비와 높이 중 큰 것을 값으로 한다.
만약 viewport 너비와 높이가 1400px, 500px라면
1vw = 14px = 1vmax1vh = 5px = 1vmin
1400 * 500인 뷰포트의 크기가 600 * 800으로 바뀌었다면 vmin, vmax의 크기도 그에 맞게 바뀐다.
1vw = 6px = 1vmin1vh = 8px = 1vmax
container의 font-size를 vmax로 설정하였기 때문에 화면의 크기가 달라질때마다 폰트 크기가 유동적으로 변하여 잘리지 않고 보여진다.
어떨 때 사용할까?
vmin, vmax를 사용하여 '언제나 화면에 보이는 요소', '언제든 화면을 꽉 채우는 요소'를 만들 수 있다.
vw는 너비에만 반응하고 높이에는 반응하지 않고, 반대로 vh는 높이에만 반응하고 너비에는 반응하지 않는다. 하지만 vmin, vmax를 사용하면 둘 중에 더 작은 값이나 큰 값을 사용하기 때문에 브라우저의 크기가 바뀌어도 내용이 잘려보이지 않는다.
