이 시리즈의 제3장에서는 나중에 스타일 지정을 위한 해당 HTML 태그를 사용하여 페이지 구조를 완성하고 두 번째 페이지와 외부 웹 사이트에 링크를 추가하는 방법을 살펴봅니다.
5496-create-first-website_1408x792

참고:

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

소개

Dreamweaver CC 2015에서 간단한 반응형 웹 사이트를 만드는 방법에 대한 이 튜토리얼 시리즈의 제3장을 시작합니다. 이 장에서는 다양한 부분의 스타일을 지정하기 전에 HTML5 구조적 요소를 추가하고 두 번째 페이지 및 외부 웹 사이트에 링크를 추가한 다음 현재 비어 있는 두 번째 페이지에 콘텐츠를 추가해 봅니다.

참고: Internet Explorer 8 및 기타 이전 버전의 브라우저는 HTML5 요소를 지원하지 않으므로 완성된 프로젝트는 이러한 브라우저에서 올바로 표시되지 않을 것입니다. 이 튜토리얼은 복잡한 요소를 제거하고 반드시 필요한 기능만 제공하기 위해 이전 버전의 브라우저를 지원하지 않기로 했습니다. 이전 브라우저를 지원해야 하는 경우 기본 Dreamweaver 지원 포럼을 참조하십시오.

DOM 패널을 사용하여 구조적 요소 추가

모든 텍스트 콘텐츠가 홈 페이지에 추가되어 서식이 지정되었지만 페이지 구조를 논리적으로 만들기 위해 몇 가지 HTML 태그를 더 추가해야 합니다. 이러한 태그는 페이지의 다양한 부분에 대해 컨테이너 역할을 하게 되므로 개별적으로 스타일을 지정할 수 있습니다.

그림 1은 페이지의 구조 방식을 보여줍니다. 머리글 및 바닥글은 wrapper <div>의 전체 너비까지 항상 확장됩니다. 큰 화면 해상도에서 페이지 콘텐츠의 대부분이 2열로 표시되지만 작은 화면에서 오른쪽 열의 콘텐츠는 왼쪽 열의 콘텐츠 아래로 내려갑니다.

Web
그림 1. 페이지 콘텐츠의 구조 방식

DOM 패널을 사용하여 이 구조를 페이지에 추가해 봅니다. DOM은 Document Object Model의 약어로 , 페이지의 여러 부분을 식별하는 브라우저의 로드맵 역할을 합니다. 처음 웹을 개발하거나 HTML 코드를 사용해 보지 못한 경우 DOM 패널이 처음에는 매우 어렵게 느껴질 수 있습니다. 그러나 DOM 패널은 웹 페이지의 구조를 살펴보고 제어할 수 있는 매우 강력한 툴입니다.

  1. 문서 창에서 index.html을 연 상태에서 DOM 패널을 살펴봅니다. 이 패널은 기본적으로 디자인 작업 영역에서 화면 오른쪽에 있는 패널 그룹의 하단을 차지하고 있습니다. 필요한 경우 DOM 탭을 클릭하여 앞에 표시합니다. 또한 윈도우 > DOM을 선택하거나 키보드 단축키인 Ctrl+/(Windows) 또는 Command+/(Mac)를 사용하여 DOM 패널을 열 수 있습니다. 그러면 그림 2와 같이 표시됩니다.
fig02
그림 2. DOM 패널은 웹 페이지의 HTML 요소 구조를 보여줍니다.

    DOM 패널에 있는 항목 중 일부는 축소되어 있을 수 있습니다. 이 경우 요소의 왼쪽에 있는 표시 삼각형을 클릭하여 확장할 수 있습니다. 다른 요소 안에 중첩된 요소는 오른쪽으로 들여져 표시됩니다. 예를 들어 h1 요소는 ID wrapper가 있는 div 안에 중첩되어 있고 li 요소는 ul 요소 안에 중첩되어 있습니다.

    다른 요소 안에 중첩되어 있는 요소는 자식 요소 또는 자식들이라고 하며 외부 요소는 부모라고 합니다. 동일한 수준의 요소는 형제라고 합니다. 따라서 DOM 패널은 가계도와 유사한 페이지 구조로 되어 있다고 말할 수 있습니다. 가계도의 비유를 계속해 보면 중첩된 요소는 외부 요소의 후손이라고 하며 외부 요소는 조상이라고 합니다.

  1. DOM 패널에서 h1 요소를 선택합니다. 그런 다음 Shift 키를 누른 상태에서 ul 요소도 선택합니다. 요소를 선택하면 연한 파란색으로 강조 표시됩니다. ul 요소가 확장되면 안에 중첩된 li 요소도 더 연한 파란색으로 표시됩니다(그림 3 참조). 이는 다음 단계가 자식인 li 요소는 물론이고 부모인 ul 요소까지 영향을 미치게 된다는 것을 의미합니다.
