반응 형 웹 디자인이란?

• 할 수있다 18, 2024

반응 형 웹 디자인에는 유동적 인 레이아웃, 크기 조정 가능한 이미지 및 미디어 쿼리 등 세 가지 주요 기능이 있습니다. 미디어 쿼리는 실제로 웹 디자인에 새로운 것은 아닙니다. CSS2.1에서 미디어 유형으로 시작하여 웹과 인쇄 모두에 대한 스타일 시트를 디자인하여 웹 페이지가 화면과 인쇄시 동일하게 보일 수 있습니다. 이것은 CSS3에서 미디어 쿼리로 진행되었습니다. 이 쿼리는 미디어 장치의 너비 (max-device-width)를 확인하고 480px 또는 768px와 같은 설정 값에 대해 테스트합니다. 이 쿼리에 대한 응답으로 CSS 스타일을 사용하여 유동 레이아웃을 변경하고 화면의 이미지 크기를 조정합니다.

웹 사이트에 반응 형 디자인이 있는지 쉽게 테스트 할 수 있습니다. 컴퓨터 화면의 전체 너비에서 브라우저로 시작하십시오. 그런 다음 브라우저의 오른쪽 가장자리를 왼쪽으로 드래그하여 브라우저 창의 너비를 줄이십시오. 이미지가 작아지고 레이아웃이 부동 div를 나란히 잡고 세로로 쌓는 것을 볼 수 있습니다. 예를 들어, 전체 화면에서 갤러리 페이지에 행당 6 개의 이미지 (6div)가있는 경우 화면 너비를 줄이면 필요에 따라 행의 이미지 수가 점차 줄어든다. 너비가 일정량으로 줄어들면 이미지 자체의 크기가 작아지기 시작합니다. 자세히 살펴보면 탐색 링크와 같은 특정 디자인 요소가 아이콘으로 축소되거나 사라질 수도 있습니다. 이것은 또한 CSS 스타일 시트에 의해 제어됩니다.

웹 사이트를 디자인 할 때 웹 페이지 디자인 요소가 전체 화면 너비로 보일뿐만 아니라 쌓일 때 어떻게 보일지 고려하십시오. 웹 사이트의 기능을 저하시키지 않으면 서 화면 너비가 더 작은 화면에서 어떤 디자인 요소를 제거 할 수 있는지 고려하십시오. 반응 형 디자인을위한 기능과 기술이 빠르게 변화함에 따라 모든 개선 사항을 유지하는 데 시간이 오래 걸릴 수 있습니다. 코딩 대신 디자인에 시간을 투자하고 싶다면 Wordpress에 사용할 수있는 아름다운 반응 형 테마를 살펴보십시오. 소규모 디자인 회사 인 경우 웹 사이트를 디자인 할 때 반응 형 테마 레이아웃 중 하나에서 시작하는 것이 좋습니다.

비디오 지침: 반응형 웹(RWD) - 반응형 웹 디자인이란? (할 수있다 2024).