CSS 상대단위

📄 절대 길이 단위 px

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

📄 상대 단위

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

1. %

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

2. em

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

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

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

3. rem

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

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

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

---

4. vw / vh

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

• vw: viewport의 너비값에 비례

• vh: viewport의 높이값에 비례

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

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

📄 상대단위의 장점

• 상대적인 크기의 단위를 이용하면 박스의 레이아웃 스타일을 수정할 때 유용합니다.
• 박스의 비율을 고려해가며 크기를 정할 수 있어서 계산이 수월합니다.

📄 주의할 점

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

출처

• 유노코딩