DOIT! 반응형 웹 만들기_첫째마당

반응형 웹이란?

PC, TV,   내비게이션, 스마트 기기 등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것.
장점으로는 유지보수가 간편하다는 점, 반응형이기 때문에 마케팅에 유리하다는 점을 들 수 있을 것 같다.
그렇다면 유행이라고 무조건 반응형으로 만들어야 할까? 아니다.
상황에 따라 모바일 웹처럼 별도의 사이트를 만드는 것이 더 효율적일수도 있기 때문에 UX 고려해서 잘 만들자!

핵심 기술 - 가변 그리드(Fluid Grid)

가변 그리드란 웹사이트를 제작할 때 화면의 크기에 관계없이 늘어나거나 줄어들게 픽셀 대신 %로 제작하는 기술.
아래 이미지처럼 가로 너비에 따라 폭에 맞게끔 박스 크기가 줄어든 것을 볼 수 있다.

핵심 기술 - 미디어쿼리(Media Queries)

미디어쿼리란 컴퓨터나 기기에게 어떤 종류의 미디어인지,
화면 크기는 어느정도인지 질문하고 이를 감지하여 웹사이트를 변경하는 기술.

컴퓨터나 기기의 환경과 종류를 감지해야 그것에 맞게 웹사이트의 구조를 바꿀 수 있기에 필요한 기술이라고 함.

핵심 기술 - 뷰포트(Viewport)

뷰포트란 화면에 보이는 영역을 제어하는 기술로 미디어쿼리로 수많은 기기의 화면 크기를 감지해야 할 때 필요.

<meta name="viewport"

        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

 

위와 같은 코드로 뷰포트를 지정해 줄 수 있는데 width = device-width는 페이지 너비를 기기의 스크린 너비로 지정, initial-scale=1은 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 하는 것 정도만 알아두자.

핵심 기술 - 플랙서블 박스(Flexible Box)

단어 그대로 가변적인 박스를 만드는 기술인 동시에 웹사이트의 구조 설계를 위한 기술.

위와 같이 하나의 페이지의 전체적인 구조를 먼저 잡고 시작할 때 유용하단.