반응형 웹이란

출처: Do it! 반응형 웹 페이지 만들기

반응형 웹의 소개

반응형 웹의 탄생 배경

모바일 기기가 나오게 되면서 작은 화면에서도 최적화된 웹 사이트를 제공하기 위해 모바일 웹이 등장했습니다. 하지만 모바일뿐만 아니라 태블릿처럼 모바일보다 화면이 더 큰 디바이스도 나오게 되었는데, 이러한 화면에서는 모바일 웹이 작게 보였습니다.
뿐만 아니라 PC 버전의 웹사이트와 모바일 버전의 웹사이트, 두 가지모드의 웹사이트를 만들어야 하는 문제도 있었습니다.

이러한 문제를 해결하기 위해 반응형 웹이라는 기술이 등장했습니다.

반응형 웹이란

반응형 웹은 PC, TV, 네비게이션, 스마트 기기등 기기나 환경마다 최적화된 웹사이트를 제공합니다.

예를 들어 반응형 웹으로 제작된 웹사이트에 접속했을 때

• 화면이 작은 디바이스: 웹사이트의 구조를 작은 화면에 최적화된 구조로 변경해서 보여줍니다.
• 큰 화면의 디바이스: 웹사이트의 구조를 큰 화면에 최적화된 구조로 변경하여 보여줍니다.

반응형 웹 제작을 위한 핵심 기술

• 화면 크기나 환경의 변화를 감지하는 기술
• 화면 크기를 정확하게 제어하는 기술
• 감지한 화면 크기로 변화하는 기술

등 다양한 기술이 필요합니다.

가변 그리드 Fluid Grid

가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 잇도록 픽셀px 대신 퍼센트 %로 제작합니다.

가변

어떠한 객체/물체 또는 사물이 늘어나거나 줄어들거나 성질히 변하는 것을 말합니다.

그리드

종이에 규칙적인 간격으로 그림을 그리고 싶을 때 종이의 길이를 재고 간격을 계산해서 줄자를 종이에 대고 규칙적인 선을 긋는 것처럼, 웹 페이지의 가로 크기 또는 세로 크기, 여백, 단 수 등 웹사이트의 구조 설계를 위한 것입니다.

Flexiable box

가변적인 박스를 만드는 기술인 동시에 웹사이트의 구조 설계를 위한 새로운 기술입니다.
또한 가변 그리드 기술을 이용해 만드는 가변적인 박스를 간단하게 만들어줄 뿐만 아니라,
박스를 손쉽게 배치할 수 있다는 장점이 있습니다.

모든 태그를 감싸는 요소가 있는 이유

대부분wrap, wrapper, container 라는 아이디를 사용하는 div태그로 모든 태그들을 감싸는 것을 볼 수 있습니다.
이러한 이유는 웹 문서 내용 전체의 크기나 배경색 등을 한꺼번에 조절할 수 있고,
브라우저 화면 크기에 상관없이 웹 문서의 내용을 중앙에 배치할 수도 있습니다.
또한 반응형 웹에서는 자식 박스들이 가변 크기로 설정되었을 때 무제한으로 늘어나는 것을 방지하고,
자식 박스들을 가변 크기로 만들 때 기준 크기로 사용할 수도 있습니다.

사이즈는 px이아닌 %로!

만약 아래와 같은 레이아웃을 구성한다 했을 때,

• container's width: 960px → 100%나 90%같이 전체 화면의 몇%를 차지할지 지정합니다.
• blue's width: 300px → 360/960*100% = 33.3%
• yellow's width: 600px → 600/960*100% = 66.6%
• margin Horizontal: 30px, 30px → 따로 지정하지 않고 container에 margin: 0 auto 스타일을 지정해주면 됩니다.

미디어 쿼리 & 뷰포트

미디어 쿼리: 화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술

미디어 쿼리란 컴퓨터나 기기에게 어떤 종류의 미디어인지, 미디어의 화면크기가 얼마나 되는지 확인하고 웹사이트를 변경하는 기술입니다.

쿼리

컴퓨터 자판을 누르면서 컴퓨터에게 자판을 눌렀으니 글자를 나타내달라 질문하고, 만약 이러한 질문이 없으면 컴퓨터가 그에 맞는 답변을 제공하는 것처럼 사용자가 컴퓨터나 기기를 사용하면서 매번 질문을 하는 작업을 컴퓨터 용어로는 질의또는 쿼리, 쿼리작업이라고 부릅니다.

뷰포트: 화면을 제어하는 기술

뷰포트는 화면에 보이는 영역을 제어하는 기술로, 미디어쿼리로 수많은 기기의 화면 크기를 감지할 때 필요합니다.

데스크탑은 사용자가 지정한 해상도에 따라 보이는 영역이 결정되지만,
스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에

미디어 쿼리를 사용해도 스마트 기기에서 화면의 크기를 정확하게 감지하지 못합니다.

스마트 기기의 보이는 영역을 기기의 실제 화면 크기로 변경하여 → 미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록 하기 위해 뷰포트라는 기술을 이용합니다.

먼저 html파일에서 뷰포트를 지정합니다.

<meta name="viewport" content="width=device-width, initial-scale=1, minimun-scale=1, maximum-scale=1, user-scalable=no">

그 다음 css파일에서 아래와 같은 미디어 쿼리 CSS 코드를 입력해서 웹 브라우저의 크기별로 스타일을 지정합니다.

@media all and (min-width: 320px) {
	body {
		background: tomato;
    }
}