CSS 단위

CSS 단위

웹에 대한 성장 및 변화에 따른 여러 가지 단위들이 점점 등장하고 있습니다.
이번 시간에는 그에 맞는 여러 가지에 CSS 단위를 알아보겠습니다.

---

rem

rem은 em과는 다르며 부모요소에 html를 100%로 두고 그 아래 요소들에게 폰트 사이지를 정하는 것이다.
html의 기본 값은 16px인며 rem은 해당 값에 정해둔 만큼 곱하면 된다.

    // 예시
    .parent {
	    font-size: 2rem;	// 16px * 2 = 32px
    }

vw / vh

vw / vh 두 단위의 v는 viewport의 약자이며, 웹에서 보이는 부분에만 값을 준 것이다.
vw는 viewport의 width이며, vh는 viewport height이다.

만약 화면 너비의 높이와 길이를 100vw, 100vh로 잡고 보고 50vw설정을
주면 화면 너비의 50%이며, 1vh는 화면 전체 높이의 1%이다.

vmin & vmax

vmin은 화면에서 너비와 높이 중 짧은 길이를 기준으로 상대 길이를 설정할 수 있으며,
10vmin인데 높이가 너비보다 짧다면, 높이의 10% 길이를 뜻한다.

vmax는 화면에서 너비와 높이 중 긴 길이를 기준으로 상대 길이를 설정할 수 있으며,
10vmax인데 높이가 너비보다 길다면, 높이의 10% 길이를 뜻한다.

ex / ch

em / ch는 폰트의 특정 수치에 기반하는 단위이며,
ch는 글꼴 단위는 제로 문자인 0의 너비값의 "고급 척도"로써 정의되며,
ex는 현재 폰트의 x-높이값 또는 em의 절반 값을 구하는 단위이다.

    // 예시
    ex {
        bottom: 1ex;
    }

---

절대 / 상대 단위

CSS 단위에는 절대 단위와 상대 단위가 있으며, 각각 상황에 다르게 쓴다.

절대 단위 : 고정된 값을 출력하며 절대 크기가 변하지 않는다.

cm (센테미터)	mm (미리미터)	in (인치)
px (픽셀)	pt (포인트)	pc (파이카)

상대 단위 : 부요 요소와 다른 요소의 크기에 영향을 받기에 상대적으로 크기가 변한다.

em	부요 요소의 크기를 영향받는다.
rem	최상위 요소인 html요소 크기에 영향을 받아 크기가 변한다
%	부요 요소의 크기를 영향받는다.
vw	viewport width 약자 / 50vh = "뷰포트 영역의 50%"
vh	viewport height의 약자 / 50vh = "뷰포트 영역의 50%"
vmin	뷰포트의 최소값이며, 설정한 viewport에 따라 값이 변한다.
vmax	뷰포트의 최대값이며, 설정한 viewport에 따라 값이 변한다.