개요

▪︎ CSS 크기 단위

▫︎ 절대 단위

px : 픽셀 단위 / 고정된 크기 / 기본적으로 가장 많이 사용

▫︎ 상대 단위

<body>
    <h1>CSS 단위 연습</h1>
    <div class="box percent-box">%단위</div>
    <div class="box em-box">em단위</div>
    <div class="box rem-box">rem단위</div>
    <div class="box viewport-box">vw/vh단위</div>
</body>

em : 자신의 font-size 영향을 받음 (font-size * em)

.em-box {
    font-size: 16px;
    width: 10em;
    background-color: lightyellow;
}

rem : 루트(html) 요소의 font-size 영향을 받음 (font-size * rem)

.rem-box {
    font-size: 16px;
    width: 10rem;
    background-color: lightsalmon;
}

% : 부모 요소의 크기를 기준으로 비율 지정

.percent-box {
    width: 50%;
    background-color: lightcyan;
}

vw / vh : 뷰포트(화면 크기)의 너비 / 높이를 기준으로 % 비율 지정

.viewport-box {
    width: 70vw;
    height: 10vh;
    background-color: azure;
}

▪︎ 자주 사용하는 속성

color / background-color
font-size / font-weight / font-family / font-style
width / height / max-width / min-width / max-height / min-height
border
- border-top 등 원하는 위치만 설정 가능