단위 종류

px (픽셀) : 절대적 단위

.test {
    width: 100px;
    height: 100px;
}

% : 부모 요소의 가로 사이즈에 영향을 받음

.parent {
    width: 500px;
}
.child {
    width: 50%;  /* 250px */
}

em : 자기 자신의 폰트 크기에 영향을 받음 -> 상속 ✨ 미디어 쿼리에 사용 ✨

.parent {
    font-size: 10px;
    width: 50em;  /* 10px * 50 = 500px */
}
.child {
    font-size: 3em;  /* 10px * 3 = 30px */
    width: 10em;  /* 폰트 크기를 지정하지 않아도 상속 받은 크기 사용 */
}

rem : HTML에 지정된 폰트 크기에만 영향을 받음 ✨ 크기와 간격에 사용 ✨

html {
    font-size: 10px;
}
body {
    font-size: 20px;  /* rem 단위에 영향 없음 */
}
.child {
    width: 50rem;  /* 10px * 50 = 500px */
}

vw, vh (viewport width, viewport height)
- 현재 viewport의 가로너비, 세로너비

.test {
    width: 50vw;  /* 현재 viewport의 가로너비의 50% */
    height: 50vh;  /* 현재 viewport의 세로너비의 50% */
}

vmin, vmax (viewport의 최소 너비, viewport의 최대 너비)
- vmin : 현재 viewport의 가로 너비와 세로 너비 중 더 짧은 것
- vmax : 현재 viewport의 가로 너비와 세로 너비 중 더 긴 것