이 시리즈의 제2장에서는 텍스트를 추가 및 스타일을 지정하고 라이브 뷰에서 바로 텍스트를 추가하며 기존 문서에서 텍스트를 복사하는 방법을 살펴봅니다.
5496-create-first-website_1408x792

참고:

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

소개

Dreamweaver CC 2015에서 간단한 반응형 웹 사이트를 만드는 방법에 대한 이 튜토리얼 시리즈의 제2장을 시작합니다. 제1장에서 사이트를 정의하고 두 개의 웹 페이지를 만들었습니다. 현재 이 페이지에는 제목만 있습니다. 이 장에서는 사이트의 홈 페이지인 index.html에 텍스트 콘텐츠를 추가해 봅니다. 먼저 라이브 뷰의 편집 모드에서 바로 입력한 다음 Microsoft Word의 서식이 지정된 텍스트를 복사하고 붙여넣어 봅니다. Word를 이용할 수 없는 경우 RTF 파일에서 콘텐츠를 붙여넣은 다음 간단하게 조정합니다.

그래픽 디자인 분야에 종사하는 경우 페이지의 시각적 모양부터 시작하지 않는 이유를 궁금해할 수 있습니다. 디자인을 염두에 두는 것은 분명 좋은 접근 방식이지만 검색 엔진은 사이트의 디자인과 상관없습니다. 검색 엔진은 정보 기반의 머리글 및 관련 링크와 관련된 텍스트 콘텐츠를 식별합니다.

웹 페이지의 컨테이너 생성 및 스타일 시트 추가

모든 텍스트를 추가하기 전에 전체 페이지의 컨테이너를 추가하는 것이 좋습니다. 그러면 큰 화면 해상도에서 페이지 콘텐츠를 가운데에 표시할 수 있습니다. 동시에 외부 스타일 시트가 페이지에 연결됩니다.

  1. Bayside Responsive 사이트에서 제1장에서 만든 빈 웹 페이지인 index.html을 엽니다. sights.html이 열려 있으면 닫습니다. 잠시 사이트의 홈 페이지인 index.html만 사용해 봅니다.

참고: 사이트의 홈 페이지로 index.html을 사용하는 것이 일반적인 규범입니다. 대부분의 웹 서버가 디렉토리(폴더)에서 index.html 또는 index.htm을 기본 페이지로 사용하기 때문입니다. 따라서 파일 이름이 URL 끝에 추가되어 있지 않은 경우 이 페이지가 자동으로 표시됩니다.

  1. 문서 창의 왼쪽 상단에 있는 분할 버튼을 클릭하여 분할 뷰를 엽니다(그림 1 참조).
fig01
그림 1. 분할 뷰를 통해 현재 코드를 확인할 수 있습니다.
  1. 라이브 뷰에서 아무 곳이나 클릭하여 페이지의 본문을 표시합니다.

  2. 화면 오른쪽의 패널 그룹에 있는 삽입 패널 탭을 클릭하여 열고 HTML이 왼쪽 상단의 드롭다운 메뉴에서 선택되어 있는지 확인합니다(그림 2 참조).
fig02
그림 2. 삽입 패널의 HTML 범주를 선택합니다.

    여기에는 가장 일반적으로 사용되는 HTML 요소를 웹 페이지에 삽입할 수 있는 옵션이 포함되어 있습니다.

  1. Div(상단에 있는 첫 번째 항목)를 클릭합니다. 이 항목은 현재 HTML에서 태그 사이에 HTML 요소 및 자리 표시자 텍스트를 삽입합니다. 자리 표시자 텍스트는 라이브 뷰에서 연한 파란색의 테두리 안에 표시됩니다. 파란색 테두리에는 HTML 요소의 이름이 있는 탭이 있습니다(그림 3 참조). 이 탭을 요소 표시라고 합니다.
fig03
그림 3. <div> 요소는 라이브 뷰에서 요소 표시 탭으로 식별됩니다.
  1. <div> 요소는 CSS를 사용하여 스타일을 지정할 수 있는 일반 컨테이너입니다. 요소를 식별하려면 ID를 지정해야 합니다. 이 div는 페이지의 모든 콘텐츠를 포함 즉, "감싸게" 되므로 wrapper라고 해 봅니다.

  2. 요소 표시에 있는 + 버튼을 클릭합니다. 그러면 클래스 또는 ID를 요소에 추가할 수 있는 필드가 표시됩니다. 이 필드에 #wrapper를 입력하고 Tab 또는 Enter/Return 키를 눌러 변경 내용을 적용합니다.

  3. 방금 만든 ID에 대한 스타일 규칙의 소스를 선택하라는 팝업 패널이 요소 표시 옆에 나타납니다. 이 드롭다운 메뉴를 열고 그림 4와 같이 새 CSS 파일 만들기를 선택합니다.
