>> 여러 개의 페이지로 구성된 컨텐츠가 있는 웹 사이트라면 내비게이션 메뉴가 있습니다.
CSS, 목록, nav 요소를 사용하여 간단한 내비게이션 메뉴를 만들면 사용자가 손쉽게 웹 사이트를 탐색할 수 있습니다.
우선 프로젝트 파일을 다운로드하고 압축을 풀어 경험해 보시기 바랍니다.
이 페이지는 거의 완성되어 가는데요.
이 비순차 목록의 스타일을 지정하고 이 페이지의 기본 메뉴 내비게이션으로 만들어 보겠습니다.
분할 뷰를 선택하면 비순차 목록을 볼 수 있는데, 이 페이지의 nav 요소에 포함된 것이죠.
이 nav 섹션에는 기본 내비게이션 링크가 있습니다.
앵커 링크는 이미 추가하여 이 목록 항목을 하이퍼링크로 변환해 두었습니다.
웹 브라우저에서 이 파일을 미리 보려면 파일 메뉴에서 브라우저에서 미리보기를 선택합니다.
링크가 제대로 작동하는지 테스트할 수 있습니다.
그러나 아직까지는 웹 페이지의 기본 메뉴처럼 스타일이 지정되지 않았습니다.
이제 Dreamweaver로 돌아가 해결해 보겠습니다.
빠르게 진행하기 위해 nav 선택기에 알맞은 CSS 규칙을 정의해 놓았습니다.
이를 보여드리기 위해 CSS 디자이너에서 찾아보겠습니다.
그러면 페이지 오른쪽에서 원하는 위치에 배치할 수 있습니다.
이번에는 멋진 스타일의 메뉴를 위해 추가할 수 있는 다른 속성을 살펴보겠습니다.
먼저 화면에서 글머리 기호를 제거해 보죠.
이 속성은 전체 목록으로 설정합니다.
먼저 CSS 디자이너에서 style.css를 선택하고 CSS 파일을 선택하면 변경 사항이 적용되는 것을 실시간으로 확인할 수 있습니다.
그런 다음 다시 CSS 디자이너로 돌아와 UL 선택기를 추가합니다.
그런 다음 이 속성에서 텍스트 카테고리를 선택하고 목록 스타일 유형을 없음으로 설정합니다.
글머리 기호는 화면에서 제거되지만 목록 항목은 여전히 세로로 정렬되어 있습니다.
목록 항목과 같은 일부 HTML 요소는 CSS를 사용하여 다른 기능을 지정한 경우를 제외하고 기본적으로 다른 줄에 표시됩니다.
그러려면 기존 li 선택기를 업데이트합니다.
이는 현재 글꼴 및 간격 속성의 스타일을 지정하고 있습니다.
표시 속성을 추가하고 이 속성 값을 inline 블록으로 설정합니다.
이제 목록 항목이 동일한 줄에 나란히 표시됩니다.
마지막으로 CSS를 추가하여 최종 사용자가 마우스를 선택할 메뉴 위에 갖다대면 텍스트 색상이 변하도록 만들어 보겠습니다. pseudoselector를 사용하면 예를 들어 마우스를 링크 위로 움직일 때 상태가 변하도록 요소의 스타일을 지정할 수 있습니다.
그러면 앵커인 a 선택기에 pseudoselector를 추가해 보죠.
이를 위해 CSS 디자이너에서 앵커 태그의 이름인 a:로 된 새 선택기를 선택한 다음 동작을 선택합니다.
이때 동작은 hover가 됩니다.
그런 다음 텍스트 카테고리에서 색상을 빨간색으로 변경합니다.
이제 라이브 뷰에서 목록 항목에 마우스를 갖다대면 색상의 변화를 확인할 수 있습니다.
이를 통해 페이지의 모양과 사용자 경험이 향상됩니다.
페이지의 메뉴 내비게이션은 메뉴 항목 개수, 색상, 페이지의 위치와 같은 다양한 속성을 포함할 수 있지만 이 튜토리얼에서 살펴본 일반 기법을 사용하여 이 메뉴의 스타일을 다른 웹 페이지에 적용할 수 있습니다.
또한 CSS 전환 효과를 자세히 살펴보면 방문자가 페이지의 컨텐츠와 인터랙션할 때 서로 다른 효과가 적용되도록 할 수 있습니다.
