반응형 웹 / 뷰포트의 개념

반응형 웹이란?

반응형 웹이란,다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 말합니다.
네이버의 경우, 모바일 환경과 데스크톱 환경을 분리하여 화면 구성을 각각 다르게 했는데요, 이 방법은 기기의 유형이 다양해짐에 따라 한계가 드러날 수 밖에 없는 방법입니다.

왜냐하면 새로운 기기가 등장할 때마다 기기에 맞는 콘텐츠를 계속 생성해 나가야하기 때문이죠!
그렇기에, 사용하는 기기에 맞게 알아서 맞춰지는 사이트, 즉 반응형 웹사이트를 개발하는 것이 가장 바람직합니다.
반응형 웹사이트의 핵심 키워드는 가변성입니다.

뷰포트란?

반응형 웹을 만들기 위해서는 뷰포트의 개념을 알아야 합니다!
뷰포트(viewport)란 현재 화면에 보여지고 있는 영역을 의미합니다.
기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 발생합니다.

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

뷰포트 관련 메타 테그 설정 코드인데요, 기기의 너비를 기준으로 초기화한다는 뜻입니다. 이 코드를 없애게 되면 배율 조정이 발생합니다. 텍스트의 크기도 기기에 맞춰 자동 조정이 됩니다.