fig04
그림 4. 클래스 또는 ID를 요소에 추가하면 스타일 규칙을 정의하라는 메시지가 표시됩니다.
  1. 새 CSS 파일 만들기 대화 상자가 열립니다. 파일/URL 필드의 오른쪽에 있는 탐색 버튼을 클릭하여 스타일 시트 파일로 저장 대화 상자를 엽니다.

  2. bayside 사이트 루트에서 styles라는 새 폴더를 만들고 선택합니다.

  3. 파일 이름 필드에서 responsive.css를 입력하고 저장을 클릭합니다. 확인을 클릭하여 첫 번째 대화 상자를 닫습니다. 그림 4의 팝업 메뉴가 계속 표시되는 경우 팝업 메뉴 바깥쪽을 클릭하여 닫습니다.

  4. 코드 뷰를 보면 여는 <div> 태그에 다음과 같은 id 속성이 있습니다:

    <div id="wrapper">여기에 새 div 태그의 내용 입력</div>

    현재 HTML에 있는 id 속성 앞에는 해시태그가 없습니다. Dreamweaver의 시각 인터페이스는 CSS 구문을 사용하여 ID와 클래스를 구분합니다. CSS의 경우 ID 선택기는 앞에 해시태그가 붙지만 클래스는 점 또는 마침표가 앞에 붙습니다.

  5. 새로운 툴바가 문서 창의 상단에 파일 이름이 있는 탭과 분할 버튼 사이에 표시됩니다(그림 5 참조). 이는 관련 파일 툴바로, 현재 웹 페이지에 연결되어 있는 모든 파일을 표시합니다.
fig05
그림 5. 관련 파일은 파일 이름을 표시하는 탭 바로 아래에 표시됩니다.

관련 파일 툴바에서 responsive.css를 클릭합니다. 이제 문서 창의 코드 뷰에는 방금 만든 스타일 시트의 코드가 표시됩니다. 2-3번 줄에는 wrapper ID에 대한 빈 스타일 규칙이 포함되어 있습니다(그림 6 참조).

fig06
그림 6. 관련 파일 툴바에서 첨부된 스타일 시트에 액세스할 수 있습니다.

    스타일 시트에서 선택기 앞에는 해시가 붙는데, 이는 동일한 ID로 요소에 스타일을 지정할 수 있음을 나타냅니다. 사이트에 스타일을 지정하기 위해 wrapper <div>의 스타일 정의를 추가하는 방법은 이 튜토리얼 시리즈의 제4장에서 살펴봅니다.

  1. 관련 파일 툴바에서 소스 코드를 클릭하여 index.html의 HTML로 돌아갑니다.

  2. 6번 줄에 있는 섹션의 코드를 확인합니다. 이 코드는 다음과 같이 현재 페이지에 스타일 시트를 연결합니다:

    <link href="styles/responsive.css" rel="stylesheet" type="text/css">

  3. 파일 이름은 모두 이름 옆에 별표가 있는데, 이는 변경 내용이 저장되지 않았음을 나타냅니다. 파일 > 관련 파일 모두 저장을 선택합니다.

  4. 파일 패널을 연 다음 styles 폴더를 확장하여 스타일 시트인 responsive.css가 올바른 위치에 생성되어 있는지 확인합니다(그림 7 참조).
fig07
그림 7. 스타일 시트가 올바른 위치에 생성되어 있는지 확인합니다.

스타일 시트를 웹 페이지에 첨부하는 또 다른 방법이 있습니다. 웹 페이지에 스타일을 지정하기 위해 Dreamweaver의 기본 패널인 CSS 디자이너를 사용하여 연결하는 방법은 이 튜토리얼 시리즈 후반부에서 살펴봅니다. 

라이브 뷰에서 바로 텍스트 콘텐츠 추가

Dreamweaver의 라이브 뷰는 브라우저가 문서 창에서 효과적으로 실행되도록 Chrome Embedded Framework를 사용합니다. 라이브 뷰는 새로운 콘텐츠를 추가하거나 기존 콘텐츠를 재정렬할 수 있는 편집 가능한 곳입니다. 라이브 뷰에서 텍스트 및 이미지를 드래그하여 놓을 수도 있지만 테두리를 드래그하여 요소의 크기 및 위치를 조정할 수 있는 시각적 레이아웃 툴은 아닙니다. 레이아웃 및 위치 조정은 모두 CSS를 통해 제어됩니다.

