[CSS] 반응형 단위 정리(vh, em, rem 등)

---

이제는 더이상 웹페이지는 절대적으로 지정된 크기로 코딩돼서는 안된다.

모바일로, 태블릿으로, 노트북으로 그리고 컴퓨터로 심지어 스마트 워치 등 화면의 사이즈는 날이 갈 수록 다양해지고 있기 때문에 절대적 크기는 사용자 경험에 큰 불편을 가져다 준다.

 

한 예로, 2G 폰을 쓰던 시절, 인터넷에 들어가면 컴퓨터에서 보던 화면이 그대로 깨알같이 그 작은 화면으로 들어갔던 경험을 해본 적 있을 것이다. 또한, 스마트폰에서도 pc버전으로 보기를 누르면 그렇게 나온다.

그러나 이는 크게 불편하기 때문에 당연히 반응형으로 제작해야 한다.

---

단위는 절대단위와 상대단위로 나뉜다.

절대단위(absolute unit)

css에서의 절대단위는 보통 px(픽셀), pt(포인트)를 많이 쓴다.

그렇지만 이 단위들은 화면의 크기가 변화해도 변하지 않기에 추천하지 않는다.

또한, 사용자가 브라우저의 폰트 사이즈를 바꿔도 변화하지 않는다. 

하지만 모바일에서 잘 보이는 크기의 px은 17px이 기준이라고 한다.

 

---

상대단위(relative unit)

이들이 상대단위인 이유는 브라우저를 기준으로 폰트사이즈가 유연하게 바뀌기 때문이다.

폰트 사이즈를 100%, 200% 등등으로 설정하면 그에 맞게 상대단위로 구성된 폰트들은 변한다.

css에서 html태그 내 font-size의 디폴트 값은 100%다. 물론 여기에 px 등 절대단위를 적용하게 되면 그 아래에 적용되는 자식요소들의 상대단위는 무용지물이 된다는 의미.

 <1> em

1em = 16px

그러나 상대단위인 이유는,

부모 요소를 기준으로 자식요소의 폰트 사이즈가 정해지기 때문이다.

.parent {
	font-size: 4em;	/* px로 변환하면 4 * 16 = 64px */
}
.child {
	font-size: 1em;	/* parent요소의 1배 크기 = 64px */
}

위는 윈도우사이즈의 400%, 부모요소의 100%라고 봐도 무방하다.

%(퍼센트)와 용법이 같다!!

 

<2> rem

rem의 r은 루트(root)의 r이다.

em과 차이점은 제일 부모요소인 html을 100%로 두고 그 아래 요소들의 폰트 사이즈가 정해지는 것이다.

html의 디폴트 폰트 사이즈는 16px이다. 16px이 100%라는 것이지 16px이라고 적게 되면 사용자가 절대단위를 지정했기 때문에 rem은 적용되지 않는다.

.parent {
	font-size: 4rem;	/* 디폴트값 16px * 4 = 64px */
}
.child {
	font-size: 1rem;	/* 디폴트값 16px * 1 = 16px */
}

물론 이것도 html의 폰트 사이즈를 변경하면 쓸모없어진다.

 

<3> vw & vh

v는 viewport다.

웹에서 viewport는 화면에서 보이는 부분을 말한다. 그 디바이스가 어떤 것이던 보이는 화면이다.

vw는 viewport width, vh는 viewport height. 화면의 전체 너비와 높이 길이를 100vw, 100vh라고 잡고,

50vw는 전체 화면 너비의 50%라고 보면 된다.

1vh는 전체 화면 높이의 1%이다.

 

<4> vmin & vmax

vmin은 화면에서 너비와 높이 중 짧은 길이를 기준으로 상대 길이를 설정할 수 있다.

10vmin인데 높이가 너비보다 짧다면, 높이의 10% 길이를 뜻한다.

 

vmax는 화면에서 너비와 높이 중 긴 길이를 기준으로 상대 길이를 설정할 수 있다.

10vmax인데 높이가 너비보다 길다면, 높이의 10% 길이를 뜻한다.

---

여태 상대단위의 용법을 제대로 모르고 px만 써왔는데 반성하고 상대단위를 쓸 수 있도록 노력해야겠다.

 

---

참고:

MDN https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units

유튜브 엘리의 드림코딩 https://www.youtube.com/watch?v=7Z3t1OWOpHo