CSS에서 크기나 간격을 지정할 때 사용하는 단위로 상대 단위와 절대 단위가 있다.

절대 단위란?

절대(absolute) 단위는 주변 요소에 영향을 받지 않는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이다.

  • px: 화면의 픽셀을 기준으로 하는 단위
  • pt: 인쇄 매체에서 주로 사용되며, 1pt는 1/72인치
  • cm: 물리적 크기를 기준으로 한 단위
  • in: 1인치 단위
  • mm 1mm 단위

PX은 가장 흔히 쓰이는 단위이다. 웹에서 절대 단위는 px을 제외하고는 잘 쓰이지 않는다.

상대 단위란?

상대(relative) 단위는 고정되지 않고 어떤 기준값에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다.

  • em: 부모 요소의 글꼴 크기를 기준으로 크기를 설정
  • rem: 루트 요소(<html>)의 글꼴 크기를 기준으로 크기를 설정
  • vh: 뷰포트 높이의 1%를 기준으로 크기를 설정
  • vw: 뷰포트 너비의 1%를 기준으로 크기를 설정
  • %: 부모 요소의 크기를 기준으로 크기를 설정

상대 단위들은 모두 꽤 흔하게 사용된다.

1) % - percentages

부모 요소를 기준으로

width나 height에서 %는 부모 요소의 크기에 상대적인 값을 설정한다.

width: 50% /* 부모 요소의 50% 너비 */

자기 자신을 기준으로

몇몇 속성(line-height 등)은 자신의 속성을 기준으로 작동한다.

p {
    font-size: 20px;
    line-height: 50%; /* 자신의 폰트 크기의 50% */
}

 

2) em

em은 부모 요소의 글꼴 크기(font-size) 를 기준으로 크기를 설정한다.

  • font-size 속성에 사용하는 경우:
    • 1em 은 부모 요소의 font-size와 같은 크기이다.
    • 2em 은 부모 요소의 font-size의 두 배 크기이다.
  • 다른 속성에 사용하는 경우:
    • 1em 은 해당 요소의 글꼴 크기를 기준으로 작동한다.
    • 예: padding, margin, border-radius 등.

em을 사용하여 padding과 border-radius를 주면 글꼴 크기에 맞춰 크기만 변경하고, 대략적인 모양은 비슷하게 유지하도록 할 수 있다.

예제

문제점

  • 중첩된 요소에서 값이 단계적으로 누적될 수 있다.
    • 예: 중첩된 <ul> 태그의 글꼴 크기가 계속 커지거나 작아질 수 있다.

3) rem

rem은 root em의 약자로, 루트 요소(<html>)의 글꼴 크기를 기준으로 크기를 설정한다.

  • 부모 요소의 영향을 받지 않으므로, 항상 일정한 기준값(루트 요소) 에 비례하여 크기를 설정할 수 있다.
  • 문서 어디에 있든, 중첩을 여러 번 시키든 항상 똑같은 크기이다.

em vs rem🤔

  • 글꼴 크기에 rem 단위를 사용하는 것이 좋다.
  • 특정 요소와 그 자식에 대한 값을 줄 때에는 em을 사용하는 것이 좋다.

참고

REM vs EM

'기초 학습 > CSS' 카테고리의 다른 글

[CSS] position 속성 값 정리 (static, relative, absolute, fixed)  (0) 2024.12.19
[CSS] 투명도 조절하는 법( 불투명도, 알파 채널 )  (0) 2024.12.13
[CSS] Display 속성 (inline / block/ inline-block)  (1) 2024.12.12
[CSS] 박스 모델의 개념  (0) 2024.12.12
[CSS] CSS 테두리(border)와 크기(width/height)  (0) 2024.12.10

티스토리툴바