픽셀(px)을 사용하여 개발을 하다 보면, 사이트의 크기가 바뀔 때마다 내가 만든 페이지가 원치 않는 모습으로 바뀌는 것을 확인할 때가 있다.

'컴퓨터로 봤을 땐 괜찮았는데, 핸드폰으로 보니까 왜 위치가 이상하지?'

이는 픽셀이 고정된 값, 절대 단위(Absolute Units)이기 때문이다.

그럼, 절대 단위가 뭘까? 이 문제를 해결하려면 어떻게 해야 할까?

---

CSS의 대표적인 단위 두 가지

"절대 단위"

CSS의 대표적인 단위는 크게 둘로 나뉘는데, 그 중 첫번째인 절대 단위는 주변 요소에 영향을 받지 않고 고정된 수치를 의미한다.

단위	이름
cm	센티미터
mm	밀리미터
Q	4분의 1밀리미터
in	인치
pc	Picas
pt	포인트
px	픽셀

위의 표는 MDN에서 정의하고 있는 절대 길이 단위. 물론, 화면 출력에서는 대개 픽셀만 사용한다.

절대 단위 값은 고정되어 있기 때문에, 화면 크기가 변하면 픽셀 크기의 요소가 너무 작게 보이거나 화면을 넘어가버리는 경우가 생긴다.


이를 해결하기 위해 우리는, 상대 단위를 활용하여 ✨반응형 웹✨을 만들 수 있다!

"상대 단위"

CSS의 대표적인 단위 중 두번째인 상대 단위는 화면의 크기에 따라 상대적인 비율로 확대 및 축소되는 단위를 의미한다.

상대 단위를 사용함으로써 화면 크기나 레이아웃에 관계없이 웹 사이트의 비율을 유지시킬 수 있다. 이것이 곧 반응형 웹이다! 🤓

반응형 웹이란, 즉, 한 가지의 웹사이트로 다양한 종류의 화면 크기에 최적화된 화면을 보여주는 것을 뜻한다.

단위	관련 사항
em	요소의 글꼴 크기.
rem	루트 요소의 글꼴 크기.
vw	뷰포트의 초기 컨테이닝 블록 너비 1%와 같습니다.
vh	뷰포트의 초기 컨테이닝 블록 높이 1%와 같습니다.
vmin	viewport의 작은 치수의 1%.
vmax	viewport의 큰 치수의 1%.

위의 표는 MDN에서 정의하고 있는 절대 길이 단위 중 몇 가지만 가져왔다.

주로 페이지의 상위 요소를 기준으로 텍스트가 아닌 HTML 요소의 크기를 조정할 수 있는 %(백분율)이나 vw, vh, em 또는 rem가 주로 쓰인다.

이 단위들에 대해 자세히 알아보자.

%(백분율)

/* 폭(width)이나 높이(height)의 경우 */
.element {
  width: 50%; /* 부모 요소의 폭의 50% */
}


/* padding이나 margin의 경우 */
.element {
  padding: 10%; /* 부모 요소의 폭(높이 X)의 10% */
}

퍼센트는 요소의 부모 요소 또는 컨테이너의 크기를 기준으로 비율을 계산한다.

vw

.element {
  width: 50vw; /* 브라우저 창 너비의 50% */
}

vw (viewport width) 단위는 뷰포트의 너비를 기준으로 한다.
이때 뷰포트는 브라우저 창의 크기를 의미한다.

vh

.element {
  height: 50vh; /* 브라우저 창 높이의 50% */
}

vh (viewport height) 단위는 뷰포트의 높이를 기준으로 한다.

em

/* 기본 사용법 */
.element {
  font-size: 2em; /* 현재 요소의 폰트 크기의 2배 */
} 

-> 만약 부모 요소의 폰트 크기가 16px이라면, .element의 폰트 크기는 32px


/* padding이나 margin 등의 경우 */
.element {
  font-size: 16px;
  padding: 1em; /* 현재 요소의 폰트 크기의 1배 */
}

-> padding: 1em은 현재 요소의 폰트 크기가 16px이므로 16px의 패딩을 의미

em 단위는 해당 요소의 폰트 크기를 기준으로 상대적인 크기를 나타낸다.

rem

/* 기본 사용법 */
:root {
  font-size: 16px; /* 기본 폰트 크기 설정 */
}

.element {
  font-size: 2rem; /* 루트 요소의 폰트 크기의 2배 */
}

-> font-size: 2rem은 최상위 요소의 폰트 크기가 16px이므로 32px


/* padding이나 margin 등의 경우 */
.element {
  padding: 1rem; /* 루트 요소의 폰트 크기의 1배 */
}

-> padding: 1rem은 최상위 요소의 폰트 크기가 16px이므로 16px의 패딩을 의미

rem 단위는 최상위 요소(html 또는 root 요소)의 폰트 크기를 기준으로 상대적인 크기를 나타낸다.

em과 rem은 주변 상황에 따라 그 크기를 달리할 수 있는 가변성을 지니고 있지만, 브라우저나 기기 화면에 크기에 따라 크기가 달라지는 단위는 아니라는 점에 주의하자.

---

그럼, 뭘 써야 될까?

상대 단위를 사용하여 반응형 웹을 만든다면, 다양한 기기와 화면 규격에서 동일한 경험을 제공할 수는 있다.

그러나 이것이 절대적으로 옳다고 말할 순 없다.

때로는 크기가 변하지 않는 고정적인 요소가 필요할 수도 있으니, 내가 만들고자 하는 사이트의 특성에 맞게 선택하면 되는 것! 🤨

다음엔 더 유익한 정보로 돌아오겠습니다.