Dreamweaver에서 이들 튜토리얼 사용해 보기
모던한 반응형 웹 페이지를 디자인하세요.
방문자가 모바일, 태블릿, 데스크탑 등 모든 유형의 디바이스에서 사이트를 손쉽게 탐색할 수 있도록 메뉴에 스타일을 지정해 보세요.
웹 디자인 시 모바일 버전을 먼저 만들어야 하는 이유를 살펴봅니다. 파일과 에셋을 관리할 사이트를 정의한 다음 HTML을 사용하여 로고와 내비게이션의 기본 구조가 포함된 머리글 섹션을 만들어 봅니다.
현재 메인 메뉴는 보라색 텍스트에 글머리 기호가 있는 목록으로 되어 있습니다. 이제 CSS를 사용하여 스타일을 지정하고 모바일 화면을 위한 레이아웃을 조정해 봅니다.
메뉴 레이아웃은 모바일, 태블릿 및 데스크탑 화면에 따라 다릅니다. CSS 미디어 쿼리를 사용하여 서로 다른 디바이스에 맞게 레이아웃을 변경하는 방법을 살펴봅니다. 또한 실제 디바이스에서 미리 보면서 실시간으로 디자인하는 방법도 확인합니다.