반응형으로 웹 만들기

반응형 웹이 무엇인지, 어떻게 만드는지 정리😎

반응형 웹이 뭐?

브라우저를 사용하는 환경들은 점점 더 늘어나고 있다.. 이에 따라 프론트엔드 개발자, 웹 디자이너 분들은 골머리를 앓고 계신다고 한다(저는 아직 그 반열에 합류하지 못해 경험해보진 못했습니다 ㅠㅠ). 핸드폰, 패드, 노트북, 대형 모니터 등등. 이처럼 많은 디바이스들의 화면에 맞게 유동적으로 컨텐츠들의 크기가 맞춰지거나, 자리하는 것을 responsive한 웹, 반응형 웹이라고 한다.

px

브라우저가 사용하는 화면에 나타나는 가장 작은 범위. px로 사용하면 고정 값을 가지게 됨. 예전에 브라우저가 PC 위에서만 사용되었을 때 fixed한 화면을 만들 때 많이 사용되었지만, 요즘은 사용이 지양됨.

em, rem

em은 현재 폰트의 사이즈를 나타냄. 기본적으로 브라우저의 폰트 사이즈는 16px. em은 부모의 px 사이즈의 배율을 나타냄. 즉 뎊스가 body만을 가지는 div가 있다고 할때, 이 div의 1.0em은 16, 2.0em은 32가 됨 ! 또 이 div의 자식 요소가 2.0em을 가진다면 현재 2.0em의 폰트 사이즈를 가지고 있는 경우 32의 2.0em은 64!

👀 부모에 폰트 사이즈를 곱한 값이라고 생각하면 됨. %라고 같다고 보면됨.

rem은 em과 개념은 같지만, 부모 요소가 아닌 root를 기준으로 곱해짐.

vw, vh

뷰포트의 넓이 vw, 높이 vh. 100이 맥시멈 값으로 뷰에 따라 변하는 단위임.