이 시리즈의 제6장에서는 메뉴 및 링크의 스타일을 지정하고 JavaScript를 적용하여 화면 크기에 따라 메뉴를 숨기고 표시하는 방법을 살펴봅니다.
5496-create-first-website_1408x792


참고: 샘플 파일에는 Creative Cloud Libraries 전체 세트와 이 튜토리얼 시리즈에서 사용할 프로젝트 파일이 포함되어 있습니다. 제1장에서 만든 시작 파일을 계속 사용하거나 각 섹션과 관련된 폴더에 포함된 시작 파일을 사용할 수 있습니다.

소개

Dreamweaver CC 2015에서 간단한 반응형 웹 사이트를 만드는 방법에 대한 이 튜토리얼 시리즈의 제6장을 시작합니다. 1열로 된 디자인 버전은 이제 거의 완성되었습니다. 이제 링크 및 내비게이션 메뉴만 스타일을 지정하면 됩니다. 또한 JavaScript 파일을 첨부하여 작은 화면에서도 메뉴를 표시하고 숨기도록 해 봅니다.

유사 클래스를 사용하여 링크의 스타일 지정

기본적으로 링크는 밑줄과 파란색으로 표시됩니다. 링크를 클릭하여 방문한 경우 보라색으로 변합니다. 이는 잘 알려진 시각적 신호이지만 최신 디자인에는 어울리지 않습니다. 요즘은 밑줄을 제거하고 마우스를 가져가면 링크 모양이 변하는 것이 추세입니다. 다양한 상태의 링크를 위한 스타일을 만들기 위해 CSS는 유사 클래스를 사용합니다. 일반적인 클래스와 달리 클래스 속성을 요소에 추가할 수 없으므로 유사 클래스라고 합니다. 스타일 시트에서 스타일을 사용하여 브라우저를 통해 유사 클래스는 다이내믹하게 적용됩니다.

유사 클래스는 콜론(:)을 시작으로 선택기에 바로 추가됩니다. 링크와 함께 사용되는 유사 클래스는 다음과 같습니다.

  • :link 방문하지 않은 상태의 링크 스타일을 지정합니다.
  • :visited 방문한 링크 스타일을 지정합니다.
  • :hover 마우스 포인터를 가져갈 때 모든 요소(링크뿐만이 아니라)의 스타일을 지정합니다. 제5장에서 이 유사 클래스를 사용하여 마우스를 가져가면 이미지 모양이 변하도록 했습니다.
  • :active 클릭하는 순간의 요소 스타일을 지정합니다.
  • :focus 키보드를 사용하여 페이지를 탐색하는 경우와 같이 한 영역을 집중하는 요소 스타일을 지정합니다.

