웹 페이지의 콘텐츠가 여러 디바이스에 맞게 조정되도록 반응형 격자 레이아웃을 정의해 보세요.

시선을 사로잡는 머리글 이미지와 매력적인 텍스트를 만들고 콘텐츠를 행과 열의 격자로 구성해 보면서 HTML과 CSS에 대하여 자세히 살펴봅니다.

모든 웹 페이지에는 메시지를 전달할 텍스트와 이미지가 있어야 합니다. 격자 구조를 설정한 다음에는 텍스트, 이미지, 색상 및 바닥글과 같은 나머지 웹 페이지 콘텐츠를 추가하고 구성합니다.

모바일 디바이스에 맞게 웹 디자인을 완성한 다음에는 레이아웃이 태블릿과 데스크탑 화면에 표시될 때 자동으로 조정되도록 CSS 미디어 쿼리를 사용합니다. 여기까지 완료하면 Dreamweaver에서 반응형 웹 페이지를 훌륭하게 완성한 것입니다.