반응형 웹에 대해 간단히 알아보자.

웹 페이지는 디스플레이 크기에 따라 다르게 보여야 한다.

아래 링크에 들어가서 화면 너비를 키웠다 줄였다 움직여보면 바로 이해가 될 것이다.
https://davidwalsh.name/demo/animate-media-queries.php

스마트폰이면 스마트폰에 맞게, 태블릿이면 태블릿에 맞게, 데스크탑이면 데스크탑에 맞게 페이지를 이쁘게 보여줘야 한다.
이를 '반응형 웹 디자인'이라고 부르는데 이를 구현하기 위해 html에서 해야 할 일과 css에서 해야 할 일을 알아보자.

HTML에서 할 일

meta 태그를 입력해야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

viewport란 사용자가 웹 페이지에서 볼 수 있는 영역을 의미한다. 이는 기기에 따라 다르다. 스마트폰이면 당연히 작을 것이고, 컴퓨터 화면이면 클 것이다.

이 태그를 입력하면 페이지의 스케일링을 제어할 수 있다.

content로 여러 가지 설정을 할 수 있다.

• width=device-width: 해당 페이지를 기기 크기에 맞게 설정한다.
• initial-scale=1.0: 브라우저에 페이지가 로딩될 때의 줌 수준을 설정한다.
• user-scalable: 사용자가 줌을 쓸 수 있게 허용할지 정한다.
• maximum-scale, minimum-scale: 사용자가 줌을 사용할 때에 허용할 최대치, 최소치를 나타낸다.

절대로 user-scalable=no라고 하지 말 것! 웹은 공급자가 아니라 사용자가 주인이다. 따라서 사용자가 자신의 기호대로 꾸밀 수 있게 허용해야 한다. 늘 시각장애인(저시력자+전맹)을 염두에 두고 개발해야 한다.

CSS에서 할 일

media query를 사용해야 한다.
if문을 쓰듯이 여러 조건을 엮어서 사용할 수 있다.

아래 코드는 최대 너비 640px까지, 그리고 단말기가 세로 방향인 경우에 적용된다.

@media (max-width: 640px) and (orientation: portrait) {
	.item__images {
		display: block;
	}
}

일반적으로 미디어 쿼리 코드는 찾기 쉽게 css의 가장 하단에 놓는다.

조건에 따라 여러 개의 미디어 쿼리를 작성하는 경우, 아래 코드가 위 코드를 덮어쓰지 않도록 각별히 주의해야 한다.

responsive web breakpoint

사람들이 자주 쓰는 단말기별 사이즈를 어떻게 끊을 것인지 생각해봐야 한다.
보통 스마트폰, 태블릿, 컴퓨터 화면이 있으며, 여기에 가로모드까지 참고로 넣으면 되지 않을까 싶다.
많이 쓰는 단말기의 너비, 높이 정보는 아래 사이트에서 한눈에 확인할 수 있다.
https://www.mydevice.io/

늘 그렇듯 더 자세한 내용은 공식문서를 참고하면 된다. https://www.w3.org/TR/css3-mediaqueries/