반응형 웹
화면 너비에 따라 유동적으로 변하는 유동형 레이아웃, 이미지, 미디어 쿼리를 이용, 사용자 환경에 반응하는 웹 형태
사전 준비
1. CSS 적용 방법
- 인라인 스타일 : 각 태그에 직접 스타일 추가- 페이지내 스타일 : 각 페이지 내 style 태그내 스타일 추가
- 외부 스타일 : 외부 css 파일을 생성하여 추가 ( 추천 )
2. 미디어 쿼리 숙지
- 미디어 쿼리는 사이트를 접속한 각 기기 타입에 따라 스타일 지정 가능- 문법 예 @media all and (min-width:980px) { 스타일 추가 }
3. HTML5 태그 사용시
- HTML5 태그를 사용하기 위해서 html5shiv 를 사용- html5shiv는 IE6~8 에서 HTML5를 사용하게 지원하는 javascript 코드
4. 사이트 접속 미디어(머신) 파악
- 접속 미디어 타입별 CSS 를 제작하기 위해선 접속 미디어 파악이 우선- 예를 들어 데스크탑과 아이폰에서의 접속이 대부분일 경우, 두가지만 고려대상
5. 디자이너와 퍼블리셔의 협의
- 반응형 웹은 디자인과 퍼블리셔의 영역이라 생각한다- 우선 디자이너는 미디어 타입 별 대표적인 화면을 설계한다
- 예를 들어 너비 940px 이상의 css, 620px 이상의 css, 그 이하 너비의 css
- 각 CSS 에서는 너비를 고려하여 Layout 을 설계
반응형 웹을 적용해야 하나?
최근 반응형 웹이 각광 받는 이유는 모바일 기기의 폭발적인 증가로 인해, 각 기기별 최적의 정보를 제공하기 위해서 이다. 기존 일반 사이트를 접속할 경우, 데스크탑, 스마트폰, 아이패드, 갤럭시탭 등 기기에 관계없이 모두 동일한 데스크탑용 사이트가 보인다. 데스크탑 기준으로 제작된 사이트는 모바일에서 볼 경우, 폰트 사이즈가 너무 작고 화면너비가 너무 커서 모바일에서는 보기 힘들다.
이후로 전체 사이트를 스마트폰 해상도에 맞게 사이트를 추가로 제작한 기업들도 많이 있었다. 그러나, 현재 각 스마트 폰과 패드 등의 해상도의 종류가 점점 증가함에 따라 각 해상도에 따른 최적화된 사이트가 필요하게 된 것이다.
반응형 웹에서 가장 힘든 부분은 디자이너와 퍼블리셔의 임무이다. 디자이너는 특정 미디어의 접속을 대비하여 두, 세가지의 디자인을 준비해야 한다. 그에 따라 퍼블리셔도 디자이너의 정확한 의도를 파악하여 웹으로 표현해야 하고. 검수 작업이 더 힘들어질 것이다.
본 페이지는 아이폰과 데스크탑, 두가지 미디어 타입을 고려하여 CSS를 제작한 테스트 페이지이다. 소스 보기와 CSS를 보면 쉽게 이해가 갈 것이다.