[CSS] 폰트 사이즈 단위에 대하여 간단정리(em,vw,vh,px,rem)

css 작성할때, px 가급적 사용하지 마세요 라는 말을 언뜻 들은적이 있습니다.

px단위가 너무 익숙했던 저는 처음엔 그냥 무슨소리지.. 생각하고있었는데

반응형 홈페이지 디자인을 건드리려니 이제야 그 말이 이해가 되네요.

그렇게 '알아야겠구나' 싶은 폰 트종류들을 나중에 또 까먹을테니ㅎㅎ 간단히 정리해보았습니다.

 

em 

부모 태그에 적용되어있는 폰트사이즈에 상대적인 영향을 받는다.

때문에 안정적이고 반응형 디자인에 적합하다. (가장 많이 사용하는듯)

 

vw, vh

뷰포인트의 크기를 vh 기준으로  결정하는 단위이다.

 

여기서 viewpoint란, 웹페이지에서 보일 수 있는 영역을 말하는데, 페이지가 표시되는 실체 창크기랑 다를수는 있다. 

vw, vh를 사용할때에는 창크기가 아닌 뷰포트 크기를 기준으로 크기가 결정된다.

50vw : 뷰포트 너비의 50% 

100vh : 뷰포트 전체 높이

그래서 full -screen 꽉찬 페이지, fill -width 요소를 만드는데에 적합하다.

px 

고정형 사이즈 단위이다. 절대단위라고 할 수 있다.

때문에 반응형 웹디자인에는 추천하지 않는다.

 

rem

em과 비슷하지만, 부모 요소 대신에 html 태그의 폰트사이즈에 상대적이라 할 수 있다. 

보통 타이포그래피에 관련된 것을 만들때 유용할수 있다고 한다.

 

 

 

 

css를 적용하는 목적에 따라 적절히 유지하면서 사용하는게 제일 좋다고 합니다.

말이 쉽지만..허허 🙄😓

 

---

출처 : gpt