css 크기 단위 px, em, rem 의 차이점

css 크기 단위 

 

css의 크기 단위는 웹 페이지를 만들때 많이 사용하는 것들입니다. 대표적으로는 폰트의 크기를 결정하는 속성인 font-size 에서 특히 많이 사용합니다. 그 외에 버튼을 만들때 버튼 크기를 나타낼때도 사용가능하죠. 크기를 결정하는 단위이기 때문에 폭 넓게 사용 가능합니다. 

 

이번 포스팅에선 css 크기를 나타내는 단위인 px, em, rem에 대해서 알아보고자 합니다. 

 

css 크기 단위

px

 

px는 상위요소에 영향을 받지 않는 고정적인 크기를 나타낼때 사용합니다. 어느 환경에서라도 해상도에 맞는 크기가 되죠. 웹페이지 디자인을 할때 많이 사용하는 단위입니다. 

 

em

 

em은 "부모요소"에서 지정한 크기를 기준으로 배율을 조정합니다. 예를들어 부모요소에 font-size가 16px이었다고 하고 (font-size 기준 html 기본 크기가 16px입니다. ) 그 아래 div 요소의 font-size 가 2em 이라 할때 이 단위의 px 크기는 16px의 2배가 되는 32px로 나타납니다. 

 

부모요소가 16px의 크기를 가질 때 자식요소의 크기 2em은 32px이 됩니다.

 

글자크기를 유동적으로 변경해야 하는 작업을 할 때 많이 사용합니다. (rem과 같이)

 

rem 

 

rem은 root em 이란 뜻으로 html 문서의 기본인 html의 요소 크기를 기준으로 배율을 조정합니다. 그 외에는 em이랑 같은 효과를 갖습니다. 

 

마치며

 

css 크기 단위 는 위에 3가지가 가장 많이 사용됩니다. 그 외에도 많이 있지만 거의 사용하지 않는걸로 알고 있습니다. 저도 웹페이지 작업 시 위 3개 단위를 제외하고 다른걸 써본적 없었고요. 또 앞으로도 다른 단위는 사용할 일이 없다고 생각합니다. 

 

크기를 나타내는 단위 3가지에 대해서 알아보았습니다. ~