[반응형 웹 스터디] 기본 개념 이해

 

● 반응형 웹

사용자의 환경 또는 특정 행동에 따라 '반응하는 웹'

쉽게 생각해서 요즘 pc, tablet, mobile 등 기기에 따라 보여지는 것이 달라지게 하는 것.

 

▶ 참고 사이트  http://mediaqueri.es

 

● 필요성

유지보수 간편 : 하나의 HTML / CSS

마케팅에 유리 : 웹사이트를 환경, 기기에 최적화된 구조로 변경하여 보여줌. 내용 전달 확실해짐. 접근이 용이해짐.

검색엔진 최적화 가능 : 주소를 하나로 통일 가능. 비용 감소. 검색엔진 집중도 상승

미래지향적 : 커브드 모니터 등..다양한 기기의 등장과 그에 대응할 수 있는 방법으로 인식.

 

▶ 해외 반응형 웹 사례

스키니 타이 http://skinnyties.com

보스턴 글로브 http://www.bostonglobe.com

 

▶ 국내 반응형 웹 사례

닥터 자르트 www.drjart.com

한국은행 화폐박물관 http://museum.bok.or.kr

 

● 가변 그리드

가변: 유동적 / 그리드: 격자나 눈금, 웹사이트 구조 설계를 위한 의미로 사용.

픽셀(px) 대신 퍼센트(%)로 제작하는 기술 : Fluid Layout, Flexible Layout, Flexible Grid 등...

 

● 미디어 쿼리 

화면의 크기와 환경 감지 및 웹사이트를 변경하는 기술

ps> query : 컴퓨터나 기기에 질문을 하는 작업. '질의' 또는 '쿼리'

ex. @media all and (min-width:320px){
         body{ background:#e65d5d;}
      }

 

● 뷰포트 

화면을 제어하는 기술

모니터나 기기 화면을 통해 보이는 영역

미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록 하기 위해 사용하는 기술

ex. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">

 

● 플렉서블 박스  

가변 박스를 만드는 기술, 웹사이트 구조 설계를 위한 기술

모니터나 기기 화면을 통해 보이는 영역

 

 [ " Do it! 반응형 웹디자인 - 김운아 - " 학습 내용을 중심으로 정리 ]