[#1] 다양한 화면 크기에 최적화하다! - 반응형 웹

01-1 반응형 웹이란?

사용자가 접속하는 기기 또는 환경에 맞춰 화면의 크기가 자동으로 조절되어 최적화된 화면 레이아웃을 보여주는 웹

 

01-2 반응형 웹은 만능일까?

장점 1. 기기의 화면 크기나 해상도에 구애받지 않는다.

장점 2. 화면의 변화에 즉시 반응

장점 3. 어느 기기에서든 사이트 주소가 같다.

장점 4. 유지 관리가 편하다

장점 5. 최선 웹 표준을 따름

 

단점 1. 예전 브라우저 버전과 호환성에 문제가 있을 수 있음

단점 2. 사이트 디자인이 단순함

 

01-3 반응형 웹 디자인 패턴

살짝 수정 패턴: 화면 너비를 조절하면 레이아웃에는 변화 없이, 글자 크기나 이미지 크기만 변함

유동형 패턴: 살짝 수정 패턴과 비슷하지만 모바일 화면에서는 레이아웃이 바뀔 수 있음

칼럼 드롭 패턴: 여러 칼럼으로 구성된 레이아웃에서 흔히 사용하는 패턴, 화면 너비가 좁아지면 칼럼들이 아래로 떨어지도록 구성

레이아웃 이동 패턴: 칼럼 드롭 패턴과 유사하지만 화면 크기에 따라 레이아웃을 다양하게 만드는 형태

캔버스 밖으로 패턴: 일부 콘텐츠를 화면 밖에 감춰 두었다가 사용자가 필요할 때만 화면에 꺼내오는 패턴

 

01-4

반응형 웹을 만드는 여러가지 방법

반응형 웹을 만드려면 기본으로 '미디어 쿼리'를 사용

미디어 쿼리: CSS3의 모듈 중 하나로, 사이트에 접속하는 기기별로 적용 할 CSS 파일을 다르게 지정해 주는 기술