본문 바로가기

적응형 웹(AWD, Adaptive Web Desing)과 반응형 웹(RWD, Responsive Web Design)의 차이점

반응형

 

 

적응형 웹(AWD, Adaptive Web Desing)의 정의

적응형은 몇개의 해상도를 정의하여 CSS코딩시 브라우저가 범위 사이즈에 속하면 그에 따라 정의된 스타일로 표현한다.

 

적응형웹은 PX단위를 사용하여 각 디비이스마다라기 보다는 정해진 해상도에 적응된 형태로 화면에 그려지기 때문이다.

 

반응형웹과 적응형웹모두 공통적으로 미디어쿼리를 사용한다.

 

 

 

반응형 웹(RWD, Responsive Web Design)의 정의

사용자의 사용환경과 행동패턴에 유기적이고 적절하게 반응하는 웹요소들에 대한 총체적 디자인을 말하는 것이다.

 

협의적 관점에서 본다면 Screen Size, Resolution, Orientation 등 사용 단말환경에 반응하여 웹페이지를 제공하는 것이라고 정의 할 수 있다.

 

즉, 화면 너비에 따라 유동적으로 변하는 유동형 레이아웃(fluid layout)유연한 이미지(flexible image),

 

그리고 미디어 쿼리(media queries)가 어우러져서 특정 환경에 '최적화'된 방법이 아니라 환경에 반응하여 스스로 적응하는 방법이다.

 

이는 반응형웹는 %단위를 사용하여 각 디자인의 폭에 유동적으로 반응하여 콘텐츠의 크기가 줄거나 커지고 오브젝트 배열이 달라지기도 한다.

 

 

 

 

적응형 웹(AWD, Adaptive Web Desing)과 반응형 웹(RWD, Responsive Web Design)의 차이점

 

반응형 웹

- ethan marcotte

- 하나의 틀에서 흐름...

- 창 줄일때 애니메이션 효7과

- 유동적

- http://www.alistapart.com/articles/responsive-web-design/

- http://www.mayfielddigital.co.uk/blog/web-round-up/best-responsive-web-design-examples-and-resources/


 

 

 

적응형 웹

- 해상도 값에 따라 조정하는./

- 고정폭 , 위치 , 디자인들이 기준이 되는 넚이값을 만났을때 적용됨

- 뷰를 정해둔 상태에서 작업

- http://easy-readers.net/books/adaptive-web-design/

- http://dev.opera.com/articles/view/love-your-devices-adaptive-web-design-with-media-queries-viewport-and-more/

 

 

 

 

 

출처

http://blog.daum.net/uxdaum/11

http://blog.daum.net/woowaa77/7895233

 

 

반응형