vw, vh
각자 Viewport width, Viewport Height의 약자이며 브라우저 화면의 크기의 비율을 의미합니다.
높이와 너비 각자 꽉 차는 화면의 크기는 100을 의미합니다.
<div style="background-color: yellow; width: 80vw; height: 80vh;">
<div style="background-color: green; width: 60vw; height: 60vh"></div>
</div>
%
상위 엘리멘트에 대한 퍼센트를 나타내는 단위입니다.
높이는 최상단에서 기준이 없이 퍼센트로만 나타낼 시 적용이 안 돼 기준을 잡고 시작해야 합니다.
<body style="background-color: orange; height: 100vh">
<div style="background-color: yellow; width: 80%; height: 80%">
<div style="background-color: green; width: 60%; height: 60%"></div>
</div>
</body>
em, rem
em은 현재 엘리멘트의 폰트 사이즈를 결정하는 단위이며 그 기준이 상위 엘리먼트가 기준이 됩니다.
이 의미는 상위 엘리멘트의 폰트 사이즈가 현재 엘리멘트의 1em이 되는 것입니다.
rem은 이 기준이 최상단(root)이 되는 단위입니다.
<div style="font-size: 16px">
16px
<div style="font-size: 2em">
16px(1em) => 32px(2em)
<div style="font-size: 2em">32px(1em) => 64px(2em)</div>
</div>
</div>
<div style="font-size: 16px">
16px
<div style="font-size: 2rem">
16px(1em) => 32px(2rem)
<div style="font-size: 2rem">16px(1em) => 32px(2rem)</div>
</div>
</div>
다음과 같이 em, rem 모두 세 단계의 엘리멘트를 만들고 같이 2를 부여했지만 em은 상위 엘리멘트가 기준이기에 2배씩 증가하고 rem은 그저 최상단 컴포넌트의 2배만 적용됩니다.
하지만 위 예시는 그럴듯하게 적용된 척하는 예시입니다.
사실 rem의 기본값이 16px이고 이게 알맞게 적용된 것처럼 보이지만 최상단에서 적용시키지 않는다면 하위 엘리멘트들은 그 폰트 사이즈에 반응하지 않습니다.
따라서 아래와 같이 html에서 폰트 사이즈를 정해야 합니다.
html {
font-size: 12px;
}
div {
font-size: 2rem;
}'HTML&CSS' 카테고리의 다른 글
| Mixins (5) | 2023.05.26 |
|---|---|
| SCSS(Sass) (5) | 2023.05.16 |
