CSS에서 VH, VW 와 %에 대한 이해

 

오늘은 CSS에서,

상대적인 사이즈를 계산하도록 도와주는,

VH, VW와 %에 대해서 정리해 보겠습니다.

 

1. VH

VH는 Viewport Height 에 대한 약자입니다.

현재 브라우저 창의 높이를 기준으로 하는 상대적인 단위인데요.
1vh는 뷰포트 높이의 1%를 의미합니다.
100vh라고 하면 뷰포트의 전체 높이와 같습니다.

 

예를 들어 아래와 같은 html이 있다고 가정해 보겠습니다.

 

<div class="full-height">전체 높이</div>
<div class="half-height">절반 높이</div>

 

 

css를 아래와 같이 해주면 쉽게 전체 높이 또는 절반 높이에 대해서 그리는 것이 가능합니다.

 

.full-height {
    height: 100vh;
    background-color: #f0f0f0;
}

.half-height {
    height: 50vh;
    background-color: #d0d0d0;
}

 

 

2. VW

VW는 Viewport Width의 줄임말로,

뷰포트의 너비를 기준으로 하는 단위가 됩니다.
마찬가지로, 1vw는 뷰포트 너비의 1%가 되고,

100vw는 뷰포트 너비 전체가 됩니다.

 

아래와 같이css를 작성해주면, 전체 넓이를 그릴 수 있게 됩니다.

 

.full-width {
    width: 100vw;
}

 

 

3. %(Percentage)

한가지 더 알아둘 것은 %단위인데요.

이것도 상대적으로 사이즈를 잡을 수 있는데,

VH나 VW가 현재 브라우저 창의 사이즈를 기준으로 잡아준다면,

%단위는 항상 직계 부모를 기준으로 하는 단위가 됩니다.

 

.parent {
    height: 300px;
}
.child {
    height: 50%; /* 부모의 절반 높이 */
}

 

 

4. 반응형 css설정에 사용하기

위에서 배운 개념들을 이용해서,

반응형 css를 설정할 수 있는데요.

 

아래와 같이,

full-screen-header를 절대적인 값이 아닌,

브라우저 사이즈를 기준으로 해서 잡을 수 있습니다.

 

폰트 사이즈도, 반응형으로 설정해 주었는데요.

h1의 경우, 브라우저의 가로넓이의 2%를 2rem에 추가해서 반영되도록 하였습니다.

body에서 적용하는 전체 폰트사이즈도 14px기준으로 전체 브라우저 너비의 0.5%만큼을 추가하였습니다.

 

.full-screen-header {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('header-bg.jpg');
    background-size: cover;
    color: white;
    text-align: center;
}

.full-screen-header h1 {
    font-size: calc(2rem + 2vw);
}

/* 예제 4: 반응형 폰트 크기 */
body {
    font-size: calc(14px + 0.5vw);
}