제4장에서 매우 단조로운 이 페이지에 스타일을 추가하기 전에 라이브 뷰에서 입력하여 실제 텍스트 콘텐츠를 추가해 봅니다.

  1. 관련 파일 툴바에서 소스 코드가 선택되어 있는지 확인하고 라이브 뷰에서 자리 표시자 텍스트 안의 아무 곳이나 클릭합니다. 그러면 코드 뷰에서 텍스트 안의 특정 영역에 삽입점(수직 선)이 표시됩니다.

  2. 속성 관리자에서 서식 드롭다운 메뉴에서 머리글 1을 선택합니다(그림 8 참조). 서식 메뉴가 표시되지 않으면 속성 관리자의 왼쪽 상단에 있는 HTML 버튼이 선택되어 있는지 확인합니다.
fig08
그림 8. 자리 표시자 텍스트를 최상위 머리글로 변환합니다.
  1. 라이브 뷰에서 자리 표시자 텍스트는 현재 크고 굵은 유형으로 되어 있고 요소 표시에는 <h1> 요소, 즉 최상위 머리글이라고 표시되어 있습니다.

  2. 현재 코드를 보면 자리 표시자 텍스트가 wrapper <div> 안에 중첩된 한 쌍의 <h1> 태그에 감싸게 되어 있습니다(그림 9 참조).

fig09
그림 9. 자리 표시자 텍스트는 <h1> 요소로 변환되었습니다.
  1. <h1> 머리글이 선택된 상태에서 라이브 뷰에서 텍스트 안의 아무 곳이나 두 번 클릭하여 편집 모드를 시작합니다. 그러면 파란색 테두리는 주황색으로 바뀌고 코드 뷰는 회색으로 표시됩니다.

  2. 모든 자리 표시자 텍스트를 선택하고 Bayside Beat를 입력합니다. 주황색 테두리 밖을 클릭하여 편집 모드를 종료합니다. 코드 뷰를 보면 <h1> 태그 사이의 텍스트가 방금 입력한 것과 동일한 텍스트로 변경됩니다.

  3. 편집 모드에서 모든 자리 표시자 텍스트를 바꿀 때 주의하지 않으면 여는 HTML 태그 뒤 또는 닫는 태그 바로 앞에 &nbsp;가 추가될 수 있습니다. 이것은 행이 분리되지 않는 공백을 위한 HTML 문자 엔티티입니다. Dreamweaver가 이 태그를 추가하는 이유는 여는 태그와 닫는 태그 사이에 콘텐츠가 필요하기 때문입니다. &nbsp;가 추가되어 있으면 코드 뷰로 이동하여 수동으로 제거합니다. 현재 코드에서 행이 분리되지 않는 공백을 위한 이 문자 엔티티를 그대로 두면 레이아웃에 문제가 발생할 수 있습니다. 따라서 코드를 직접 입력하지 않아도 현재 HTML 마크업을 확인하는 것이 좋습니다.

  4. 다음으로 나중에 내비게이션 메뉴로 변환되는 글머리 기호 목록을 추가해 봅니다. HTML에서 글머리 기호는 비순차 목록이라고 하며 한 쌍의 <ul> 태그에 감싸게 됩니다. 라이브 뷰에서 비순차 목록을 생성하려면 단락을 시작해야 합니다.

  5. 라이브 뷰에서 <h1> 머리글이 선택된 상태에서 삽입 패널을 열고 HTML 범주에서 단락(위에서 세 번째 항목)을 선택합니다.

  6. 새 요소를 삽입할 위치를 묻는 위치 지원 대화 상자 표시됩니다(그림 10 참조). 단락은 머리글 뒤에 와야 하므로 이후를 클릭합니다.
fig10
그림 10. 위치 지원 대화 상자를 사용하면 새 요소를 정확하게 삽입할 수 있습니다.
  1. Dreamweaver는 주 머리글 바로 다음에 자리 표시자 텍스트가 있는 새 단락을 삽입합니다.

  2. 라이브 뷰에서 단락이 선택된 상태에서 속성 관리자에서 비순차 목록을 클릭하여 단락을 글머리 기호로 변환합니다(그림 11 참조).
