반응형 웹 알아보기

우리가 흔히 이용하면 PC화면의 가로 해상도는 1024나 1280, 1600 등을 많이 이용합니다. 

하드웨어 기술이 발전하면서 점차 고해상도의 모니터가 출시되었고, 그에따라 서비스를 제공하는 업체들도 화면 사이즈를 점차 키워가고 있는 추세입니다. 

그러나 최근에 모바일이나 아이패드와 같은 기기들이 출시되면서 저해상도의 화면을 함께 제공해야 하는 딜레마에 빠지게 되었죠.

기존에 개발되어 고해상도의 화면을 두고 다시 별도로 만들려고 하니 시간과 비용이 그만큼 많이 투여되게 되는 것이죠.

국내 상당수의 웹사이트들이 모바일 전용 웹사이트를 다시 만들었으며, 새롭게 제작되는 사이트는 모바일과 웹을 동시에 만들기도 합니다. 

이런 불편함을 들어줄 수 있는 것이 반응형 웹입니다. 

기존에는 화면 해상도별도 따로 따로 만들어야 했다면,

이제는 하나만 만들면 스크린 사이즈에 맞춰서 이미지나 폰트, 가로, 세로의 사이즈 및 UI가 자동으로 변경됩니다. 

이것이 반응형웹입니다. 

기존에는 모바일처럼 화면 사이즈가 적은 경우나 Wide화면에서 반응형 웹이 일부 깨지는 면이 있었지만

HTML5 미디어쿼리를 이용하여 만들면 깨짐 없이 만들 수 있습니다. 

아래 링크를 클릭하면 Jquery를 이용하면 만든 반응형 웹사이트를 여러개 확인 할 수 있다. 

여러 사이트 중에서 하나만 클릭하여 브라우저의 가로 해상도를 변경해 보세요

그럼 아래와 같이 변경되는 것을 확인할 수 있습니다.

관련 링크 : http://mediaqueri.es/

아래는 유튜브에서 관련된 동영상을 링크하였습니다. 

MS 의 황리건차장이 간단하게 설명한 HTML5와 반응형웨에 대한 영상입니다.