CSS의 크기단위들!(px, em, rem, vw 등)

CSS의 다양한 단위들에 대해서 알아보자!

그 중에서도 주로 사용하는 것들을 정리해보았다.

 

우선 2종류로 나눌 수 있다.

 

절대 단위

고유한 크기를 갖는다.

즉, 타 요소에 영향 받지 않는다.

 

종류

px : 픽셀 /  컴퓨터 이미지, 디스플레이를 구성하고 있는 최소 단위

 

---

상대 단위

요소에 지정된 크기(상속된 크기값 or 기본 크기값)에 대한 상대적인 크기를 갖는다.

반응형 웹등 상황에 맞추어 변해야하는 경우 활용한다.

 

종류

 %  : 퍼센트 / 상대 비율

 em  : 배수 / 상속에 따라서 값이 계속 변한다. (중첩이 됨)

 rem  : 최상위 요소에 대한 배수 / em과 다르게 절대적 기준이 있어 다른 값을 가리키지 않는다.

(16px이 기본 설정이므로 아무 설정없이하면 16px적용!)

em vs rem

예시

1. em

<div class="parent">
    안녕하세요
    <div class="child">
        안녕하세요
        <div class="grandchild">
            안녕하세요
        </div>
    </div>
</div>

 

.parent {
    font-size: 15px;
}
.child {
    font-size: 2em;
}
.grandchild {
    font-size: 2em;
}

em의 경우에는 참조를 하는 크기가 바로 위의 부모요소이기 때문에

중첩해서 적용이 된다.

 

위의 결과에서는 15 30 60px로 적용이 된 모습이다.

 

 

2. rem

<div class="parent">
    안녕하세요
    <div class="child">
        안녕하세요
        <div class="grandchild">
            안녕하세요
        </div>
        <div class="grandchild2">
            안녕하세요
        </div>
    </div>
</div>

 

.parent {
    font-size: 15px;
}
.child {
    font-size: 2rem;
}
.grandchild {
    font-size: 2rem;
}
.grandchild2 {
    font-size: 30px;
}

rem은 em과 다르게 최상위 요소

즉, html에 적용된 사이즈를 기준으로 상대값을 가진다.

 

html의 폰트 크기값은 따로 지정하지 않으면 16px이다.

위 결과에서 알 수 있듯이 2rem의 크기는 30px보다 큰 32px이다.

16px의 2배로 적용이 된 것이다.

 

그 외)

vw : viewport width / 백분율

vh : viewport height / 백분율

 

viewport는 화면 디스플레이 상의 표시 영역을 말한다.

창의 크기라고 보면 된다.

모바일 친화적인 사이트를 만들 때 꼭 고려해야한다고 한다.

(다양한 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있게 하기 위해서)