[CSS] px, em, rem, vh, vw, %의 특징과 차이

개발/Front

[CSS] px, em, rem, vh, vw, %의 특징과 차이

차뀨뀨 2024. 1. 10. 17:04

📑 개요

프론트엔드 개발자라면 반응형 웹디자인에 대해 고민을 하게 되는 순간이 온다.

당장 내가 개발하는 모니터 사이즈는 하나이기 때문에 무엇이 잘못된 줄도 모르고 px로만 개발을 하다가는 나중에 피눈물을 머금는 순간이 올 것이다...

나도 처음에 그랬으니까......

이러한 눈물을 막아주는 것이 상대단위인 em, rem, vh, vw, % 이다.

나도 이전에 프로젝트를 만들 때 반응형에 대해 많이 고민했었다. 모두의 화면 사이즈와 비율은 같은 것이 아니니까...

반응형 웹페이지에 대해 지금부터 알아보자.

📏 절대단위와 상대단위

⌛ 절대 길이 단위

절대 길이 단위는 다른 요소의 영향을 받지 않고 항상 동일한 값을 유지한다.

대표적으로 px, pt, cm등이 있다.

1cm가 언제나 1cm로 값이 변하지 않듯 어떠한 조건이 있더라도 같은 값을 유지하는 것이다.

변동되는 값이 없으므로 어떤 규격에 딱 맞춰야 하는 경우 주로 사용된다.

- px (픽셀)

픽셀은 절대값을 사용하는 단위로 고정된 물리적 크기이다. 사용자가 임의로 정의할 수 없다.

만약 180px * 180px의 이미지를 핸드폰화면에서 본다고 가정했을 때, 핸드폰 화면은 워낙 작으니 이미지 크기가 작아도 문제가 없다.

하지만 72인치 모니터에서 이미지를 본다면 180px * 180px의 이미지는 화면에 비해 너무 작아보일 것이다.

이러한 문제를 해결해주는 것이 상대단위이다.

⏳ 상대 길이 단위

상대 길이 단위는 고정되지 않고 어떠한 기준에 따라 바뀌는 것이다.

대표적으로 em, rem, vh, vw, %가 있다.

개인적으로 물체에 비유하면 고무같다고 생각된다.

- em

부모 요소를 기준으로 자식 요소의 크기를 정하는 것이다.

em은 상위요소로부터 하위요소로 중첩이 되기 때문에 사용하는데 조금 까다롭게 느껴질 수 있다.

<style>

    html {
        font-size: 10px; /* 기준이 되는 상위 요소 */
    }

    body {
        font-size: 2em;
    }
    
    .double {
    	font-size: 2em;
    }

</style>

<body>
	<p> HI! </p> /* 20px */
	<p class="double"> HI!! </p> /* 40px - 중첩되었음 */
</body>

- rem

rem은 root em의 약자로 em은 중첩되는 것에 반면, rem은 중첩이 없이 고정된 배수값을 가지고 있다.

개인적인 의견은 em보단 rem을 사용하는 것이 코드를 작성할 때 헷갈리는 부분 없이 용이할 것이라고 본다.

<style>

	html {
		font-size: 10px; /* 기준이 되는 값 */
	}
    
    body {
    	font-size: 2rem;
    }
    
    .double {
    	font-size: 2rem;
    }

</style>

<body>
	<p> HI! </p> /* 20px */
	<p class="double"> HI!! </p> /* 20px - 중첩 x */
</body>

- vh, vw

vertical height와 vertical width의 약자로 뷰포트(화면 or 브라우저창의 크기)의 높이와 너비에 비례하여 설정된다.

1의 값은 가로나 세로 값의 1/100로 설정된다. 만약 브라우저 창의 높이가 300px이라면 1vh은 3px이 된다.

디스플레이의 일정 비율을 차지하도록 설정할 수 있기 때문에 반응형 웹페이지를 만들 때 유용하게 쓰인다.

/* 디스플레이창이 width = 1000px, height = 1000px 일 경우 */

.block {
	width: 10vw; /* 100px */
    height: 20vh; /* 200px */
}

재밌는 점은 vh는 width에도 사용가능하다는 것...

- %

화면의 비율을 기준으로 한다면 height: 100vh와 height: 100%의 차이는 뭘까?

vh와 vw는 열려있는 화면 전체의 상대길이를 기준으로 하기 때문에 스크롤바를 포함한 길이를 반환한다.

그러나 %는 창이 아닌 %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환한다.

또한 전체 화면의 %를 쓰더라도 스크롤바를 포함하지 않은 현재 화면 길이를 기준으로 계산된다는 차이가 있다.

/* 디스플레이창이 width = 1000px, height = 1000px 일 경우 */

.block {
	width: 50%; /* 500px */
}

✨ 마무리

오늘은 처음으로 개발 관련 글을 썼다. 스터디를 하며 CS 공부를 하기 위해 작성!

간단하게 시작하기 때문에 HTML CSS 관련으로 연다.

이제 그동안 하던 SSAFY 생활이 끝났기 때문에 본격적으로 블로그 운영이 가능하다.

물론 SSAFY를 하면서도 블로그를 작성했다면 참 좋았겠지만... 새롭게 공부하고 프로젝트를 진행하며 블로그를 운영하기란... 쉽지 않았다.

그래도 이전에 간단하게 쓴 글들이 있어서 그 내용을 여기에 옮겨올까 생각 중이다.

그건 차차 진행하기로...!

첫 글이라 마무리 말이 길었다. 요약을 하자!

- 요약

고정길이 : 어떤 기준에 따라 변하지 않는 고정된 값
상대길이 : 어떤 기준에 따라 변하는 가변 값
px : 고정길이단위 중 하나
em : 상대길이단위 중 하나로 부모요소에 중첩되어 값이 변한다.
rem : 상대길이단위 중 하나로 부모요소에 중첩되어 값이 변하지 않는다.
vh : 뷰포트의 높이를 기준으로 하여 1/100한 값을 비율로 사용이 가능하다.
vw : 뷰포트의 너비를 기준으로 하여 1/100한 값을 비율로 사용이 가능하다.
% : 부모 요소의 %로 반환하며 전체 화면의 %을 사용하더라도 스크롤바를 포함하지 않은 현재 화면 길이를 기준으로 계산한다.