반응형 웹이란 웹 사이트를 디자인할 때 PC나 노트북보다 더 작은 스마트폰에서 웹에 접속하는 경우가 많이 생김으로써 모바일 기기의 특성을 충분히 활용할 수 있도록 크기에 맞게 웹 사이트를 표시하도록 만드는 방법을 말합니다.
반응형 웹의 장점
1. 모든 스마트 기기에서 접속 가능
2. 가로 모드에 맞추어 레이아웃 변경 가능
3. 사이트 유지-관리 용이
모바일 기기를 위해 기본적으로 알아두어야 할 것이 '뷰포트(viewport)'입니다. 뷰포트를 지정하면 접속한 기기 화면에 맞추어 확대하거나 축소해 표시할 수 있습니다. '뷰포트'란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다.
스마트폰 화면에서 내용을 확인하면 페이지의 글자들이 매우 작게 표시되는 것을 보게 되는데, 이것은 웹키트(webkit)기반인 모바일 브라우저들의 기본 뷰포트 너비가 980px이기 때문입니다. 다시 말해 웹 페이지 너비를 스마트폰 용인 320px로 맞추어 제작하더라도 스마트폰의 모바일 브라우저의 기본 뷰포트 너비가 980px이기 때문에 웹 페이지 너비를 무조건 980px로 표시하려고 합니다.
뷰포트 지정하기
뷰포트를 지정하는 방법으로는 <meta>태그를 이용해 <head>태그와 </head>태그 사이에 작성합니다. 뷰포트를 지정하는 기본적인 형식은 다음과 같습니다.
| 기본형 |
| <meta name="viewport" content="<속성1=값>, <속성2=값2>, ... "> |
content속성을 이용해 뷰포트 속성과 속성 값을 지정하는데 content안에서 사용하는 뷰포트 속성은 다음과 같습니다.
| 속성 | 설명 | 사용 가능한 값 | 기본 값 |
| width | 뷰포트 너비 | device-width 또는 크기 | 브라우저 기본 값 |
| height | 뷰포트 높이 | device-height 또는 크기 | 브라우저 기본 값 |
| user-scalable | 확대/축소 가능 여부 | yes 또는 no | yes |
| initial-scale | 초기 확대/축소 값 | 1~10 | 1 |
| minimum-scale | 최소 확대/축소 값 | 0~10 | 0.25 |
| maximum-scale | 최대 확대/축소 값 | 0~10 | 1.6 |
<meta name="viewport" content="width=device-width, initial-scale=1">가장 많이 사용하는 형태는 이런 형태입니다.
가변 그리드 레이아웃
고정 그리드와 가변 그리드
웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준이 '그리드 시스템(grid system)'입니다. 반드시 그리드 시스템을 따를 필요는 없지만 사이트 전체의 디자인이나 일관성을 유지하는데는 그리드 시스템이 편리합니다. 그리드 시스템이란 화면을 몇개의 칼럼(column)으로 나누어 요소들을 배치하는 것으로 필요할 때마다 칼럼들을 묶어 배치할 수 있습니다.
그리드 시스템을 사용하면 화면을 단순하게 만들면서도 규칙적으로 배열하기 때문에 레이아웃을 일관성 있게 유지할 수 있다는 장점이 있어 대부분의 사이트들에서 사용됩니다.
그리드 시스템에서는 화면 너비를 몇 픽셀로 하는가에 따라 960픽셀로 고정하는 '960 그리드 시스템'이나 1200픽셀로 고정하는 '1200 그리드 시스템'으로 나누기도 하고 화면을 몇 개의 칼럼으로 나누는가에 따라 12칼럼 그리드, 16칼럼 그리드, 24칼럼 그리드로도 나누는데 주로 960픽셀의 12칼럼 그리드를 사용합니다.
반면 어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서가 표현되려면 문서 안의 각 요소의 너비를 픽셀과 같은 고저 값이 아니라 백분율과 같은 가변 값으로 지정하면 됩니다. 이렇게 사이트의 레이아웃을 백분율로 지정하는 것을 '가변 그리드 레이아웃(fluid grid layout)' 또는 줄여서 '가변 레이아웃(fluid layout)'이라고 합니다.
가변 그리드 레이아웃 만들기
1. 전체를 감싸는 요소
고정 그리드 레이아웃을 만들고 가변 그리드 레이아웃으로 바꿀 수 있습니다.
가변 그리드는 웹 콘텐츠 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비를 계산합니다. 만약 이런 요소가 없다면 <div id="wrapper">나 <div id="container">과 같은 요소를 직접 추가합니다. id이름은 무엇으로 해도 괜찮습니다.
#wrapper {
width:96%;
margin:0 auto;
}
2. 각 요소의 너비 값 계산하기
기준이 되는 요소를 찾았다면 그 요소의 너비 값으로 각 요소의 너비 값을 계산합니다.
(요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100요소의 너비 값을 %로 지정할 때 소수점 이하 숫자가 많다면 소수점 이하 3~4자리까지 표시합니다. 또한 요소들의 너비와 함께 패딩과 마진도 백분율 값으로 조절하는 것이 자연스럽습니다. 각 요소에 사용한 패딩과 마진 값도 #wrapper 너비 값으로 나눈 후 100을 곱해 계산합니다.
| 요소 | 고정 그리드 | 가변 그리드 |
| header | 960px | 100% |
| .content | 600px | 62.5% |
| padding | 15px | 1.5625% |
| .right-side | 300px | 31.25% |
| padding | 15px | 1.5625% |
| footer | 960px | 100% |
가변 레이아웃과 가변 요소
가변 글꼴
텍스트 크기를 픽셀(px)단위로 지정하면 크기가 고정되기 때문에 화면 크기가 작은 기기에서는 매우 작게 표시됩니다. 따라서 반응형 웹 디자인을 위해 가변 그리드 레이아웃을 사용할때는 글자 크기도 유동적으로 바뀌어야 합니다. 이것을 '가변 글꼴'이라고 하는데요. 가장많이 사용하는 단위는 em과 rem입니다.
EM 단위
부모 요소에서 지정한 폰트의 대문자 m의 너비를 1EM으로 지정한 것으로 1EM은 16PX입니다. 따라서 이미 PX로 표시한 글자의 크기를 16PX로 나누면 EM 값으로 계산할 수 있습니다.
em단위로 작성된 글꼴도 실제로 브라우저 창에 표시될 때는 해당 기기에 맞춘 픽셀크기로 계산되어 표시됩니다.
rem 단위
em 단위는 부모 요소의 글꼴을 기준으로 하기 때문에 중첩된 부모 요소의 글자 크기의 영향을 받습니다. 이런 단점을 없애기 위해 만든 단위가 rem입니다. rem에서 r은 루트(root)를 뜻하며 rem은 처음부터 기본 크기를 지정하기 때문에 중간에 기본값이 바뀌지 않습니다.
가변 이미지
이미지의 경우, 웹 문서에 삽입할 때부터 이미지의 크기가 정해져 있기 때문에 브라우저 창의 크기가 변하더라도 이미지의 너비 값은 바뀌지 않습니다. 그래서 가변 그리드 레이아웃에서 이미지의 너비가 브라우저 화면의 너비보다 클 경우, 브라우저 화면의 너비를 줄이면 이미지의 일부가 가려집니다.
이럴 때 '가변이미지(fluid image)'로 만들면 창의 너비에 따라 이미지 너비도 적절히 조절되도록 만들 수 있습니다.
<img>태그와 srcset속성
이미지 너비 값을 max-width:100%로 지정하면 가변 이미지를 간단히 만들 수 있지만 모든 상황에서 사용할 수 있는 것은 아닙니다. 고해상도 이미지를 크기만 줄여 모바일에 표시하더라도 파일 사이즈가 크기 때문에 모바일에서 다운로드하는 데 시간이 오래 걸립니다. 또한 텍스트가 포함된 이미지일 경우, 모바일 화면에 맞게 줄여 표시하면 텍스트 내용을 알아보기 힘들 수도 있죠. <img> 태그에서 srcset속성을 이용하면 화면 너비 값이나 픽셀 밀도에 따라 고해상도의 이미지 파일을 지정할 수 있습니다.
| 기본형 |
| <img src="<이미지>" srcset="<이미지1>[, <이미지2>, <이미지3>, ...]"> |
<img src="images/pencil.jpg" srcset="images/pencil-hd.jpg 2x" alt="색연필 제품 이미지">
<picture>태그와 <source> 태그 - 상황별로 다른 이미지 표시하기
HTML5.1에는 <picture>태그가 표준으로 포함되면서 <picture> 태그와 <source>태그를 함께 사용해 화면 해상도뿐만 아니라 화면 너비에 따라 다른 이미지파일을 표시할 수도 있습니다.
| 속성 | 설명 |
| srcset | 이미지 파일의 경로 |
| media | srcset에 지정한 이미지를 표시하기 위한 조건(속성 값은 14-4 미디어 쿼리 참고). |
| type | 파일 유형 |
| sizes | 파일의 크기 |
<picture>
<source srcset="images/shop-large.jpg" media="(min-width:1024px)">
<source srcset="images/shop-medium.jpg" media="(min-width:768px)">
<source srcset="images/shop-small.jpg" media="(min-width:320px)">
<img src"images/shop.jpg" alt="fill with coffee" style="width:100%;">
</picture>
가변 비디오
가변 이미지와 마찬가지로 비디오도 화면의 너비가 달라질 때마다 비디오의 너비가 늘어나거나 줄어들 수 있도록 해야 합니다. HTML5에서 동영상을 삽입할 때는 기본적으로 <video>태그를 사용하므로 CSS를 사용해 max-width 속성을 100%로 지정하면 웹 문서 안에서 크기가 적절히 조절됩니다.