fig03
그림 3. Shift 키를 누른 상태에서 DOM 패널에서 인접한 요소를 선택합니다.

참고: DOM 패널에서 여러 요소를 선택할 수 있는 기능은 Dreamweaver CC 2015.2에서 새롭게 제공되는 것입니다. 이 섹션에서 제공되는 지침 사항은 이전 버전의 Dreamweaver에서 지원되지 않습니다.

  1. ul의 왼쪽에 있는 + 버튼을 클릭하고 그림 4와 같이 태그 감싸기를 선택합니다.
fig04
그림 4. DOM 패널을 사용하면 연속 요소를 부모 태그로 감쌀 수 있습니다.
  1. 한 쌍의 편집 가능한 필드가 h1 요소 위에 열립니다. Dreamweaver에서 제시하는 기본 태그는 div입니다. 왼쪽에 있는 필드에 header를 입력하여 이 요소를 바꿉니다. 입력을 시작하면 코드 힌트가 표시됩니다. 화살표 또는 마우스를 사용하여 머리글을 선택할 수 있습니다.

  2. 오른쪽에 있는 편집 가능한 필드는 비워 둡니다. 이 필드는 요소의 ID 또는 클래스를 지정할 수 있는 곳인데, 지금 이 필드는 필요하지 않습니다.

    Enter/Return 키를 두 번 눌러 변경 내용을 적용합니다. 이제 선택된 요소가 <header> 요소 안에 중첩됩니다.

  3. DOM 패널에서 ul 요소를 선택하고 왼쪽에 있는 + 버튼을 클릭합니다. 이번에는 단일 요소만(및 자식 요소)을 선택했으므로 더 많은 옵션이 표시됩니다(그림 5 참조).
fig05
그림 5. 또한 단일 요소 또는 부모를 선택하면 새로운 요소를 삽입할 수 있습니다.
  1. 태그 감싸기를 선택하여 왼쪽 필드에 nav를 입력하고 오른쪽 필드를 비워 둡니다.

  2. ul 바로 뒤에 있는 첫 번째 p 요소를 선택합니다. 라이브 뷰 또는 코드 뷰를 통해 정확한 요소를 선택했는지 확인할 수 있습니다. "Bayside Beat keeps…"로 시작하는 단락이 강조 표시되어 있습니다.

  3. + 버튼을 클릭하고 태그 감싸기를 선택합니다. 왼쪽 필드에서 제시된 값인 div를 선택하고 오른쪽 필드에 #hero를 입력합니다. 따라서 <div>(ID hero가 적용됨)로 단락을 감쌉니다.

  4. 이번에는 이 ID에 대한 스타일 시트에서 선택기가 자동 생성되지 않습니다. 선택기가 자동으로 생성되는 유일한 경우는 요소 표시에서 ID 또는 클래스를 요소에 할당할 때입니다.

  5. 동일한 방법을 사용하여 왼쪽 필드에 main을 입력하여 첫 번째 h2 요소와 HTML 요소에 있는 그다음 세 개의 p 요소를 감쌉니다.

  6. 그런 다음 왼쪽 필드에 aside를 입력하여 다음 h2 요소와 요소에서 뒤에 오는 두 개의 단락을 감쌉니다.

  7. 마지막으로 왼쪽 필드에 footer를 입력하여 요소의 마지막 단락을 감쌉니다.
  8. 이 작업을 모두 완료하면 DOM 패널은 그림 6과 같이 표시됩니다.(ul의 콘텐츠는 축소되어 표시되지 않습니다.)

fig06
그림 6. DOM 패널에서 완성된 HTML 구조
  1. 표시 삼각형으로 중첩된 요소를 축소하여 구조가 정확하게 설정되었는지 확인합니다. DOM 패널은 이제 그림 7과 같이 표시됩니다.
fig07
그림 7. wrapper <div> 안의 기본 구조는 5개의 HTML 요소 안에 중첩되어 있습니다.
  1. index.html을 저장합니다.

이제 DOM 패널의 구조는 한 가지를 제외하고 그림 1과 같이 이 섹션의 시작 부분에서 살펴본 개요와 일치합니다. <div>(<header><main> 요소 사이에 ID hero가 적용됨)가 있습니다. 이는 첫 번째 페이지에서 Golden Gate Bridge의 큰 히어로 이미지와 짧은 텍스트 단락을 포함하기 위해 사용됩니다.

이와 같이 HTML 구조 설정이 매력적인 디자인을 만드는 것과는 거리가 먼 것 같지만 페이지의 스타일을 지정하기 전에 견고한 기반를 다지는 것이 필수적입니다. 요소가 부모 요소 안에 정확하게 중첩되도록 하면 페이지의 각 부분을 논리적인 그룹으로 스타일을 지정할 수 있습니다.

