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