튜토리얼 문서

초보자

30분

반응형 메뉴 만들기

방문자가 모바일, 태블릿, 데스크탑 등 모든 유형의 디바이스에서 사이트를 손쉽게 탐색할 수 있도록 메뉴에 스타일을 지정해 보세요.

1

메뉴 구조 만들기

웹 디자인 시 모바일 버전을 먼저 만들어야 하는 이유를 살펴봅니다. 파일과 에셋을 관리할 사이트를 정의한 다음 HTML을 사용하여 로고와 내비게이션의 기본 구조가 포함된 머리글 섹션을 만들어 봅니다.

2

모바일용 메뉴에 스타일 지정

현재 메인 메뉴는 보라색 텍스트에 글머리 기호가 있는 목록으로 되어 있습니다. 이제 CSS를 사용하여 스타일을 지정하고 모바일 화면을 위한 레이아웃을 조정해 봅니다.

3

태블릿 및 데스크탑용 메뉴에 스타일 지정

메뉴 레이아웃은 모바일, 태블릿 및 데스크탑 화면에 따라 다릅니다. CSS 미디어 쿼리를 사용하여 서로 다른 디바이스에 맞게 레이아웃을 변경하는 방법을 살펴봅니다. 또한 실제 디바이스에서 미리 보면서 실시간으로 디자인하는 방법도 확인합니다.


2022년 11월 7일

Dreamweaver에서 이들 튜토리얼 사용해 보기

모던한 반응형 웹 페이지를 디자인하세요.