CSS 에서 사용하는 길이 단위

안녕하세요. 루루개발자 입니다.

이번 시간에는 css 에서 사용하는 길이 단위 종류에 대해서 알아보도록 하겠습니다.

 

절대 길이 (Absolute Lengths)

크기가 고정되어 있으며 정확히 그 크기로 표시됩니다. 요즘 여러 디바이스가 존재하면서 화면 크기가 매우 다양하기 때문에 절대 길이 단위는 사용하지 않는 것이 좋습니다.

• cm : centimeters 단위 고정 길이로 표시합니다.
• mm : millimeters 단위 고정 길이로 표시합니다.
• in : inches (1in = 96px = 2.54cm) 단위 고정 길이로 표시합니다.
• px : pixels (1px = 1/96th of 1in) 단위 고정 길이로 표시합니다.
• pt : points (1pt = 1/72 of 1in) 단위 고정 길이로 표시합니다.
• pc : picas (1pc = 12pt) 단위 고정 길이로 표시합니다.

 

상대 길이 (Relative Lengths)

상대 길이 단위는 다른 길이 속성에 상대적인 길이를 지정합니다. 

• em : 해당 요소에 설정된 폰트 크기에 상대적으로 비례하는 길이로 표시됩니다.
  (만약, div 태그에 font-size 가 30px 로 설정되어 있고 div 태그 밑의 span 태그에 font-size 를 0.5em 으로 지정하였다면 span 태그의 폰트 크기는 30px * 0.5 = 15px 의 크기로 표시됩니다.)
• ex : 해당 요소에 설정된 폰트 크기의 높이에 상대적으로 비례하는 길이로 표시됩니다.
  (테스트해본 결과 1.85ex 의 크기로 지정하면 해당 요소에 설정된 폰트 크기와 동일하게 표시됩니다. 현재는 거의 사용되지 않는 단위입니다.)
• ch : 해당 요소에 설정된 폰트의 숫자 "0" 의 너비에 상대적으로 비례하는 길이로 표시됩니다.
  (테스트해본 결과 1.6ch 의 크기로 지정하면 해당 요소에 설정된 폰트 크기와 동일하게 표시됩니다.)
• rem : 최상위 요소에 설정된 폰트 크기의 상대적으로 비례하는 길이로 표시됩니다.
  (최상위 요소에 설정된 폰트 크기가 16px 라면 1rem 으로 설정된 요소의 폰트 크기는 16px, 2rem 으로 설정된 요소의 폰트 크기는 32px 으로 지정됩니다.)
• vw : 뷰포트 너비의 1% 를 기준으로 상대적으로 비례하는 길이로 표시됩니다.
  (1vw 의 크기는 뷰포트 너비의 1% 만큼의 크기와 동일합니다.)
• vh : 뷰포트 높이의 1% 를 기준으로 상대적으로 비례하는 길이로 표시됩니다.
  (1vh 의 크기는 뷰포트 높이의 1% 만큼의 크기와 동일합니다.)
• vmax : 뷰포트 너비 길이와 높이 길이 중 더 높은 길이의 1%를 기준으로 상대적으로 비례하는 길이로 표시됩니다.
• vmin : 뷰포트 너비 길이와 높이 길이 중 더 작은 길이의 1%를 기준으로 상대적으로 비례하는 길이로 표시됩니다.
• % : 상위 요소에 설정된 폰트 크기에 상대적으로 비례하는 길이로 표시됩니다.
  (상위 요소의 폰트 크기가 30px 으로 설정되어 있다면 100% 로 지정시 30px 과 같은 크기로 표시됩니다.)

 

출처

https://www.w3schools.com/cssref/css_units.asp

CSS Units

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units

CSS 값 과 단위 - Web 개발 학습하기 | MDN