[CSS] %와 vh/vw 차이

내가 원하는 스타일을 화면 전체 페이지에 주고 싶을때 마음대로 되지 않아서 애를 먹었던 적이 많았다.

그냥 무작정 height: 100% 주거나 비슷하게 px 또는 rem으로 크기를 맞춰서 하곤 했는데,

여러 디바이스를 비교하면서 하면 이상해 보이는걸 알았지만 일단 내가 보이는 화면에만 안 보이게 처리하려고 그랬나보다.

 

별거 아닐 수 도 있지만 기본이라고 생각하는 화면 크기 값 조정.

기록해 놔야지.

 

📌 %

창이 중심이 아닌 부모 요소의 길이에 맞게 반환한다. 그래서 최상단에서 사용한다면 문제는 없지만 밑의 컴포넌트로 파고 들어갈수록 원하는 결과 값을 얻기 힘들어진다.

 

📌 vh와 vw

vh(viewport height): 화면 기준으로 높이를 뜻한다.

vw(viewport width): 화면 기준으로 넓이를 뜻한다.

 

현재 실행된 디스플레이 스크린에 맞춰 상대적인 크기를 반환하여 보여준다. 뷰포트(Viewport, 화면크기)를 기준으로 높이와 너비에 비례하기 때문에 반응형 웹을 구성하는데 유용한 단위이다.

 

📌 %와 vh/vw의 차이

 1️⃣ vw는 height에서도 사용이 가능하다.

height: 100%와 height: 100vw는 엄연히 다른 뜻이다. 마찬가지로 vh도 width에서 사용이 가능하다.

 

2️⃣ vw와 vh는 열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이 기준으로 계산된다.

반면에 %는 창의 중심이 아닌 %르 쓰고 있는 요소의 부모 요소의 길이를 기준으로 계산되어 반환된다.

또한 그냥 전체 화면의 %를 쓴다고 하더라도 스크롤바를 포함하지 않은 현재 화면 길이를 기준으로 계산된다는 차이점이 있다.

 

📌 vmin과 vmax

viewport의 길이 중 더 짧은 길이를 기준으로 삼는 것은 vmin, 더 긴 길이를 기준으로 삼으면 vmax이다.