fig11
그림 11. 목록을 글머리 기호로 변환합니다.
  1. 페이지가 그림 12와 같이 표시되는지 확인합니다. 라이브 뷰에서 자리 표시자 텍스트는 글머리 기호 뒤에 오고 요소 표시는 <li> (목록 항목) 요소가 선택되었음을 나타냅니다. 현재 HTML에서 단일 <li> 요소는 한 쌍의 <ul> 태그 안에 중첩됩니다.
fig12
그림 12. 단락은 단일 항목의 비순차 목록으로 변환되었습니다.
  1. 라이브 뷰에서 목록 항목이 선택된 상태에서 자리 표시자 텍스트 안의 아무 곳이나 두 번 클릭하여 편집 모드를 시작합니다. 모든 자리 표시자 텍스트를 선택하고 Home으로 바꿉니다.

  2. 편집 모드에서 Enter/Return 키를 누르고 Sights를 입력합니다.

  3. 동일한 작업을 세 번 반복하여 Dining, Events, Lodging을 글머리 기호 목록에 추가합니다.

  4. 주황색 테두리 밖을 클릭하여 편집 모드를 종료합니다. 이제 페이지는 그림 13과 같이 표시됩니다.
fig13
그림 13. 비순차 목록은 나중에 내비게이션 메뉴로 변환됩니다.
  1. index.html을 저장합니다.

Microsoft Word의 텍스트 복사 및 붙여넣기

Dreamweaver는 워드 프로세서가 아니라 웹 개발 환경입니다. 라이브 뷰에서 바로 많은 양의 텍스트를 입력하면 시간이 소요됩니다. 그러나 Dreamweaver는 Microsoft Word 문서를 정확한 HTML로 변환하므로 머리글, 단락, 글머리 기호 및 번호 매기기 목록과 굵게 및 기울임체를 그대로 유지할 수 있습니다.

지금 사용해볼 기법은 Microsoft Word를 사용하여 문서를 HTML로 저장하는 것과 다른 방법입니다. Word는 생성되는 HTML에 많은 전용 코드를 추가하지만 Dreamweaver는 Word의 텍스트를 복사하여 붙여넣을 때 불필요한 모든 코드를 자동으로 제거하여 깔끔한 HTML만을 표시합니다.

Microsoft Word가 없더라도 걱정하지 마십시오. 샘플 파일에 RTF 파일의 텍스트 콘텐츠가 포함되어 있습니다. RTF 파일을 사용하는 방법에 대한 지침 사항은 이 섹션 다음에 제공됩니다. Word 대신 Open Office 또는 Libre Office를 사용하지 마십시오. OpenDocument Format에서 붙여넣으면 정리하기 어려운 불필요한 코드가 추가됩니다.

  1. 파일 패널에서 content 폴더를 확장하고 index.docx를 두 번 클릭하여 Microsoft Word에서 파일을 엽니다.

  2. 저작권 고지까지 모든 텍스트를 선택하고 클립보드에 복사합니다.

  3. Dreamweaver로 돌아가 라이브 뷰에서 모든 비순차 목록이 선택되어 있는지 확인합니다. 이 목록 안의 아무 곳이나 클릭한 다음 그림 14와 같이 문서 창의 하단에 있는 태그 선택기에서 ul을 클릭하면 요소 전체를 선택할 수 있습니다.
fig14
그림 14. 태그 선택기는 HTML 구조에서 현재 선택 영역이 있는 위치를 표시합니다.
  1. 편집 > 선택하여 붙여넣기를 선택하거나 키보드 단축키인 Ctrl+Shift+V(Windows) 또는 Command+Shift+V(Mac)를 사용합니다. 그러면 선택하여 붙여넣기 대화 상자가 표시됩니다(그림 15 참조).
fig15
그림 15. 선택하여 붙여넣기는 Dreamweaver가 외부 문서에서 붙여넣는 내용을 제어합니다.
  1. 세 번째 라디오 버튼인 기본 서식(굵게, 기울임체)이 적용된 구조적 텍스트를 선택하고 Word 단락 구분 정리라는 체크 상자가 선택되어 있는지 확인합니다. 그런 다음 확인을 클릭합니다.

  2. Dreamweaver는 선택한 요소(비순차 목록) 뒤에 텍스트를 붙여넣고 정확한 HTML 태그를 사용하여 단락 및 머리글의 서식을 지정합니다.

