CSS 상대단위

📄 절대 길이 단위 px

px는 절대길이 단위입니다.
따라서 가변성이 없으며 반응형 웹에 적합하지 않습니다.

상대단위는 고정되지 않고 어떤 기준에 따라 변하는 단위입니다.
반응형 웹에는 상대적으로 크기로 조정할 수 있는 상대단위를 사용합니다.

부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용합니다.

스타일 지정 요소의 font-size 속성 값에 비례하여 값을 결정합니다. %는 부모 요소에 비례해서 크기르 결정하지만 em은 본인에 비례해서 크기를 결정합니다.

/* font-size : 16px 인 경우 */

1em => 16 * 1 = 16px
0.8em => 16 * 0.8 = 12.8px
3em => 16 * 3 = 48px

최상위 html 요소의 font-size 속성 값에 비례하여 값을 결정합니다.

/* font-size : 16px 인 경우 */

1rem => 16 * 1 = 16px
0.8rem => 16 * 0.8 = 12.8px
3rem => 16 * 3 = 48px

viewport란? 화면 display상의 표시 영역

/* viewport가 1200(px)x920(px)인 경우 */

10vw => 1200x0.1 = 120px
50vh => 920x0.5 = 460px
100px => 1200x1 = 1200px

em과 rem은 주변 상황에 따라 그 크기를 달리할 수 있는 가변성을 지니고 있지만, 브라우저나 기기 화면에 크기에 따라 크기가 달라지는 단위는 아닙니다.
em으로 margin이나 padding등 내, 외부의 여백크기를 정할 때는 부모요소로 부터 상대적인 크기를 가지는 것이 아니라, 스스로 크기를 지정하게 되므로 주의해서 사용해야 합니다.