vh, vw, %

vh, vw

열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환

vmax, vmin

vmax : viewport길이 중 더 긴 길이 기준
vmin : 더 짧은 길이 기준

%

% 는 창이 중심이 아닌, %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환
또한, 그냥 전체 화면의 %를 쓴다 하더라도 스크롤 바를 포함하지 않은 현재 화면 길이만을 반환

em

부모 엘리먼트의 폰트 사이즈를 기준으로 한 단위

.parent {
    font-size: 20px;

}

.child {
    font-size: 2em;
}

.child를 2em 속성값을 지정했으므로, 부모 엘리먼트 폰트 사이즈 기준으로 40px이다.

rem

최상위 엘리먼트의 폰트 사이즈를 기준으로 한 단위

html {
    font-size: 50px;
}

.parent {
    font-size: 20px;

}

.child {
    font-size: 2rem;
}

.child를 2rem 속성값을 지정했으므로, 최상위 엘리먼트(html) 폰트 사이즈 기준으로 100px

rem 과 em 둘 중 누가 더 접근성에 선호되는가?

rem이 접근성이 편리.

em의 경우 부모 엘리먼트를 기준으로 상대적인 크기가 변경.

rem은 최상위 엘리먼트 기준으로 상대적인 크기가 변경되므로 광범위한 특징이 있어 접근성이 편리