CSS 단위 em, rem, vh vw, %, px 정리

 

 

이미지 출처 : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

 

폰트 및 컨테이너 크기를 지정할 때 사용하는 단위는 여러 가지가 있는데,

정적인 부분은 px, 동적인 부분은 %, viewport(vh, vw), em, rem이 존재한다

 

px

모니터 위에서 화면을 나타내는 가장 작은 단위이며 반응형으로 사용하기는 힘들어서 정적인 웹페이지에 사용한다.

컨테이너 사이즈 변경되어도 콘텐츠의 크기는 변경 없이 그대로 고정되어 있기 때문이다

또한 픽셀로 폰트 크기를 변경하는 경우, 브라우저에서 폰트 크기를 변경해도 아무런 반응을 하지 않음 (아예 고정되어있음)

이는 웹 접근성이 떨어진다고 볼 수 있다.

em

같은 폰트사이즈라 하여도, 사용하는 폰트 패밀리에 따라 사용자에게 보이는 크기가 달라질 수 있는데

em은 폰트패밀리에 상관없이 항상 고정된 폰트 사이즈를 갖고 있다

em은 부모의 폰트 사이즈에 상대적으로 폰트 사이즈가 정해진다

 

브라우저에서 html에 할당되는 폰트 사이즈는 16px이다

그래서 부모 요소에 8em을 적용하면, 16*8 = 128px 이 되고, 그 밑의 자식 요소에 0.5em을 주면 부모가 128px이라

128*0.5 = 64px이 된다

 

즉 em은 부모의 폰트 사이즈를 곱한 값이다

 

근데 em은 부모의 영향을 계속 받아서

만약 조금 복잡한 컴포넌트라면 즉각적으로 폰트 사이즈 계산하기 힘들고 복잡할 수 있음

rem

부모에 따라 크기가 결정되는 것이 아닌, 루트에 따라 결정된다

그래서 자식 요소에 0.5em을 주면, 루트 html이 16px이므로 16*0.5 = 8px의 폰트 사이즈를 갖는다

 

또한 앞서 말했던 em과 rem은 반응형을 지원하여 브라우저 환경에서 폰트사이즈를 변경하면 적용이 된다

%

부모 요소에 상대적으로 계산되어 em과 같음

vw, vh

부모요소에 상관없이 브라우저를 기준으로 변경이 된다

50vh은 브라우저의 반을 차지하는 높이이다.

원하는 용도에 맞게 사용하기

부모 요소에 반응하는 건 %, em

부모 요소와 상관없이 브라우저에 반응하는 건 viewport(vh, vw), rem

 

요소의 너비나 높이에 따라 사이즈 변경되야하면 %, viewport

폰트 사이즈에 따라 변경되야하면 em, rem

rem과 em의 차이점

rem은 페이지의 어떤 부분에서 사용하던지 크기가 일정함

반대로 em 사용하면 상위에서, 그리고 부모 요소에서 사용했을 때 크기가 달라짐

 

즉,

나의 컴포넌트가 어디서 사용하든 크기가 일정했으면 좋겠다! -> rem

나의 컴포넌트가 어디에 사용되느냐에 따라 크기가 변경되었으면 좋겠다! -> em

em 또는 rem을 사용할 경우,

padding 속성도 같이 em, rem 으로 설정하면 더욱 반응형으로 가능하다

브라우저에서 폰트 사이즈를 변경할 때 em, rem 이 적용된 폰트 사이즈는 변경하지만

만약 padding속성을 px로 지정할 경우 폰트 사이즈에 상관없이 고정된 padding값을 갖고 있기 때문에

어색해질 수 있음

em, rem으로 padding값 지정할 때,

em으로만 padding 지정하면 기존 콘텐츠의 0.5배 (현재 폰트 사이즈의 절반이 패딩으로 들어감)

폰트 사이즈 변경되면 반응적으로 패딩 값도 변경이 된다

하지만 em으로 할 경우 위아래는 괜찮은데 타이틀과 콘텐츠의 패딩 양 옆이 일정한 패딩 값이 주어지지 않아서

(타이틀과 콘텐츠, 두 개의 폰트 사이즈가 다른데 em은 부모 요소에 상대적으로 크기가 변경되어서 각 크기가 다름)

수직적인 정렬이 되지 않는다. 이럴 땐  좌, 우는 rem으로 주어서 현재 폰트 사이즈 상관없이 좌 우 padding 값을 고정한다

 

 

 

Ref.

https://www.youtube.com/watch?v=7Z3t1OWOpHo 

https://www.youtube.com/watch?v=xWMKz9NCD0k