CSS 단위 px pt em rem % 란 무엇이며 차이점은?

 

---

▒ CSS 단위 px pt em rem % 란 무엇이며 차이점은?

CSS에서 사용하는 단위는 font-size, text-indent, line-height, width, height, padding 등 크기를 나타내는 값에 쓰인다.

크게는 절대 크기가 변하지 않는 절대 단위와 상황에 따라 크기가 변하는 상대 단위로 나뉜다.

 

 

 

 

■ 절대단위

 

고정된 값을 출력하며 절대 크기가 변하지 않는다.

이 방법은 크기가 가변적인 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하기 위해서는 매우 복잡하다는 단점이 있다. 

※ px (픽셀) 값을 주로 사용한다.

 

cm (센티미터)	mm (미리미터)	in (인치)
px (픽셀)	pt (포인트)	pc (파이카)

 

 

 

■ 상대 단위

 

부모 요소나 다른 요소의 크기에 영향을 받아 상대적으로 크기가 변한다.

반응형 웹사이트를 작업할 때 주로 사용한다.

※ em, rem, % 값을  주로 사용한다.

 

em	부모 요소의 크기의 영향을 받아 크기가 변함
rem	최상위 요소인 html요소의 크기의 영향을 받아 크기가 변함 (익스 9.0이상 부터 지원)
%	부모 요소의 크기의 영향을 받아 크기가 변함
vw	viewport width의 약자 / 80vw="뷰포트 영역의 80%" (익스 9.0이상 부터 지원)
vh	viewport height의 약자 / 80vh="뷰포트 영역의 80%" (익스 9.0이상 부터 지원)
vmin	뷰포트의 최소값 / 설정한 viewport값에 따라 변함 (익스 12.0이상 부터 지원)
vmax	뷰포트의 최대값 / 설정한 viewport값에 따라 변함 (익스 12.0이상 부터 지원)

 

em은 부모 크기에 영향을 받기 때문에 파악하기 쉽지 않을 수 있으며 미디어 쿼리 작성 시 여러 요소를 수정해야만 한다.

그러나 rem은 최상위 요소인 html의 요소의 영향을 받기 때문에 미디어쿼리 작성 시 이 요소의 크기 하나만 변경하면 나머지는 자동으로 변한다.

그래서 반응형 웹사이트를 제작할 때 rem을 주로 사용한다.

 

html {font-size:62.5%}로 설정하면
16px=1.6rem
18px=1.8rem
이런 식으로 사용하기 편하다.

* 픽셀/em/퍼센트/포인트를 계산해 주는 사이트 http://pxtoem.com

* rem을 계산해 주는 사이트 https://offroadcode.com/rem-calculator

 

---

예제파일↓

css_unit_Ex.html

0.00MB