[CSS] 단위 설정

px/pt에 대한 단위값의 이해

• css 맨 처음에 브라우저의 폰트를 지정해줘야 한다.

:root {font-size : 16px;}

• 16px == 12pt
• point는 인쇄 디자인에 쓰이고 px은 디스플레이에서 사용
• px 단위는 절대 단위이므로 역동적 특성이 없어 사용자 접근성 낮음

 

%에 대한 단위값의 이해

• 부모요소 기준으로 값이 조정됨

 

em에 대한 단위값의 이해

• 16px == 12pt == 100% == 1em
• em은 최초에 설정된 font-size를 기준으로, 부모 요소를 따라 움직임.
• font-size의 em 값이 작아지면 font-size 뿐만 아니라 width, height 등에도 같이 적용됨

 

rem에 대한 단위값의 이해

• font에서는 pixel보다는 rem으로 주로 표현
• rem : 최상위 요소의 font-size 를 기준으로 사이즈 조정, 소숫점 6자리까지 표현
• 접근성이 편리함