★★ 절대단위(px, pt) / 상대단위(em, ex, %)

 

 

 

1. 절대 단위

 절대 단위는 고정된 크기를 나타내는 단위로, 화면 크기 및 해상도에 상관없이 일정한 크기를 유지한다. 

 

- px (픽셀)

 : 디지털 화면의 기본 단위로, 화소의 크기를 나타냅니다.

 

- pt (포인트)

 : 1pt는 1/72 인치로, 인쇄 매체에 주로 사용되는 단위입니다.

 

 

 

 

2. 상대 단위

 상대 단위는 다른 요소, 폰트 크기, 브라우저 창 크기 등과 관련하여 크기가 상대적으로 조절되는 단위이다. 반응형 웹 디자인을 구현하는 경우, 상대 단위를 사용하여 화면 크기의 변화에 따른 적응성을 높일 수 있다.

반응형

- em

 : 해당 폰트의 상위 요소의 글자 크기를 기준으로 하는 단위이다. 보통 1em은 상위 요소의 글자 크기와 동일하게 설정된다.

 

- rem (Root em)

 : rem은 루트(root) 요소(HTML)의 폰트 크기를 기준으로 하는 단위이다. 1rem은 HTML 요소의 폰트 크기와 동일한 크기를 나타낸다. 예를 들어, HTML 요소의 폰트 크기가 16px이면 1rem은 16px와 동일하게 작동한다. 

 

- ex

 : 해당 폰트의 폰트 크기에 대한 'x' 문자의 높이를 기준으로 하는 단위이다. 폰트마다 'x' 문자의 높이가 다를 수 있으므로, 폰트에 따라 달라진다.

 

- % (퍼센트)

 : 상위 요소의 크기에 대한 비율을 나타내는 단위로, 백분율로 표시된다. 상위 요소의 크기에 따라 자동으로 크기가 조절된다.