css 작성시 vh 혹은 vw와 %의 차이가 무엇인지 궁금했다.
일단 많이 쓰이는 단위의 종류에 대해서 살펴보고 위의 질문에 답해보도록 하자.
px
픽셀. fhd해상도에서 1920x1080의 픽셀이 있는데 그 각각의 점을 의미한다. qhd의 경우 2560x1440이다. 모니터의 해상도에 따라 달라질 수 있다. 예를 들어 27인치의 같은 크기의 모니터라도 A는 FHD, B는 QHD일 경우, 100px에 해당하는 길이는 양쪽의 모니터에서 각각 다르게 나타날 것이다. 따라서 대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식한다고 한다.
%
px과 달리 상대적인 단위이다. 요소에 지정된 크기(상속된 크기나 기본값)에 상대적인 크기를 설정한다.
em
em은 배수단위로 상대적인 단위이다. 요소에 지정된 크기(상속된 크기나 기본값)에 상대적인 크기를 설정한다. 1em은 원래 사이즈와 같고 2em은 그 크기의 2배가 된다.(원래 8px로 지정되어 있었다면 2em 시 16px)
rem
em은 상속의 영향으로 값이 바뀔 수 있다. rem은 최상위 요소(html)를 기준으로 크기를 정한다. rem의 r은 root를 의미한다.
마찬가지로 배수단위이다.
vh, vw
view port 높이, view port 넓이다. 현재 보이는 화면의 전체 넓이/높이의 1/100을 의미한다. 즉 50vh는 현재 보이는 화면 높이의 절반인 셈이다.
vmin, vmax
vmin은 높이, 넓이 중 값이 작은 쪽의 1/100
vmax는 높이, 넓이 중 값이 큰 쪽의 1/100이다.
예를 들어 현재 viewport가 높이 500px, 넓이 1000px일 때,
1vmin은 작은 쪽인 500px의 1%인 5px,
1vmax는 큰 쪽인 1000px의 1%인 10px이다.
vh, vw와 %의 차이
물론 둘은 다른 단위이지만 아래 문제를 해결하던 중 사소하지만 중요한 차이를 알게 되었다.
body에 배경화면을 설정하고 크기를 화면 전체로 하려 width를 100vw로 설정했었다.
<body style=width:100vw>
</body>처음엔 문제 없이 잘 설정되었지만, 조금 뒤 화면에 내용이 채워지자 어느 순간 위아래 스크롤바 뿐만 아니라 가로 스크롤바가 생겼다.
넓이를 화면의 100%로 설정했는데 왜 가로 스크롤이 생기는 것인가..?
결론은 아래처럼 단위를 %로 바꾸면 해결된다.
<body style=width:100%>
</body>그 이유는 vh, vw는 말그대로 화면 전체의 상대길이이기 때문에 상하 스크롤바가 없을 때는 %와 화면상 같지만, 상하 스크롤바가 생기면 그것까지 포함한 길이를 가져오기 때문에 100vw로 설정한다면 상하 스크롤바의 가로길이 만큼이 추가되는 것이다.
반면에 %는 해당 요소의 부모의 길이에 영향을 받기 때문에 가로 스크롤바가 사라지게 된다.
