css 사이즈 태그 em, rem, vh, vw, vmin, vmax 완벽 정리

css 작성할 때 종종 em rem까지는 작성할 때도 있긴 한데, 보통은 귀찮아서 반응형일 때는 %에 의존하고 그 외에는 그냥 대부분 px처리 해버리곤 한다..

 

하지만 폰트나 블록 영역 크기를 조절할 때 사용하는 요 요소들을 적절히 사용해주면 보다 간단하면서도 깔끔한 코딩이 완성되므로, 숙지할 필요가 있다.

 

꼭 암기해서 다음 플젝 때는 요 요소들을 활용해 보자! (는 의미에서 작성한 포스팅..)

 

 

1. em : 부모 사이즈에서 곱한 사이즈

<div>

    <p></p>

<div>

 

div {font-size: 14px}

p {font-size: 1.2em}

 

일 경우, p의 사이즈는 14*1.2 = 16.8px 이 된다.

 

 

2. rem: 부모가 아닌 최상위 태그에서 곱한 사이즈

em을 사용하다보면 점점 사이즈가 커져버려서 제어가 힘든 상황이 온다. 이럴땐 rem을 쓴다. rem은 부모 사이즈에 상관없이 무조건 최상위 태그 사이즈에서 값을 곱한다.

 

3. vw (vertical width) : 브라우저 너비값의 100분의 1단위

브라우저 너비값이 1000px일때 1vw는 10px이다.

 

4. vh (vertical height) : 브라우저 높이값의 100분의 1단위

브라우저 높이값이 1000px일때 1vh는 10px이다.

 

100분의 1이라고해서 %랑 혼동할 수 있는데, %는 부모요소에 의해 기준 단위가 변경하는데 반해 vw와 vh는 기준이 무조건 브라우저 사이즈다.

이것은 em과 rem의 차이와 같다.

 

 

5. vmin과 vmax

이들은 vh또는 vw값에 최대값 최소값을 정해주는 것인데,

너비값-높이값에서 둘 중 더 작은 값을 vmin, 더 큰 값을 vmax이라 한다.

하늘색 블록을 브라우저라고 하면, vmin의 최소값 영역과 vmax 최대값 영역을 구분해봤다.

브라우저가 만약 vmin vmax 영역 안으로 들어가게 되면 vh vw와 같이 작동한다 (값만큼 줄어든다).

 

즉, 말하자면 vmin vmax는 vh 혹은 vw와 같은데 대신 값을 적용할 최소값(vmin)과 최대값(vmax) 기준을 정한 것이라 할 수 있다. (결국 앞에서 한 설명과 똑같은 말이 반복 해버렸..)

 

 

em, rem, vw, vh 모두 ie9 이상부터 지원 가능하다. vmax, xmin는 ie (엣지에서도 안됨) 에서 지원하지 않는다.