CSS[단위]

CSS에서 사용되는 단위에는 크게 상대 단위와 절대 단위가 있습니다.

*상대 단위

1. em

em은 요소의 폰트 크기를 기준으로 상대적인 크기를 가지는 단위입니다. 

 

즉, em 단위로 지정한 크기는 요소의 폰트 크기에 상대적으로 결정됩니다. 

 

예를 들어, 부모 요소의 폰트 크기가 16px일 때, 1em은 16px과 같습니다. 

 

만약 자식 요소의 폰트 크기가 0.8em으로 지정되어 있다면, 

 

자식 요소의 폰트 크기는 부모 요소의 폰트 크기의 0.8배인 12.8px이 됩니다.

2. rem

rem은 root em의 약자로, html 요소의 폰트 크기를 기준으로 상대적인 크기를 가지는 단위입니다. 

 

따라서 rem 단위로 지정한 크기는 항상 html 요소의 폰트 크기에 상대적으로 결정됩니다. 

 

이를 통해 전체적인 레이아웃의 크기를 일관적으로 조정할 수 있습니다.

3. vw, vh

vw와 vh는 뷰포트(Viewport)의 너비와 높이를 기준으로 상대적인 크기를 가지는 단위입니다. 

 

뷰포트는 브라우저에서 웹 페이지를 표시하는 영역으로, 

 

1vw는 뷰포트 너비의 1/100 크기를, 1vh는 뷰포트 높이의 1/100 크기를 의미합니다. 

 

이 단위를 사용하면 화면 크기에 따라 요소의 크기가 자동으로 조정되므로 반응형 웹 디자인에 매우 유용합니다.

4. %

%는 부모 요소의 크기를 기준으로 상대적인 크기를 가지는 단위입니다. 

 

예를 들어, 부모 요소의 너비가 200px일 때, 50%로 지정하면 100px이 됩니다.

*절대 단위

1. px
px는 픽셀(Pixel)의 약자로, 고정된 크기의 단위입니다. 

 

px 단위를 사용하면 화면의 크기나 해상도에 상관없이 항상 같은 크기로 출력됩니다.

2. pt
pt는 포인트(Point)의 약자로, 인쇄용 단위입니다. 보통 인쇄용 문서에서 폰트 크기를 지정할 때 사용됩니다.

3. cm, mm, in
cm, mm, in은 각각 센티미터(Centimeter), 밀리미터(Millimeter), 인치(Inch)의 약자