[CSS] 수치 값을 표현하는 방법

백지원·2024년 1월 18일
0

수치 값을 표현하는 방법

1. 픽셀

고정된 절대값으로, 디지털 세계에서 일반적인 측정 단위입니다.

2. 퍼센트

상대적 측정값입니다.
width: 50%; 는 페이지 너비의 50%를 의미합니다.
또는 요소가 다른 요소 내부에 있는 경우 컨테이너 요소 너비의 50%를 의미합니다.

em, rem

환경에 따라 변하는 가변 단위입니다.

em

같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됩니다.
같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 됩니다.

따라서 1em은 같은 element 및 상위 element의 font-size입니다.
만약 같은 element의 font-size가 10px이라 가정하면 1em=10px, 2em=20px이 됩니다.

rem

최상위 엘리먼트에서 지정된 font-size 값을 기준으로 변환됩니다.
대개는 HTML tag에서 지정된 font-sizr가 기준이 됩니다.
만약 별도의 font-size를 설정하지 않은 경우, 각 브라우저에서 기본적으로 설정된 값을 상속받습니다.


Reference

0개의 댓글