SPATIUM Desktop
주소복사
About Operating System Languages Tools Favorites Notice Visit TEST  
     Mobile Web Test
     Responsive Web
     Google Map
     String CSS
     menu Test
  Location United States
  IP Address 54.80.188.87
2018. 10
123456
78910111213
1415161718
19
20
21222324252627
28293031

Responsive Web, 반응형 웹



반응형 웹

화면 너비에 따라 유동적으로 변하는 유동형 레이아웃, 이미지, 미디어 쿼리를 이용, 사용자 환경에 반응하는 웹 형태

사전 준비

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를 보면 쉽게 이해가 갈 것이다. 테스트 결과, chrom 에서 잘 동작(화면의 너비를 줄이면 정의된 다른 스타일 시트가 적용)된다. 실제 아이폰에서도 깔끔하게 표현된다.



Copyright (C) SPATIUM. All rights reserved.
[SPATIUM]WebMaster Mail