반응형을 위한 단위의 활용
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이 됩니다.
.child-size{
font-size : 16px;
width : 2em; // 2 * 16px = 32px;
}
위 코드에서 child-size 내부에 font-size가 있으므로 해당 요소의 width : 2em는 16의 2배인 32px이 됩니다.
만약 다음과 같이 같이 child-size 내부에 font-size가 정의되어 있지 않으면 해당 요소를 감싸고 있는 부모 클래스에서 기준 사이즈를 가져오게 됩니다.
.parent-size{
font-size : 20px;
}
.child-size{
width : 2em; // 2 * 20px = 40px;
}
최상단까지 이동해도 font-size가 없는 경우에는 위에서 말한 기본값인 16px을 기준으로 지정합니다.
rem
rem은 em과 비슷하지만 r은 root를 의미합니다.
따라서 최상단인 html에 정의된 값을 기준으로 사용합니다.
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를 사용할 수 있습니다.
.layout{
width : 100vw;
}
vh
Viewport Height는 윈도우의 높이를 의미하며 vw와 마찬가지로 뷰포트 높이의 1%를 의미합니다.
화면을 가득 채우고 싶을 때는 다음과 같이 너비와 높이를 지정하면 됩니다.
.layout{
width : 100vw;
height: 100vh;
}
%
%는 부모 요소에 따라 크기가 결정됩니다.
높이를 100%로 설정하는 경우는 부모의 높이의 100%를 설정하게 됩니다.
따라서 부모의 높이가 100px인 경우 자식 요소에서 height : 100%를 설정하면 높이는 50가 됩니다.
width : 100%인 경우 스크롤바의 너비를 생략한 크기를 나타냅니다.
font-size : 100%의 경우 부모 요소의 사이즈를 기준으로 사용하게 되므로 기본값은 16px이 됩니다.