참고: 동일한 색상과 글꼴을 사용할 경우라도 전체 서식이라는 네 번째 라디오 버튼은 선택하지 마십시오. 이 경우 많은 양의 Microsoft 전용 코드가 HTML 페이지에 복사되어 CSS를 사용하여 페이지 스타일을 지정하기가 매우 어렵게 됩니다.

  1. 라이브 뷰에 있는 텍스트 중 아무 곳이나 클릭하여 첫 번째 단락("Bayside Beat keeps you…"로 시작하는)을 선택합니다. 요소 표시는 <p> 요소(단락)임을 나타냅니다. 코드 뷰를 보면 텍스트는 한 쌍의 <p> 태그 안에 감싸게 되어 있습니다.

  2. 붙여넣은 텍스트가 요소 표시가 없고 현재 코드에 태그가 없는 경우는 Word 문서의 콘텐츠를 붙여넣을 때 코드 뷰가 선택된 상태가 아니었기 때문입니다. Ctrl+Z(Windows) 또는 Command+Z(Mac)를 눌러 붙여넣기 작업을 실행 취소합니다. 그런 다음 붙여넣기 전에 라이브 뷰에서 비순차 목록을 선택합니다.

  3. 텍스트 중 아무 곳이나 클릭하여 첫 번째 머리글인 Ride the Cable Cars를 선택합니다. 요소 표시는 <h2> 요소(두 번째 상위 머리글)임을 나타내고 현재 코드에서 텍스트는 <h2> 태그 사이에 감싸게 되어 있습니다(그림 16 참조).
fig16
그림 16. 머리글은 Word에서 붙여넣을 때 자동으로 서식이 지정됩니다.

    Word에서 머리글은 머리글 2로 스타일이 지정되어 있으므로 Dreamweaver는 자동으로 동일한 HTML 태그를 적용했습니다.

  1. 저작권 고지의 텍스트 중 아무 곳이나 클릭합니다. 페이지의 마지막 단락이고 요소 표시는 그림 17과 같이 단락임을 나타냅니다.
fig17
그림 17. 요소 표시에서 저작권 고지가 단락으로 서식이 지정되었음을 확인할 수 있습니다.
  1. 요소 표시가 없으면 코드 뷰에서 저작권 고지 텍스트를 선택하여 서식을 조정해야 합니다. 그림 18과 같이 속성 관리자의 서식 드롭다운 메뉴에서 단락을 선택합니다.
fig18
그림 18. 마지막 텍스트 줄을 단락으로 서식을 지정해야 할 수 있습니다.

이와 같은 경우가 발생하는 이유는 Dreamweaver에서 Word의 단락, 머리글 및 기타 텍스트 요소의 행 분리에 따라 사용할 HTML 태그 유형을 결정하기 때문입니다. Word 문서에서 텍스트를 선택할 때 항상 줄 끝까지 선택합니다. 그림 19와 같이 텍스트의 마지막 뒤에는 약간의 공백이 있습니다.

fig19
그림 19. Microsoft Word에서 복사할 때에는 텍스트 끝에 있는 공백도 선택합니다.
  1. index.html을 저장합니다.

이러한 방식이 라이브 뷰에서 바로 텍스트를 모두 입력하는 것보다 훨씬 빠르다는 데에 동의하실 것입니다. Dreamweaver는 선택하여 붙여넣기 대화 상자의 설정을 인식하므로 앞으로 일반적인 키보드 단축키인 Ctrl+V(Windows) 및 Command+V(Mac)를 사용하여 라이브 뷰에 직접 붙여넣을 수 있습니다. 라이브 뷰에 붙여넣기 전에 새로운 콘텐츠 바로 전에 들어갈 요소를 선택해야 합니다.

코드 뷰에서 현재 HTML을 자세히 보면 여러 &rsquo; 인스턴스를 확인할 수 있습니다 Word 문서의 텍스트에서 사용된 둥근 따옴표는 Dreamweaver에서 직선 따옴표에 해당하는 HTML 문자 엔티티로 변환됩니다.

Microsoft Word의 콘텐츠를 붙여넣었다면 다음 섹션에서 텍스트 요소의 요소 표시를 사용하여 서식을 변경할 수 있는 유용한 방법을 살펴봅니다.

빠른 속성 관리자를 사용하여 텍스트 요소의 서식 지정