<header>, <nav>, <main>, <aside><footer> 요소에는 스타일이 내장되어 있지 않습니다. 이러한 요소들은 기본적으로 요소를 그룹화하지만 이름으로 각 요소가 페이지에서의 역할을 이해할 수 있습니다.

링크 만들기

링크(정확한 이름은 하이퍼링크임)는 웹 페이지를 강력하게 만들 수 있는 요소 중 하나입니다. 동일한 웹 사이트의 여러 부분 또는 완전히 다른 사이트와 연결할 수 있습니다. 이 섹션에서는 글머리 기호 목록을 내부 링크로 변환하고 외부 링크를 기본 텍스트 콘텐츠에 추가해 봅니다.

  1. 첫 번째 글머리 기호(Home)를 선택하고 텍스트를 두 번 클릭하여 편집 모드를 시작합니다.

  2. 편집 모드에서 텍스트를 선택하면 텍스트의 왼쪽 상단에 세 개의 작은 아이콘이 표시됩니다. 단어 전체가 선택된 상태에서 링크 아이콘을 클릭하여 링크를 입력할 수 있는 필드를 표시합니다(그림 8 참조).
fig08
그림 8. 편집 모드에서 링크를 만듭니다.
  1. 내부 링크를 만들 때 필드에 바로 링크 값을 입력할 수도 있지만 오른쪽에 있는 폴더 아이콘을 클릭하여 파일 선택 대화 상자를 여는 것이 좋습니다.

  2. bayside 사이트 루트(잘 모르는 경우 사이트 루트 버튼 사용)에서 index.html을 선택하고 확인(Windows) 또는 열기(Mac)를 클릭합니다. 그런 다음 주황색 테두리 밖을 클릭하여 편집 모드를 종료합니다. Home은 이제 파란색으로 밑줄 표시되어 링크라는 것을 알 수 있습니다.

    파일 이름을 직접 입력하지 않고 파일 선택 대화 상자를 사용하는 것이 너무 과도한 것 같지만 그래야 대상 파일 경로가 정확하게 입력되고 서식이 지정될 수 있습니다.

  3. 다음 글머리 기호(Sights)도 이전 단계를 반복하여 sights.html에 연결합니다.

  4. 나머지 세 개의 글머리 기호는 해당되는 페이지가 없습니다. 링크 필드에 #를 입력하여 더미 링크를 만듭니다.

  5. "Riding the Cable Cars" 뒤에 오는 첫 번째 단락을 두 번 클릭하고 Fisherman’s Wharf를 선택합니다. 이는 외부 웹 사이트에 연결되므로 링크 필드에 전체 URL을 입력해야 합니다. 다음 값을 추가합니다. http://www.fishermanswharf.org/

  6. "Cable Car Tips" 뒤에 오는 첫 번째 단락에 있는 Muni Passport와 BART subway system에 대해 외부 링크를 만듭니다. 샘플 파일의 content 폴더에서 index.docx와 index.rtf에서 URL을 찾을 수 있습니다.

외부 사이트에 연결할 때 자주 하는 실수는 URL을 시작할 때 http:// 또는 https://를 생략하는 것입니다. 이를 생략하면 브라우저는 해당 URL을 내부 링크로 간주하고 사이트 내의 페이지를 찾으려고 합니다. 외부 링크를 만들기 위해 가장 안전한 방법은 브라우저 주소 막대에서 URL을 복사하여 Dreamweaver의 링크 필드에 붙여넣는 것입니다.

DOM 패널을 통해 요소를 복사하여 두 번째 페이지에 추가

모든 텍스트 콘텐츠와 링크가 첫 번째 페이지에 추가되었다면 두 번째 페이지로 이동하여 작업해 봅니다. DOM 패널을 사용하면 간편하게 공통 요소를 복사하고 페이지 구조를 설정할 수 있습니다.

  1. 아직 index.html을 저장하지 않았다면 저장합니다. Ctrl 키(Windows) 또는 Command 키(Mac)를 누른 상태에서 DOM 패널에서 머리글 및 바닥글 요소를 선택합니다. 머리글 및 바닥글 안에 중첩된 요소는 자동으로 선택되지만 다른 요소가 선택되지 않도록 합니다.

  2. 선택된 요소 중 하나를 마우스 오른쪽 버튼으로 클릭하여 표시되는 메뉴에서 복사를 선택합니다(그림 9 참조).
fig09
그림 9. 두 번째 페이지에 붙여넣을 머리글과 바닥글을 복사합니다.
  1. 파일 패널에서 sights.html을 두 번 클릭하여 문서 창에 엽니다.

  2. sights.html이 활성 문서로 선택된 상태에서 DOM 패널에서 body를 선택하고 마우스 오른쪽 버튼으로 클릭한 다음 자식으로 붙여넣기를 선택합니다(그림 10 참조). 그러면 두 번째 페이지의 태그 안에 복사된 요소가 중첩됩니다.
