CSS의 em, rem, vh, vw, %의 단위를 알아보자

반응형을 위한 단위의 활용

CSS에서 가장 기본이 되는 크기 단위가 픽셀(px)인데요.

1px은 0.00264cm로 환산되는 길이로, 300px은 약 8cm가 됩니다.

16px은 0.42cm인데요. 이 16px이 바로 CSS에서 기본값입니다.

font-size : 16px은 세로 길이가 16px(0.423cm)인 폰트 사이즈라는 의미로, 출판물에서 기본적으로 사용되는 사이즈입니다.

그럼 이 기본 사이즈 16px을 기반으로 em, rem에 대해 알아보겠습니다.

em

em은 기준 크기에 대한 배수를 의미합니다.

기준은 font-size이며 같은 요소의 사이즈에서 시작해 부모로 차근차근 올라갑니다.

예를 들어 같은 요소에 font-size:16px이 설정된 경우 em의 기준은 16px이 됩니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.child-size{
font-size : 16px;
width : 2em; // 2 * 16px = 32px;
}
.child-size{ font-size : 16px; width : 2em; // 2 * 16px = 32px; }
.child-size{
    font-size : 16px;
    width : 2em;   // 2 * 16px = 32px;
}

위 코드에서 child-size 내부에 font-size가 있으므로 해당 요소의 width : 2em는 16의 2배인 32px이 됩니다.

만약 다음과 같이 같이 child-size 내부에 font-size가 정의되어 있지 않으면 해당 요소를 감싸고 있는 부모 클래스에서 기준 사이즈를 가져오게 됩니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.parent-size{
font-size : 20px;
}
.child-size{
width : 2em; // 2 * 20px = 40px;
}
.parent-size{ font-size : 20px; } .child-size{ width : 2em; // 2 * 20px = 40px; }
.parent-size{
    font-size : 20px;
}
.child-size{
    width : 2em;   // 2 * 20px = 40px;
}

최상단까지 이동해도 font-size가 없는 경우에는 위에서 말한 기본값인 16px을 기준으로 지정합니다.

rem

rem은 em과 비슷하지만 r은 root를 의미합니다.

따라서 최상단인 html에 정의된 값을 기준으로 사용합니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
html{
font-size : 20px;
}
.child-size{
font-size : 16px;
width : 2rem; // 2 * 20px = 40px;
}
html{ font-size : 20px; } .child-size{ font-size : 16px; width : 2rem; // 2 * 20px = 40px; }
html{
    font-size : 20px;
}
.child-size{
    font-size : 16px;
    width : 2rem;   // 2 * 20px = 40px;
}

최상단의 크기를 기준하므로 20px이 기준이 되어 2rem은 40px로 계산됩니다.

vw

Viewport Width는 스크롤을 포함한 윈도우의 너비를 의미하며, 반응형을 위해 상대적 크기를 사용할 수 있습니다.

1vw는 뷰포트 너비의 1%에 해당하는 값으로 너비가 1000px인 경우 1vw는 10px, 100vw는 1000px이 됩니다.

브라우저의 사이즈 변경이나 모바일 등에서 전체 비율을 맞추고 싶을 때 효과적으로 사용할 수 있으며, 화면을 가로로 가득 채우고 싶을 때 100vw를 사용할 수 있습니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.layout{
width : 100vw;
}
.layout{ width : 100vw; }
.layout{
    width : 100vw;
}

vh

Viewport Height는 윈도우의 높이를 의미하며 vw와 마찬가지로 뷰포트 높이의 1%를 의미합니다.

화면을 가득 채우고 싶을 때는 다음과 같이 너비와 높이를 지정하면 됩니다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.layout{
width : 100vw;
height: 100vh;
}
.layout{ width : 100vw; height: 100vh; }
.layout{
    width : 100vw;
    height: 100vh;
}

%

%는 부모 요소에 따라 크기가 결정됩니다.

높이를 100%로 설정하는 경우는 부모의 높이의 100%를 설정하게 됩니다.

따라서 부모의 높이가 100px인 경우 자식 요소에서 height : 100%를 설정하면 높이는 50가 됩니다.

width : 100%인 경우 스크롤바의 너비를 생략한 크기를 나타냅니다.

font-size : 100%의 경우 부모 요소의 사이즈를 기준으로 사용하게 되므로 기본값은 16px이 됩니다.