반응형 웹사이트는 데스크톱, 태블릿 및 휴대전화와 같은 모든 장치에서 훌륭하고 멋지게 보이는 웹사이트입니다. 웹사이트는 반응형으로 만들기 위해 반응형 디자인이 있어야 합니다. 크기 변경, 화면 숨기기 또는 확대를 위해 HTML 및 CSS를 사용하는 것이 전부입니다.
웹사이트의 크기를 조정할 때 반응형이 의미하는 바와 예를 살펴보겠습니다.
데스크톱
데스크탑의 웹사이트 디자인 −
태블릿
웹 사이트 디자인은 태블릿에서 다음과 같이 보입니다. 위의 바탕 화면 스크린샷과 변경 사항을 쉽게 비교할 수 있습니다 -
모바일
웹사이트 디자인은 모바일에서 다음과 같습니다 −
기기의 크기에 관계없이 보기 좋은 반응형 웹사이트를 개발하려면 다음 개념에 대해 작업해야 합니다. -
뷰포트
뷰포트는 모바일 브라우저에서 레이아웃을 제어하는 데 사용됩니다. 태그 내에서 브라우저에 웹 페이지의 크기 및 크기 조정을 제어하는 방법에 대한 지침을 제공하는 데 사용됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
여기,
width=device-width는 장치의 화면 너비를 따르기 위해 페이지 너비를 설정합니다. initial-scale=1.0은 초기 확대/축소 수준을 설정하는 것입니다. 이는 웹 브라우저에서 페이지를 처음 로드할 때 도움이 됩니다.
미디어 쿼리
미디어 쿼리를 사용하면 디자인의 일부가 중단점의 양쪽에서 다르게 작동하는 중단점을 추가합니다.
이미지 너비 및 높이 속성
이미지가 반응하려면 너비 속성을 100%로, 높이를 자동으로 설정해야 합니다.