Study/Html-Css

CSS의 길이단위 rem, em, px, pt, %, vw, vh, vmin, vmax

2019. 8. 21. 12:53
728x90

CSS에서 잘알려진 단위로는 px, pt, em 정도일 것입니다. 간혹 rem도 사용하고 있지만 이번에 소개할 단위는 다소 생소할수 있지만 많은 실무자들은 알고 있고 사용도 하고 있는 부분입니다.

저 같이 웹초보자들이 다소 실수 할 수도 있는 단위를 정리해 볼려고 합니다. 저 또한 이 글을 적으면서 많은 단위가 있다는 것을 알게 되었습니다.

CSS길이 The Lengths of CSS

# 절대 단위 (pt, px)

UnitDescription
cm센티미터
mm밀리미터
in인치 (1in = 96px = 2.54cm)
px픽셀 (1px = 1/96th of 1in)
pt포인트 (1pt = 1/72 of 1in)
pc파이카 (1pc = 12 pt)
1in = 96px | 1cm = 37.8px | 1mm = 3.78px | 1pt = 1/72in |1pc = 12pt


# 상대 단위 (em, rem, %)


# Viewport 단위 (vh, vw, vmin, vmax)

Viewport 란 전체 웹페이지 가운데 브라우저 창에 보이는 영역을 말한다.
창 크기를 조절해서 뷰포트를 크거나 작게 만들 수 있다.

요약하자면

  • VW(Viewport Width) : 뷰포트 너비의 1% 길이와 동일합니다.
  • VH(Viewport Height) : 뷰포트 높이의 1% 길이와 동일합니다.
  • VMIN(Viewport Minimum) : 뷰포트 너비 또는 높이를 기준으로 하는 최소 값입니다.
  • VMAX(Viewport Maximum) : 뷰포트 너비 또는 높이를 기준으로 하는 최대 값입니다.


아쉽게도 IE 9-11 에서 vmax는 제대로 지원하지 못합니다.
Edge 브라우저에서 온전하게 vmax를 지원합니다. 확인할려면 이쪽으로
IE 5.5 이상 제대로 뷰포트 단위를 지원하게 하려면 폴리필 vminpoly를 사용할 수 있습니다.


Leave a reply

Nickname Password

Comment

포스팅되는 모든 글은 게시자의 주관적인 관점이 포함되어 있으며, 절대적인 것은 아닙니다. 포스팅 글을 참조 후 발생되는 모든 책임은 본인에게 있음을 알려드립니다.