컨텐츠간 여백 : vw와 vh

컨텐츠간 여백 : vw, vh

vw와 vh는 CSS에서 뷰포트(viewport)를 기준으로 하는 상대적인 길이 단위이다.

뷰포트는 웹 페이지가 표시되는 브라우저 창의 보이는 영역을 의미한다.

 

vw (Viewport Width)

• vw는 뷰포트 너비의 1%에 해당하는 단위입니다.
• 예를 들어, 뷰포트 너비가 1000px이라면 1vw는 10px입니다.
• vw는 주로 가로 방향의 여백, 간격, 요소의 너비 등을 설정할 때 사용됩니다.
• 화면 너비에 따라 요소의 크기가 유동적으로 변해야 하는 반응형 디자인에 유용합니다.

vh (Viewport Height)

• vh는 뷰포트 높이의 1%에 해당하는 단위입니다.
• 예를 들어, 뷰포트 높이가 800px이라면 1vh는 8px입니다.
• vh는 주로 세로 방향의 여백, 간격, 요소의 높이 등을 설정할 때 사용됩니다.
• 전체 화면을 꽉 채우는 요소나 세로 방향으로 스크롤되는 콘텐츠의 높이를 설정할 때 유용합니다.

---

예를 들어서 플렉스 박스 내에 있는 요소들은 웹 브라우저의 가로 폭이 좁아지면 자동으로 너비가 줄어든다.

그렇다

<가로1>

<가로2>

<가로3>

형태일때 <가로>간의 여백은 vw와 vh 중 무엇으로 줘야할까?

답은 vw이다. 

 

만약에 vh로 여백을 주게 된다면 브라우저 가로폭을 줄일 시에 상대적으로 vh의 높이가 vw의 너비보다 커지게 된다.

그럴 경우 기존 최대화 화면에서 볼때보다 컨텐츠 사이 세로 여백이 넓어지게 되고 이는 화면 구성의 이상을 가져온다.