웹페이지 반응형웹

    안녕하세요? 저번시간에 박스모델링과 자주 쓰이는 CSS에 관련해 제가 간략히 소개를 드렸었죠? 오늘은 웹페이지 2부! 반응형웹을 간략히 소개 해드리겠습니다. (박수)

    반응형웹이 출몰하게 된 것은 스마트폰 시대가 열리며 본격화 되었습니다. 이전까지는 최적화라는 개념 자체가 PC에만 존재해왔습니다. PC해상도의 경우 별달리 크게 차이가 나지 않기에 스마트폰 출몰 이전까지는 딱히 반응형 웹이 필요성도 미비했었습니다. 스마트폰, 태블릿 피씨 등 웹페이지를 접하는 환경이 보다 다양해지면서, 각각의 해상도에 맞춰 알아서 반응해 사이즈를 맞추는 똑똑한 디스플레이가 필요하게 된 것이랍니다.

    물론 PC와 모바일 환경에 맞는 각각의 최적화 환경을 만들어주는 것도 방법이지만, 아무래도 홈페이지가 스스로 반응하며 크기가 조절되는 훨씬 편리하고 경제적이기 때문에 널리 활용되게 되었답니다. HTML5와 CSS가 사용되면서 반응형웹도 널리 활용되게 되었지요. 그럼 오늘도 반응형 웹 코딩에 필요한 팁을 간단히 정리를 해드릴게요 (윙크)

1. fluid grid (가변그리드) %로 가로폭을 고정

2. flexible image 이미지의 사이즈를 %로 비율조절

3. media queries 

반응형 웹의 단점

1. 미디어쿼리 지원 안 되면 사용불가 *익플 8이하

2. 코드, 이미지 사용이 비합리적 *반응형 웹에서 가장 중요한 역할이 UI디자인

반응형 웹 제작시 고려사항

1. html5 ccs3 코드 (벤더 프리픽스)

2. 단위설정 (em % 상대단위값 사용)

 - em : 1em = 16px (12px 0.75em / 10px 0.625)

 - pxtoem.com > 단위변환 페이지

3. veiwport 

CSS3 사이트

01. http://www.css3.info

02. http://cssprefixer.appspot.com/

CSS3

01. border-radius

02. text-shdow : x축 y축 투명도 색상 (순서 바뀌면 안 들어감)

03. box-shdow : 위와 동일

04. multiple background images : 동시에 여러개의 배경 지정

05. opacity : 0과 1을 사용하여 투명도 조절

06. RGBA : color:rgba(36, 187, 175, 0.5) <이런식으로 색상은 물론 투명도까지 제어 가능

Reset CSS

- UI의 개발가이드 형태의 CSS

- www.cssreset.com

1. 에릭마이어CSS : 

- 영역을 지칭하는 태그들의 마진, 패딩, 보더 값을 0으로 설정

- html5에서 새로나온 태그는 display:block; 처리하여 일반 브라우저에서도 div로 보이도록

- body 간략히 행간을 글자크기와 같은 비율로 설정

2. HTML5 Doctor :

- 마진 패딩을 대부분 0으로 설정

- html5 지원 하지 않는 브라우저를 위해 display:block; 처리

- a, del 처럼 국내에서 자주 사용하지 않는 태그들까지 리셋 

- 조금 더 포괄적인 리셋형식

3. Yahoo reset css:

- 다른 리셋css보다 비교적 자주 사용되는 태그 위주로 세밀히 설정.

- 영역을 지칭하는 태그도 일부를 제한하여 설정, 글자 크기도 기본 글자가 다른 부분에만 100%설정

4. Universal selector (= *) :

- 모든 태그 설정을 리셋

5. Normailze css :

- html5를 제작할 때 유용한 부분만 리셋

- button과 input에 대해 세밀히 설정되어 있음

- 국내 reset css : 소스보기로 보셈

1. 네이버 리셋 

2. 다음 리셋

3. 네이트 리셋

반응형 웹의 기획

1. IA 설계 : 

- 해상도에 따라 요소가 변경되기 때문에 페이지에 들어갈 요소를 정확하게 설계

- 정확한 타겟을 설정해서 설계하는 것이 중요하다

- 멀티미디어 콘텐츠를 어떻게 보여줄 것인가를 고려하여 설계 (PC 모바일 환경에 따라 멀티미디어 콘텐츠 처리방식이 다름)

2. UI 설계 : 

- 해상도 변화에 따라 레이아웃 형태 변경

- 각 요소의 위치에 따라 위치 변경

- 반응형 웹에 맞추어 정확한 가변 해상도에 따라 UI 설계

- PC, 태블릿, 모바일 3단계 해상도 필수 고려 조건

- 모바일향 반응형 웹디자인을 지향 : PC는 제외하고 모바일 디바이스만 고려하여 제작 (네이버가 대표적)

3. UI 디자인 기획 :

- PC웹은 일정한 규칙에 따라 디자인 

(폰트는 고딕계열, 사이즈는 12픽셀, 배너크기 등.. 일정 규칙이 있음)

- 모바일 성장 단계이기 때문에 규칙이 지정되어있지 않음

(PC보다 가변을 고려해줘야 한다)

- Flexible img 기법으로 가변적으로 사용할지 단순 픽샐로 나타나게 할지 결정하여 제작

단, 어떤 디자인을 사용하더라도 해상도에 따라 유연한 대처가 가능해야 한다.

- 네비게이션 : 고정형으로 만들지, 해상도마다 다르게 변경할지를 고려

- 모바일의 터치 영역과터치를 활용한 인터렉션 부분

모바일에서 체크박스나 버튼과 같이 사용자의 선택이 필요한 부분은 선택이 용이하도록 선택영역지정을 크게 작업

4. 반응형 웹의 패턴 :

- mostly fluid, Column drop, Shifter, Tiny, Off canvas 

- 위와 같은 패턴을 사용하지 않더라도 반응형 웹이 아닌것은 아니다

  다만 문서의 흐름이 익숙하지 않은 (UX)사항 때문에 사용자가 불편을 느낄 수 있다

- 모든 모바일 버전은 column이 세로 정렬

- 모든 모바일 버전은 오른쪽에 있는 오브젝트가 아래로 내려감

- Mostly fluid : 반응형 웹에서 가장 많이 사용되는 패턴

wide PC에서는 가변이 아닌 고정형으로 구현하고,

그 보다 크기가 작아지면 양쪽은 여백을 남기고 내부는 가변으로 변하게끔 하는 설정

태블릿 PC 상태에서는 여백을 제거하고 가로가 100%인 상태에로 출력

모바일에서는 작은 크기에 최적화하기 위해 column을 한개씩 세로 정렬