rem
기존 em
body태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받음
<body>
<div>
Test <!-- 14 * 1.2 = 16.8px -->
<div>
Test <!-- 16.8 * 1.2 = 20.16px -->
<div>
Test <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>
body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
</code>
rem
rem('root'em)을 사용하면 세 div의 폰트 사이즈가 같아짐
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
vh와 vw
CSS의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받음
vh 요소는 높이 값의 1/100 단위 (ex. 브라우저 높이 값이 900px 일때, 1vh는 9px)
ex. 전체 높이의 50%
<div id="map" class="map" style="width:100%; height:50vh;">
vmin과 vmax
vmin과 vmax는 너비값과 높이값에 따라 최대, 최소값을 지정할 수 있음
.box {
height: 100vmin;
width: 100vmin;
}
.box {
height: 100vmax;
width: 100vmax;
}
ex와 ch
폰트의 특정 수치에 기반
ch 단위, 또는 글꼴 단위는 제로 문자인 0의 너비값의 "고급 척도"로 정의됩니다. 흥미로운 의견은 에릭 마이어의 블로그에서 확인할 수 있습니다. 그러나 기본 컨셉은 monospace 폰트의 N 의 너비값을 부여 받았다는 것이며, width: 40ch;는 40개의 문자열을 포함하고 있다는 뜻입니다. 이 특정 규칙은 점자 레이아웃에 기반하고 있지만, 이 기술의 가능성은 간단한 어플리케이션 그 이상으로 확장할 수 있습니다.
ex 단위의 정의는 "현재 폰트의 x-높이값 또는 em의 절반 값"이라고 할 수 있습니다. x-높이값은 소문자 x의 높이값이기도 합니다. 폰트의 중간 지점을 알아내기 위해 자주 사용하는 방법입니다.
이 단위는 타이포그래픽에서 세밀한 조정을 할 때 많이 사용합니다. 예를 들어, 위첨자 태그인 sup 에게 position을 relative로 하고 bottom 값을 1ex라고 하면 위로 올릴 수 있습니다. 아래첨자 역시 비슷한 방법으로 아래로 내릴 수 있습니다. 브라우저는 위첨자와 아래첨자의 기본값을 vertical-align으로 정의하고 있지만, 보다 정교한 사용법을 알고 싶다면 아래와 같이 작성할 수 있습니다.
sup {
position: relative;
bottom: 1ex;
}
sub {
position: relative;
bottom: -1ex;
}
https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573
'FrontEnd > HTML & CSS' 카테고리의 다른 글
| img 태그 공백 없애기 (0) | 2021.05.06 |
|---|---|
| HTML 시멘틱 태그 사용이유 (0) | 2019.09.23 |
| HTML script 태그의 위치 (0) | 2019.03.26 |
| [HTTP] GET과 POST의 차이 (0) | 2019.01.13 |
| CSS Text 오버플로우 (0) | 2019.01.13 |