px
화면의 물리적인 픽셀 단위를 기준으로 한 고정 단위
이 값은 절대적인 크기를 나타냄
요소의 크기가 고정되어 디바이스의 해상도나 사용자 설정에 영향 받지 x
ex - font-size:16px로 설정하면 항상 16픽셀 크기로 표시
픽셀 단위는 간단하고 정확한 제어를 제공, 사용자의 접근성 설정(예: 브라우저에서 텍스트 크기 확대)에 따라 조정되지 않아 유연성이 떨어질 수 있음
em
해당 요소에 현재 적용된(죽, 부모 요소 또는 현재 요소의) font-size를 기준으로 하는 상대 단위
기본적으로, 브라우저의 초기 폰트 크기가 16px이므로, 상속받은 기본값이 없을 경우 1em은 16px로 계산됨
그러나 상위 요소에 따라 상대적으로 크기가 결정되므로, 계층 구조가 깊어질수록 값이 누적되어 예기치 않은 크기로 설정될 수 있음
ex - 부모 요소가 font-size:20px이고 자식 요소가 font-size:1.5em이면, 자식의 실제 폰트 크기는 30px
rem은 root em을 의미
최상위 HTML 요소의 font-size를 기준으로 계산
이는 em과 달리 요소 계층에 따라 크기가 누적되지 않으며, 전역적인 기준 따름
ex - HTML의 font-size가 16px로 설정되어 있다면, 1rem은 항상 16px로 계산됨
따라서 rem은 전역적으로 일관된 상대적인 크기를 설정할 때 유용, 접근성 측면에서도 사용자 설정에 잘 대응한다는 장점
em,rem이 모두 상대 단위라면, rem을 사용하지 않고 em을 사용해야 하는 경우?
rem을 항상 사용하지 않고 em을 사용하는 경우는 특정 상황에서 해당 컨텍스트에 따라 상대적인 크기를 지정해야 하는 경우
em 은 부모 요소 또는 현재 요소의 font-size를 기준으로 크기가 결정되므로, 구성 요소 간의 비례적인 크기를 쉽게 조정 가능
ex - 버튼 안의 텍스트와 패딩을 비율로 정의하고 싶다면 각각의 속성에 em을 사용하면 텍스트 크기를 조정할 때 패딩이 자연스럽게 비례적으로 조정됨
반면, rem은 루트 요소를 기준으로 고정된 상대 크기를 제공하기 때문에 전역적인 일관성에는 적합하지만, 특정 컨텍스트에 맞춘 비례조정이 필요한 경우 부적합