Microsoft Word 또는 Word Viewer가 설치되어 있지 않은 경우 RTF 파일에서 텍스트 콘텐츠를 복사하여 붙여넣은 다음 모든 텍스트는 단락으로 서식이 지정되어 있으므로 머리글의 서식을 지정합니다

  1. 파일 패널에서 content 폴더를 확장하고 index.rtf 파일을 마우스 오른쪽 버튼으로 클릭합니다. 이때 표시되는 메뉴에서 외부 편집기로 열기 > 검색을 선택하고 TextEdit와 같은 텍스트 편집기를 선택합니다.

  2. 이 파일에는 index.docx 안에 있는 콘텐츠와 동일한 콘텐츠가 포함되어 있지만 각 단락과 머리글 다음에는 공백이 있습니다. 이 공백은 Dreamweaver에서 텍스트의 서식을 단락으로 정확하게 지정하려면 필요합니다.

  3. 파일의 처음부터 끝까지 선택하고 저작권 고지 다음에 오는 줄까지 텍스트를 포함합니다. 선택한 텍스트를 클립보드에 복사합니다.

  4. Dreamweaver로 돌아가 라이브 뷰에서 비순차 목록이 선택되어 있는지 확인합니다. 이 방법은 이전 섹션의 3단계와 그림 14를 참조하십시오.

  5. 편집 > 선택하여 붙여넣기를 선택하거나 키보드 단축키인 Ctrl+Shift+V(Windows) 또는 Command+Shift+V(Mac)를 사용합니다. 그러면 선택하여 붙여넣기 대화 상자가 표시됩니다. 그림 20과 같이 Microsoft Word에서 텍스트를 붙여넣는 것이 아니므로 마지막 두 개의 라디오 버튼과 두 번째 체크 상자는 비활성화됩니다.
fig20
그림 20. Microsoft Word에서 붙여넣지 않을 때 일부 옵션이 비활성화됩니다.

    두 번째 라디오 버튼인 구조적 텍스트(단락, 목록, 표 등)이 선택되어 있는지 확인합니다. 또한 "행 분리 유지"라는 체크 상자를 선택 해제합니다. 그런 다음 확인을 클릭하면 Dreamweaver에서 단락으로 서식을 지정한 모든 텍스트가 붙여넣어 집니다.

  1. RTF 파일에서 붙여넣는 경우 Dreamweaver에서 머리글을 인식하지 않습니다. 따라서 "Riding the Cable Cars"라는 단락 중 아무 곳이나 클릭합니다.

  2. 요소 표시의 왼쪽에 있는 햄버거 아이콘을 클릭하여 빠른 속성 관리자를 표시합니다. 그런 다음 그림 21과 같이 형식 드롭다운 메뉴에서 h2를 선택합니다. 그러면 단락이 두 번째 상위 머리글로 변환됩니다.

 

fig21
그림 21. 빠른 속성 관리자를 사용하여 라이브 뷰에서 텍스트 요소의 서식을 지정할 수 있습니다.
  1. 두 번째 머리글인 Cable Car Tips에서 이전 단계를 반복합니다.

  2. 페이지 맨 아래에 있는 저작권 고지를 선택하여 단락으로 서식이 지정되었는지 확인합니다. 필요한 경우 이전 섹션의 9단계에서 설명한 바와 같이 서식을 조정합니다.

RTF 파일의 텍스트 콘텐츠를 복사하고 붙여넣는 것은 매우 간단합니다. 명심해야 할 중요한 점은 다음과 같습니다.

  • 각 단락 또는 머리글 사이에 두 개의 빈 줄이 생깁니다.

  • 빈 줄을 복사하여 마지막 단락 뒤에 넣습니다.

  • 편집 > 선택하여 붙여넣기 또는 Ctrl+Shift+V(Windows) 또는 Command+Shift+V(Mac)를 사용한 다음 행 분리 유지 체크 상자를 선택 해제합니다. Dreamweaver는 설정을 인식하고는 있지만 Ctrl+V 또는 Command+V를 사용하여 RTF 파일의 콘텐츠를 붙여넣으면 현재 HTML에 행 분리가 추가됩니다.

  • 요소 표시에서 햄버거 아이콘을 클릭하여 빠른 속성 관리자에 액세스한 다음 단락을 HTML 머리글로 변환합니다.

다음 단계로

이제 Bayside Beat의 홈 페이지는 모든 텍스트 콘텐츠가 포함되지만 매우 단조로워 보입니다. 브라우저에서 페이지를 로드하면 단락이 뷰포트의 전체 너비까지 확장됩니다. CSS를 사용하여 제어할 수 있지만 다른 HTML 구조 요소를 추가하여 페이지를 논리적 그룹으로 나누어 스타일을 지정해야 합니다. 이 방법은 제3장: 구조적 요소 및 링크 추가에서 살펴봅니다.

04/16/2018

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

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