링크 스타일을 지정할 때 이와 같은 순서대로 유사 클래스를 사용하는 것이 중요합니다. 그렇지 않으면 스타일이 올바로 적용되지 않습니다. 많은 사람들이 LoVe-HAte를 연상하면서 이 순서를 기억합니다. Dreamweaver의 코드 힌트를 통해 동일한 순서대로 유사 클래스를 표시할 수 있습니다. 노트북 컴퓨터 또는 데스크탑에서 탐색할 때 마우스를 사용할 수 없거나 사용하지 않는 사람들이 액세스할 수 있도록 :focus 유사 클래스를 포함하는 것이 중요합니다.

  1. 라이브 뷰에서 링크를 선택한 다음 CSS 디자이너의 선택기 창에서 h2 선택기를 강조 표시합니다. 그러면 h2 뒤에 바로 다음 스타일 규칙이 만들어지고 스타일 시트에서 가장 일반적인 선택기가 함께 유지됩니다. 그런 다음 + 버튼을 클릭하여 새 선택기를 만듭니다. 위쪽 화살표를 사용하여 제시된 선택기의 지정 범위를 넓힙니다. 따라서 a가 되는데, 모든 상태의 링크 스타일을 지정합니다.

  2. 속성 창의 텍스트 섹션에서 font-weight 속성을 bold로 설정합니다.

  3. text-decoration 속성에서 첫 번째 아이콘을 선택하여 값을 none으로 설정합니다. 페이지의 모든 링크가 이제 밑줄 없이 굵게 표시됩니다.

  4. a:link에 대한 새 선택기를 만듭니다. 콜론(:)을 입력하면 유사 클래스에 대한 코드 힌트가 표시됩니다.

  5. CC Libraries 패널에서 분홍색 견본을 클릭하여 색상 #F68979를 클립보드에 복사한 다음 color 속성의 오른쪽에 있는 색상 설정에서 편집 가능한 필드에 붙여넣습니다.

  6. a:visited에 대한 새 선택기를 만들고 연한 주황색 견본을 클릭하여 색상 #FF944C를 복사해 색상 속성의 값으로 설정합니다.

  7. a:hover, a:active, a:focus에 대한 새 그룹 선택기를 만들고 갈색 견본을 클릭하여 색상 (#7F3300)을 복사해 color 속성값으로 붙여넣습니다.

    또한 두 번째 아이콘을 선택하여 text-decoration 속성을 underline으로 설정합니다.

  8. 라이브 뷰에서 링크 위에 마우스를 가져가면 갈색으로 변하고 밑줄이 표시됩니다. 그렇지 않다면 선택기 창에서 링크 스타일이 잘못된 순서대로 나열되어 있을 수 있습니다. 링크 스타일 순서를 그림 1과 비교합니다.
fig01
그림 1: 링크 스타일의 유사 클래스를 정확한 순서대로 나열해야 합니다.

필요한 경우 선택기 창에서 선택기를 드래그하여 놓는 방식으로 스타일 규칙 순서를 변경할 수 있습니다. 검은 가로줄은 스타일 시트에서 선택기가 삽입될 위치를 나타냅니다.

이때 모든 링크가 동일하게 스타일이 지정됩니다. 내비게이션 링크는 다른 방식으로 스타일을 지정해야 합니다. 먼저 작은 해상도 화면에서 내비게이션 메뉴의 트리거 링크를 만들어야 합니다.

내비게이션 메뉴의 트리거 링크 만들기

모바일폰과 같은 작은 해상도 화면에서 내비게이션 메뉴는 일반적으로 숨어 있다가 메뉴 버튼을 클릭하거나 누르면 다시 펼쳐집니다. 이 섹션에서는 비순차 목록에 ID를 할당하고 링크가 있는 두 번째 상위 머리글을 목록에 추가해 봅니다. 큰 해상도의 화면에서 메뉴 링크는 CSS에 통해 숨겨집니다. 작은 화면에서 내비게이션 메뉴의 확장/축소 동작은 CSS와 JavaScript를 함께 사용하여 제어됩니다.

  1. 라이브 뷰에서 링크 중 하나를 클릭하여 내비게이션 링크의 비순차 목록을 선택합니다. 링크가 활성 상태가 되므로 갈색으로 변하고 밑줄이 표시됩니다. 그런 다음 요소 표시가 목록이 선택됨을 나타낼 때까지 위쪽 화살표 키를 몇 번 누릅니다. 요소 표시 탭에 ul이 표시됩니다(그림 2 참조).
fig02
그림 2. 비순차 목록이 선택되었습니다.

라이브 뷰가 표시된 상태에서 위쪽 화살표 키를 누르면 선택 항목이 HTML 계층 구조의 상위 항목으로 이동합니다. 목록 중간에 있는 목록 항목을 선택한 경우 위쪽 화살표 키를 한 번 누르면 바로 위에 있는 목록 항목의 <a> 태그(하이퍼링크)가 선택됩니다. 위쪽 화살표 키를 한 번 더 누르면 링크의 부모 요소를 나타내는 <li> 태그가 선택됩니다. 계속 화살표 키를 누르면 계층 구조의 상위 항목이 선택됩니다. 더 위로 이동하면 <nav> 요소가 선택된 다음 <h1> 요소가 선택됩니다. 아래쪽 화살표를 누르면 <ul> 요소로 내려갑니다.

<ul> 요소가 선택된 상태에서 요소 표시에 있는 + 버튼을 클릭한 다음 표시되는 필드에 #navlinks를 입력하여 ID navlinks를 비순차 목록에 할당합니다. Tab 또는 Enter/Return 키를 눌러 변경 내용을 적용합니다. 팝업 패널의 소스 선택 드롭다운 메뉴에서 responsive.css가 선택되어 있는지 확인하고 밖을 클릭하여 닫습니다.

참고: 요소 표시를 사용하여 ID 또는 클래스를 요소에 할당할 때 CSS에 없는 경우 ID 또는 클래스의 빈 스타일 규칙이 자동으로 생성됩니다. 스타일 규칙을 만들지 않으려면 Esc 키를 눌러 해당 팝업 패널을 닫습니다. 스타일 규칙의 자동 생성은 요소 표시를 통해 클래스 또는 ID를 할당할 때에만 트리거됩니다. DOM 패널 또는 속성 관리자를 사용할 때에는 트리거되지 않습니다.

  1. 비순차 목록이 선택된 상태에서 삽입 > 머리글 > H2를 선택합니다. 위치 지원 대화 상자에서 이전을 선택하여 비순차 목록 바로 위에 두 번째 상위 머리글을 삽입합니다.

  2. 머리글에서 자리 표시자 텍스트를 두 번 클릭하여 편집 모드를 시작하고 자리 표시자 텍스트를 Menu로 바꿉니다.

    편집 모드에서 Menu를 선택한 다음 링크 아이콘을 클릭하여 링크로 변환합니다.

    링크 필드에 #navlinks를 입력(그림 3 참조)하고 밖을 클릭하여 편집 모드를 종료합니다.
fig03
그림 3. 내비게이션 메뉴의 링크 만들기

그러면 동일한 페이지 즉, 내비게이션 링크의 비순차 목록에 ID navlinks가 있는 요소 링크가 생성됩니다.

  1. 라이브 뷰에서 <h2> 요소가 선택되어 있는지 확인합니다.(<a> 요소가 선택된 경우 위쪽 화살표 키를 한 번 눌러야 합니다.) 그런 다음 요소 표시에서 + 버튼을 사용하여 <h2> 요소를 ID menulink에 할당합니다.

  2. 코드 뷰에서 현재 HTML을 검토합니다. <nav> 요소는 다음과 같이 표시됩니다.
<nav>
  <h2 id="menulink"><a href="#navlinks">Menu</a></h2>
      <ul id="navlinks">
            <li><a href="index.html">Home</a></li>
            <li><a href="sights.html">Sights</a></li>
            <li><a href="#">Dining</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Lodging</a></li>
      </ul>
</nav>

<h2><ul> 요소의 id 속성값은 #로 시작되지 않지만 링크의 href 속성값은 #로 시작됩니다. #은 이 ID를 찾으라는 의미입니다.

요소 표시 또는 DOM 패널에서 ID 앞에 #를 붙이는 이유는 클래스와 구분하기 위해서입니다. CSS에서 ID 선택기는 #로 시작하고 클래스 선택기는 점 또는 마침표로 시작하므로 Dreamweaver가 ID 및 클래스를 요소에 적용할 때 유저 인터페이스와 동일한 규칙을 사용합니다.

참고: ID는 페이지에서 한 번만 사용할 수 있지만 클래스는 여러 요소에서 사용할 수 있습니다. ID 이름과 클래스 이름에는 공백을 포함할 수 없습니다. 단어를 구분하려면 하이픈 또는 밑줄을 사용하거나 카멜 대소문자를 사용합니다.(각 단어의 첫 번째 문자를 대문자로 표시합니다.) 특수 문자 또는 다른 구두점을 사용할 수 없습니다.

  1. 요소 표시를 사용하여 새 ID 또는 클래스를 만들면 관련 선택기는 항상 선택기 창 하단에 만들어집니다. 스타일을 논리적 순서로 유지하려면 선택기 창에서 #menulink를 선택하고 다른 링크 스타일 뒤로 드래그합니다. 검은 가로 막대가 a:hover, a:active, a:focus 그룹 선택기 바로 아래에 표시되면 마우스 버튼을 놓습니다(그림 4 참조).
fig04
그림 4. CSS 디자이너에서 선택기를 드래그하여 놓는 방식으로 스타일 규칙을 재구성할 수 있습니다.
  1. #navlinks 선택기를 #menulink 바로 아래에 이동시킵니다.

트리거 링크 스타일 지정

트리거 링크는 <h2> 머리글 안에 중첩됩니다. 기본적으로 브라우저에서는 두 번째 상위 머리글이 굵고 큰 글꼴로 표시됩니다. 디자인에 적합한 글꼴은 작고 얇은 글꼴입니다. 모바일 디바이스에서 사용되기 때문에 링크 자체는 손쉽게 손가락으로 누를 수 있어야 하므로 텍스트만이 아니라 머리글 전체에 적용되어야 합니다.

  1. CSS 디자이너의 선택기 창에서 #menulink가 선택된 상태에서 요소의 모든 여백을 제거합니다. 다음의 두 가지 방법을 사용할 수 있습니다.

    • 대표 속성 설정을 클릭하고 0을 입력한 다음 밖을 클릭하여 닫습니다.
    • 시각적 툴의 가운데에 있는 링크 아이콘을 클릭(그림 5 참조)하고 한 측면을 0 또는 0px로 설정합니다.
fig05
그림 5. 링크 아이콘을 통해 모든 측면에 하나의 값을 설정할 수 있는 옵션을 켜고 끌 수 있습니다.
  1. 또한 다음의 속성 및 값을 설정합니다.
text-align: center
background-color: #1E1E1E (the dark gray swatch in the CC Libraries panel)

이제 텍스트는 wrapper <div>의 전체 너비까지 확장된 검정 배경에서 가운데에 배치됩니다. 머리글은 모든 가로 공백을 채우는 블록 수준 요소로 간주됩니다.

  1. 라이브 뷰에서 트리거 링크의 <a> 요소가 선택되어 있는지 확인합니다. 요소 표시 테두리가 텍스트만 감싸고 있습니다(그림 6 참조).
fig06
그림 6. 링크 텍스트만 클릭 가능합니다.
  1. #menulink a의 후손 선택기를 만듭니다. 그런 다음 속성 창의 텍스트 섹션에서 다음의 속성 및 값을 설정합니다.
color: white
font-weight: 200
text-decoration: none
text-transform: uppercase
  1. 아이콘을 클릭하여 레이아웃 섹션으로 이동하고 다음의 속성 및 값을 설정합니다.
display: block
padding-top: 0.1em
padding-bottom: 0.1em

display 속성을 block으로 설정하면 <a> 태그의 요소 표시가 머리글 전체를 감싸므로 머리글 전체가 클릭 가능합니다(그림 7 참조).

fig07
그림 7. 이제 머리글 전체가 클릭 가능합니다.

내비게이션 링크의 스타일 지정

내비게이션 링크는 비순차 목록으로 되어 있습니다. 이러한 링크의 스타일을 지정하려면 글머리 기호와 브라우저에서 목록에 적용하는 기본 여백 및 패딩을 제거해야 합니다. 또한 트리거 링크에서처럼 동일한 방법을 사용하여 링크 전체를 클릭 가능하게 만들어 봅니다.

  1. CSS 디자이너의 선택기 창에서 #navlinks가 선택된 상태에서 속성 창의 레이아웃 섹션에서 다음의 속성 및 값을 설정합니다.
width: 100%
margin: 0 (all sides)
padding: 0 (all sides)
  1. 아이콘을 클릭하여 텍스트 속성으로 이동하고 text-align을 center로 설정합니다.

  2. 텍스트 섹션 아래로 스크롤하고 list-style-type 속성을 none으로 설정하여 글머리 기호를 제거합니다.

  3. 아이콘을 클릭하여 배경 속성으로 이동하고 background-color의 색상 설정을 클릭하여 색상 피커를 엽니다. 기본 색상은 검정으로 설정되어 있는데, 반투명한 검정으로 변경해 봅니다.

    색상 피커 하단에 있는 RGBa 버튼을 선택한 다음 알파 슬라이더(오른쪽에서 세 번째)를 약 1/3 아래로 드래그합니다. 왼쪽 하단에 있는 필드 값은 rgba(0,0,0,0.65) 또는 대략 이 정도입니다(그림 8 참조).
fig08
그림 8. 색상 피커를 사용하여 반투명한 배경을 설정합니다.

RGBa 색상 형식은 쉼표로 구분된 4개의 값으로 구성되어 있습니다. 첫 번째 세 개의 값은 0-255 사이의 정수를 사용하여 Red, Green 및 Blue의 색상 구성 요소를 설정하고 네 번째 값은 0(완전 투명)부터 1(완전 불투명)까지의 알파 투명도를 설정합니다.

색상 피커 밖을 클릭하여 닫습니다.

  1. 이전 브라우저는 RGBa 색상 형식을 지원하지 않으므로 다른 배경 색상을 설정해야 합니다. 그러려면 코드 뷰에서 스타일 시트를 직접 편집해야 합니다.

    선택기 창에서 #navlinks 선택기를 마우스 오른쪽 버튼으로 클릭한 다음 표시되는 메뉴에서 코드로 이동을 선택합니다(그림 9 참조).
fig09
그림 9. 선택기 창에서 표시되는 메뉴를 사용하면 스타일 시트에서 스타일 정의를 손쉽게 찾을 수 있습니다.

그러면 분할 뷰가 열리고 선택된 스타일 규칙 끝에 삽입점이 표시됩니다.

  1. background-color 정의 위에 새 줄을 삽입하고 다음의 코드를 추가합니다.
background-color: #000000;

#를 입력하면 색상 피커가 열리는데, Enter/Return 키를 눌러 색상 피커가 닫습니다. Dreamweaver에서는 16진수 코드로 검정을 삽입합니다. 줄 끝에 세미콜론(;)을 반드시 추가해야 합니다. 편집한 스타일 규칙은 그림 10과 같습니다.

fig10
그림 10. 16진수 색상 코드는 이전 브라우저를 위한 것입니다.

이와 같이 색상을 두 번 지정하려면 CSS 케스케이드를 이용합니다. RGBa 형식을 지원하는 브라우저에서 두 번째 값은 첫 번째 값을 덮어씁니다. RGBa를 지원하지 않는 이전 브라우저는 두 번째 정의를 무시하고 16진수 값을 사용하여 검정 배경을 적용합니다.

  1. 라이브 버튼을 클릭하여 분할 뷰를 닫습니다.

  2. 내비게이션 메뉴에서 해당 링크의 후손 선택기인 #navlinks a를 만들고 레이아웃 섹션에서 다음의 속성 및 값을 설정합니다.
display: block
padding-top: 10px
padding-bottom: 10px
  1. 아이콘을 클릭하여 텍스트 속성으로 이동하고 다음의 값을 설정합니다.
color: white
font-weight: 400
text-decoration: none
text-transform: uppercase

이제 내비게이션 메뉴는 그림 11과 같이 표시됩니다.

fig11
그림 11. 스타일이 지정된 내비게이션 메뉴

내비게이션 링크는 비순차 목록으로 되어 있지만 스타일은 완전히 바뀌었습니다.

내비게이션 메뉴 표시 및 숨기기

CSS와 JavaScript를 함께 사용하여 메뉴를 표시하고 숨길 수 있습니다. 트리거 링크를 손가락으로 누르거나 클릭할 때마다 또는 브라우저 뷰포트가 특정 너비 미만으로 크기가 조정될 때마다 JavaScript는 내비게이션 링크의 비순차 목록에 적용된 클래스 이름을 바꿉니다. JavaScript가 활성화되어 있는 경우에만 메뉴가 숨겨집니다.

JavaScript를 페이지에 첨부하는 방법은 나중에 살펴봅니다. 먼저 내비게이션 메뉴가 표시된 상태로 스타일을 지정하는 방법을 살펴봅니다.

  1. 내비게이션 메뉴를 숨기거나 표시할 때 모두 내비게이션 메뉴의 위치는 CSS 절대 위치를 통해 제어됩니다. CSS 디자이너의 선택기 창에서 #navlinks 선택기를 강조 표시하고 position 속성을 absolute로 설정합니다.(이 속성은 속성 창의 레이아웃 세션에서 패딩 시각적 툴 아래에 있습니다.)

    이렇게 하면 Golden Gate Bridge 이미지가 내비게이션 링크 뒤에 표시됩니다(그림 12 참조).
fig12
그림 12. 내비게이션 링크의 비순차 목록이 절대 위치에 배치되면 히어로 이미지가 뒤에 표시됩니다.

왜냐하면 절대 위치에 배치된 요소는 일반 문서 흐름에서 제거되고 다른 요소 앞에 별도의 레이어로 표시되기 때문입니다.

  1. DOM 패널에서 #navlinks를 두 번 클릭하여 편집 가능한 필드를 열어 비순차 목록에 클래스를 추가합니다. 그림 13과 같이 #navlinks 뒤에 빈칸을 추가한 다음 .displayed(점으로 시작)를 입력합니다. 그런 다음 밖을 클릭하여 편집 내용을 적용합니다.
fig13
그림 13. DOM 패널에서 비순차 목록에 클래스 추가

요소 표시를 사용하여 해당 클래스를 비순차 목록에 할당할 수도 있지만 이렇게 하면 CSS 디자이너의 선택기 창에서 선택기가 자동으로 만들어지지 않는 이점이 있습니다.

  1. 선택기 창에서 #navlinks가 강조 표시된 상태에서 + 버튼을 클릭하여 새 선택기를 만듭니다. 편집 가능한 필드에 #navlinks.displayed를 입력합니다.

    이때 클래스 선택기에서 #navlinks와 점 사이에 빈칸을 추가하지 않도록 합니다. 이 선택기는 후손 선택기가 아닙니다. #navlinks.displayed는 ID navlinks 표시된 클래스가 있는 요소를 선택합니다.

  2. 속성 창의 레이아웃 섹션에서 position 속성 아래에 있는 시각적 툴을 사용하여 위쪽을 135px로 설정합니다(그림 14 참조). 
fig14
그림 14. 배치된 요소는 컨테이너 블록의 모든 측면에 맞게 채워집니다.

기술적으로 말해 비순차 목록 상단의 절대 위치가 컨테이너 블록의 위쪽에서 135px에 설정됩니다. 이 경우 페이지가 컨테이너 블록이 되므로 페이지의 위쪽에서 135px로 설정됩니다. 절대 위치에 대한 자세한 내용은 제7장에서 살펴봅니다.

  1. 또한 레이아웃 섹션에서 z-index1로 설정하고 opacity는 1로 설정합니다.

    z-index 속성을 설정하려면 드롭다운 메뉴에서 value를 선택한 다음 1을 입력합니다. 이 속성은 배치된 요소의 스택 순서를 설정하고 내비게이션 메뉴가 다른 요소 뒤에 갑자기 사라지지 않도록 합니다.

    opacity 속성은 0(완전 투명)과1(완전 불투명) 사이의 값을 설정합니다. 메뉴가 브라우저에서 확장되거나 축소될 때 나타나거나 사라집니다.

  2. #navlinks.start라는 선택기를 만들고 display 속성을 none으로 설정합니다.

  3. #navlinks.collapsed라는 선택기를 만들고 다음의 속성 및 값을 설정합니다.
top: –12em
opacity: 0

top 속성을 - 값으로 설정하면 비순차 목록의 상단이 페이지 위로 사라집니다. opacity를 0으로 설정하면 메뉴가 보이지 않습니다.

  1. 메뉴를 활성화하려면 JavaScript 파일을 페이지에 첨부해야 합니다. 이 파일에는 지정된 ID를 찾는 기능이 포함되어 있으므로 모든 HTML을 로드한 다음 연결해야 합니다. 올바른 위치에 스크립트를 삽입하려면 라이브 뷰에서 바닥글을 선택한 다음 삽입 > HTML > Script를 선택합니다.

  2. 스크립트는 바닥글 뒤에 와야 하므로 위치 지원 대화 상자에서 이후를 선택합니다. 그러면 파일 선택 대화 상자가 표시됩니다. 사이트 루트에서 js 폴더를 찾아 menu.js를 선택하고 확인(Windows) 또는 열기(Mac)를 클릭합니다.

    모든 스타일 정의와 HTML이 정확하면 내비게이션 메뉴가 라이브 뷰에서 사라집니다. JavaScript 파일 안의 함수가 내비게이션 메뉴에 대한 클래스를 start로 변경하고 display 속성을 none으로 설정했기 때문입니다. 그런 다음 잠시 후에 클래스를 collapsed로 변경하므로 트리거 링크를 클릭하면 메뉴가 다시 표시됩니다.

  3. Golden Gate Bridge 이미지 위에 있는 MENU를 클릭하면 내비게이션 메뉴가 표시됩니다. 다시 한 번 클릭하면 메뉴가 사라집니다. 더욱 매끄럽게 전환되도록 만들어 봅니다.

  4. CSS 디자이너의 선택기 창에서 #navlinks를 마우스 오른쪽 버튼으로 클릭하고 표시되는 메뉴에서 코드로 이동을 선택합니다.

  5. #navlinks 스타일 규칙의 닫는 중괄호 바로 앞에 다음의 코드 두 줄을 추가합니다(코드 힌트가 표시됨).
-webkit-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;

이 스타일 규칙은 브라우저에서 요소 및 후손 요소의 모든 속성이 0.5초 만에 전환되도록 지정합니다. ease-out을 설정하면 끝부분에서 전환의 속도가 느려집니다.

편집한 스타일 규칙은 그림 15와 같습니다.

fig15
그림 15. 전환 속성은 내비게이션 메뉴를 매끄럽게 변경합니다.
  1. 내비게이션 메뉴를 다시 테스트해 보면 이번에는 메뉴가 내려오고 올라갑니다.

  2. 내비게이션 메뉴가 표시된 상태에서 라이브 뷰에서 Home 링크를 클릭하여 선택합니다. 그런 다음 요소 표시에서 + 버튼을 클릭하고 편집 가능한 필드에 .thispage를 입력하여 클래스를 링크에 적용합니다.

    Tab 또는 Enter/Return를 눌러 편집 내용을 적용하고 스타일의 소스를 선택하라는 팝업 패널이 표시되면 Esc 키를 누릅니다. 선택기를 만들지 않는 이유는 스타일이 훨씬 더 긴 선택기에 포함되기 때문입니다.

  3. CSS 디자이너의 선택기 창에서 #navlinks a를 선택하고 + 버튼을 클릭하여 새 선택기를 만듭니다. 편집 가능한 필드에서 다음 그룹 선택기를 입력합니다.

    #navlinks a:hover, #navlinks a:active, #navlinks a:focus, #navlinks a.thispage

    이 선택기는 :hover, :active:focus 유사 클래스의 내비게이션 링크 스타일뿐만 아니라 클래스 .thispage의 내비게이션 링크 스타일을 지정합니다.

  4. 속성 창의 텍스트 섹션에서 color 속성을 #F68979로 설정합니다. Home 링크를 비롯한 다른 내비게이션 링크에 마우스를 가져가면 분홍색으로 변합니다.

  5. 파일 > 관련 파일 모두 저장을 선택하여 작업 내용을 저장합니다.

오류가 발생하는 이유

지금까지 모든 것이 순조롭게 진행되었음에도 불구하고 메뉴가 올바로 표시되지 않을 수 있습니다. 이러한 경우 분명 실수가 있었을 것입니다. 브라우저(및 어느 정도의 Dreamwever 라이브 뷰)는 HTML상의 실수를 용인합니다. 또한 CSS에서 경우에 따라 범하는 실수를 능숙하게 처리합니다. 그러나 JavaScript의 경우는 다릅니다. 한 번의 실수가 있어도 작동하지 않습니다.

menu.js의 스크립트는 바로 호출되는 함수 표현식인 IIFE("iffy"라고 발음됨)를 사용합니다. 함수가 바로 실행된다는 것을 의미합니다. 이 함수 표현식은 트리거 링크 ID, 비순차 목록 ID, 브라우저 뷰포트 크기가 조정되면 메뉴가 숨겨지는 중단점을 나타내는 숫자와 같은 세 개 인수로 구성됩니다. 요소에 다른 ID를 할당했거나 잘못 입력한 경우 이 함수는 작동하지 않습니다. start, collapsed 및 displayed 클래스 이름을 입력한 경우에도 작동하지 않습니다. JavaScript는 대소문자를 구분하므로 menulink와 menuLink는 완전히 다른 값으로 간주됩니다.

오류가 발생할 수 있는 또 다른 원인으로는 CSS에서 실수를 했을 수 있습니다. 정의한 마지막 세 개의 선택기인 #navlink.displayed, #navlink.start#navlink.collapsed에는 공백이 없어야 합니다. 또한 직접 입력한 스타일 규칙에서 각 줄 끝에 세미콜론이 생략되지 않았는지 확인합니다.

메뉴가 작동하지 않는 경우 샘플 파일의 part6 폴더에 있는 파일과 비교해 보시기 바랍니다. 줄 번호가 다른 것은 문제가 되지 않습니다. 코드상의 차이점을 확인해 보십시오. Dreamweaver는 타사 파일 비교 유틸리티와 통합되어 있으므로 차이점을 손쉽게 확인할 수 있습니다. 파일 비교 설정 및 사용에 대한 자세한 내용은 도움말 파일을 참조하십시오.

실수를 했더라도 낙담하지 마십시오. 실수는 배우는 과정의 중요한 부분입니다. 전문가조차 실수를 합니다. 아마추어와 전문가와의 차이는 실수를 보다 빠르게 찾고 수정하는 방법을 경험을 통해 익힌다는 점입니다.

다음 단계로

이제 Bayside Beat 웹 사이트의 1열로 된 디자인을 완성했습니다. 다음 단계인 제7장: 미디어 쿼리를 사용하여 태블릿 및 데스크탑용 사이트의 스타일 지정에서는 디자인을 2열로 된 레이아웃으로 조정하고 다른 모양의 내비게이션 메뉴를 만들어 봅니다.

04/11/2018

콘텐츠 제공: David Powers, Tom Alex Buch

이 페이지가 도움이 되었습니까?