[CSS 기초] 단위 (px, %, vw, vh, em, rem)

 

 

안녕하세요 PNcoding입니다 :)

 

CSS에서는 선택자의 크기를 지정하기 위해 사용되는 여러 가지 단위가 있습니다.

예를 들어

div {
	width: 300px;
}

 

이라고 적을 때 숫자 뒤에 쓰인 px이 바로 단위입니다.

이번 포스팅에서는 이러한 단위의 종류에 대하여 알아보도록 하겠습니다.

 

 

---

 

 

px (pixels 픽셀)

CSS에서 사용되는 가장 기본적인 단위입니다.

브라우저의 크기가 변경이 되든, 축소되든 확대가 되던지 항상 그 크기값이 변하지 않기 때문에 절대적인 값이라 불러 줍니다.

또한 다른 요소들의 크기에 영향을 받지 않습니다.

 

 

% (퍼센트)

부모요소의 크기값에 비례하여 적용되는 단위입니다.

부모요소의 크기에 따라 값이 상대적으로 변하기 때문에 상대적인 값이라고 불러줍니다.

 

부모와 자식요소를 만들고 크기값을 지정해 주도록 하겠습니다.

<div class="out_box">
    <div class="in_box"></div>
</div>

 

.out_box {
    width: 300px;
    height: 300px;
    background-color: lightblue;
}

.in_box {
    width: 50%;
    height: 50%;
    background-color: pink;
}

 

% 크기값 적용 결과

 

자식박스의 가로세로의 크기는 부모크기의 50%만큼 적용이 되는 것을 확인할 수 있습니다.

즉 부모크기인 300px의 절반값인 150px 만큼 자식요소의 크기값이 적용이 됩니다.

 

 

vw (viewport width) / vh (viewport height)

이 단위는 뷰포트 즉, 브라우저화면의 가로(너비), 세로(높이) 크기를 기준으로 크기값을 조절해 줄 수 있습니다.

따라서 브라우저의 화면을 확대하거나 축소하면 그에 따라 요소의 크기가 유동적으로 변화하게 만들어 줄 수 있습니다.

브라우저의 크기에 따라 값이 변하기 때문에 상대적인 값이라 불러줍니다.

 

예를 들어

div {
	width: 25vw;
}

라고 적어주면 브라우저 가로크기의 25%만큼 div의 가로크기가 지정된다는 의미입니다.

 

또한 요소의 세로크기의 단위에 vw를 적용시켜 주면 브라우저 가로크기에 따라 세로크기가 변화되게 만들어 줄 수 있습니다.

<div class="vw_bow"></div>

 

.vw_bow {
    width: 25vw;
    height: 10vw;
    background-color: lightblue;
}

 

아래의 파란 박스의 가로세로의 단위는 vw입니다. 

브라우저의 가로크기를 변경해 가며 박스의 크기를 확인해 보세요.

 

 

반응형

 

em (element) / rem (root element)

둘 다 font-size의 크기를 기준으로 바뀌게 되는 단위로 상대적인 값이라 불러줍니다.

하지만 그 기준이 누가 되느냐에 따라 em, rem을 구분하여 사용해 줄 수 있습니다.

 

em

1em = 16px

기본적으로 요소의 폰트크기를 지정하지 않으면 위의 값으로 인식이 됩니다.

주로 em의 단위값은 부모의 폰트크기를 기준으로 지정이 됩니다.

만약 부모요소의 폰트크기가 지정되어 있다면 그 폰트크기가 1em이 된다고 생각해 주시면 되겠습니다.

 

<div class="out_box">
    <div class="in_box"></div>
</div>

 

.out_box {
    font-size: 20px;
    width: 300px;
    height: 300px;
    background-color: lightblue;
}

.in_box {
    width: 10em;
    height: 10em;
    background-color: pink;
}

 

이렇게 지정해 주면 자식요소의 가로 세로 크기값은

1em = 20px

로서 10em = 10 X 20px = 200px로 계산이 됩니다.

 

만약 부모요소의 폰트크기가 지정되어 있지 않다면 자식요소의 가로 세로의 크기값은

1em = 16px

로서 10em = 10 X 16px = 160px 이 되는 겁니다.

 

rem

이 단위는 최상위 요소의 폰트크기를 기준으로 요소의 크기를 잡아줄 수 있습니다.

 

<div class="out_box">
    <div class="in_box"></div>
</div>

 

body {
    font-size: 16px;
}

.out_box {
    font-size: 20px;
    width: 300px;
    height: 300px;
    background-color: lightblue;
}

.in_box {
    width: 10rem;
    height: 10em;
    background-color: pink;
}

 

em과 구조는 동일하게, 대신 body에 글자크기를 지정해 두었으며, 자식요소의 가로크기의 단위는 rem, 세로크기의 단위는 em으로 지정하였습니다.

 

자식요소의 가로크기는

1rem = 16px

로서 10rem = 10 X 16px = 160px

 

자식요소의 세로크기는

1em = 20px

로서 10em = 10 X 20px = 200px 이 되는 겁니다.

 

em? rem? 어떤 단위를 사용하는 게 효율적인가요?

둘 다 상대적인 크기기 때문에 기준을 매번 기억을 해야 하는 em 보다는

최상위의 폰트 크기만 확인하면 되는 rem단위가 훨씬 효율적이라고 볼 수 있습니다.

 

또한 전체적인 레이아웃을 최상위 폰트의 크기에 맞춰서 만들어 준다면, 최상위 폰트의 크기만 조절해 주면 다른 요소들의 크기들이 상대적으로 변하기 때문에 반응형 작업에 매우 유리하다고 볼 수 있습니다.

 

반응형에 대하여 궁금하신 분은 아래 포스팅을 참고해 주세요 :)

https://pncoding.tistory.com/33

[CSS 기초] 미디어 쿼리 (media query)

 

 

 

---

 

 

웹사이트를 제작하는 데 있어 기본적으로 px이라는 단위값만 사용해서 제작할 수 있지만, 요즘은 여러 가지 기기에서 웹사이트를 보기 때문에 각 기기에 대응하는 웹사이트를 제작할 의무가 있습니다.

 

따라서 다양한 기기에서 요소의 크기가 잘 반응할 수 있도록 상대적인 값들도 적절히 함께 사용하는 것을 권장합니다 :)