fig10
그림 10. 자식으로 붙여넣기를 선택하면 복사된 요소가 선택된 요소 안에 중첩됩니다.
  1. headerfooter 요소를 모두 선택하고(body는 선택하지 않음) + 버튼을 클릭하여 태그 감싸기를 선택합니다. 그러면 선택된 요소를 div 안에 감싸고 DOM 패널에서 편집 가능한 두 필드가 표시됩니다.

  2. 오른쪽 필드 안을 클릭한 다음 #wrapper를 입력하고 Enter/Return 키를 눌러 편집 내용을 적용합니다.

  3. header를 선택한 다음 + 버튼을 클릭하고 뒤에 삽입을 선택합니다. 왼쪽 필드에는 divmain으로 바꾸고 Enter/Return 키를 두 번 눌러 변경 내용을 적용합니다.

  4. 방금 삽입한 main 요소를 선택한 다음 + 버튼을 클릭하고 뒤에 삽입을 선택합니다. 요소 이름을 aside로 변경합니다.

이제 두 번째 페이지의 HTML 구조가 완성되었습니다.

빈 요소에 주요 텍스트 콘텐츠 추가

HTML 구조를 완성했다면 두 번째 페이지에 주요 텍스트 콘텐츠를 추가해 봅니다. <main><aside> 요소는 자리 표시자 텍스트를 포함합니다. 외부 파일의 콘텐츠를 정확한 위치에 붙여넣으려면 먼저 자리 표시자 텍스트의 서식을 지정해야 합니다.

  1. 라이브 뷰에서 요소의 자리 표시자 텍스트 안을 아무 곳이나 클릭한 다음 속성 관리자의 서식 메뉴에서 단락을 선택합니다(그림 13 참조).
fig11
그림 11. 외부 파일에서 붙여넣기 전에 자리 표시자 텍스트의 서식을 지정합니다.
  1. content 폴더에 있는 sights.docx를 열고(Microsoft Word에 액세스하지 못하는 경우 sights.rtf 사용) 첫 번째 머리글과 그 뒤에 오는 6개의 단락을 클립보드에 복사합니다.

  2. Dreamweaver로 돌아갑니다. 1단계에서 서식을 지정한 단락이 선택되어 있는지 확인합니다. 요소 표시는 main이 아니라 p로 표시되어 있습니다(그림 14 참조).
fig12
그림 12. 붙여넣기 전에 서식이 지정된 자리 표시자 텍스트를 선택합니다.

    외부 파일에서 붙여넣은 콘텐츠가 HTML 계층 구조의 동일한 수준에서 현재 선택한 영역 뒤에 추가되므로 이 단계가 필요합니다.

    라이브 뷰에서 단락이 선택된 상태에서 외부 문서에서 복사한 텍스트를 붙여넣고(RTF 파일에서 콘텐츠를 붙여넣는 경우 선택하여 붙여넣기 사용) 빠른 속성 관리자를 사용하여 첫 번째 단락을 머리글로 변환합니다.

  1. 새로운 콘텐츠가 추가된 다음에는 자리 표시자 텍스트의 단락을 선택하고 삭제합니다.

  2. 동일한 기법을 사용하여 sights.docx 또는 sights.rtf에서 나머지 텍스트("Tourist Information"부터 "on a Segway"까지)를 복사하여 요소에 붙여넣습니다. RTF 파일을 사용하는 경우 "Tourist Information"과 "Sightseeing Tours"를 머리글로 서식을 지정합니다.

  3. sights.html을 저장합니다.

Dreamweaver에서 외부 파일의 콘텐츠를 선택한 요소의 형제로 붙여넣으므로 자리 표시자 텍스트의 서식을 지정한 다음 삭제해야 합니다. 그렇지 않으면 붙여넣은 모든 머리글과 단락은 요소 안에 중첩되지 않고 뒤에 배치됩니다. 삽입 패널 또는 메뉴를 사용할 때에만 위치 지원 대화 상자가 표시됩니다.

두 번째 페이지에 링크 추가

sights.html의 콘텐츠를 완성하려면 텍스트 내에 일부 링크를 생성해야 합니다. sights.docx 및 sights.rtf에서 제공되는 URL을 사용하여 다양한 외부 사이트와 연결합니다. 도움이 필요한 경우 샘플 파일의 part3 폴더에 있는 sights.html 버전을 살펴보십시오.

다음 단계로

이 단계까지 모두 완료하셨다면 축하드립니다. 이제 완벽하게 작동하는 두 개의 웹 사이트 페이지가 완성되었습니다. 아직 멋지게 보이지는 않지만 제4장: 글꼴 변경 및 기본 스타일 만들기에서 몇 가지를 변경해 봅니다.

04/11/2018

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

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