[TIL] css 단위

TIL

0youn 2021. 7. 8. 12:38

평소에 px 단위와 vw, vh를 많이 사용했는데 반응형에 관심을 두고 나서는 em, rem도 중요하다는 생각이 들어

나중에 찾아보지 말고 적어두고 봐야겠다는 생각에 정리를 해보려 한다.

1. px

px은 모니터마다 고정 값으로 정해진다. css에서는 absolute length라고 분류된다.

고정값이기 때문에 어디에 어떻게 쓰든 같은 크기를 가지면 화면에 같게 표시된다.

2. em

em은 이 단위가 적용된 엘리먼트의 글자 크기에 비례한다.

1em은 100%를 뜻하며 만약 엘리먼트에 font-size가 20px이라면 3em은 60px을 가리킨다.

보통 em은 사용되는 위치마다 값이 천차만별로 달라지기에 특별한 경우 외에는 사용되지 않는다.

3. rem

문서의 최상단 html의 글자 크기를 참조한다.

다른 모든 태그의 글자 크기는 참조하지 않는다는 특징을 가진다.

즉 어디에서 어떻게 rem을 쓰든 결과 값은 동일하다는 것이다.

4. vh

브라우저의 높이에 비례한다. 100vh = 100% 즉 1vh는 높이 값의 1%를 가리킨다.

즉 브라우저의 크기에 따라 실시간으로 반영된다는 특징을 가진다.

고로 절대적으로 크기가 고정되야 하는 요소에는 사용하면 안된다. 화면에 크기에 따라 확대/축소가 되어 엘리먼트의 정렬이 깨질 수 있기 때문!

5. vw

vh와 반대로 브라우저의 너비 값에 비례한다.

6. vmin / vmax

높이 값과 너비값의 최대와 최소값을 가리킨다.

높이가 600 너비가 900인 경우 1vmin은 6px 1vmax는 9px이 된다.

7. ex / ch

폰트와 폰트 사이즈에 의존한다는 점에서 em과 rem과 비슷하지만 다른점은 두 단위는 폰트의 특정 수치에 기반한다는 점이다.

width : 20ch라고 한다면 40개의 문자열을 포함하고 있다는 뜻

ex단위는 현재 폰트의 x-높이값 또는 em의 절반 값이라고 한다.

자주 사용하는 단위 말고는 잘 사용하지 않았는데 정리하고 보니깐 써먹을데가 많을 것 같다.

차후에 프로젝트 할 때는 잘 버무려서 이쁘게 만들어야쥐

참고