두 번째 페이지 완성과 태블릿 및 데스크탑용 사이트의 스타일 지정

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

소개

Dreamweaver 2015에서 간단한 반응형 웹 사이트를 만드는 방법에 대한 이 튜토리얼 시리즈의 제7장을 시작합니다. 이제 고지가 머지않았습니다. 두 번째 페이지를 완성한 다음 Bayside Beat 웹 사이트의 1열로 된 레이아웃(그림 1 참조)을 태블릿 및 데스크탑에 적합한 2열 레이아웃으로 조정하면 됩니다.

큰 화면 해상도에 다른 레이아웃을 전달하기 위해서는 CSS 미디어 쿼리를 사용합니다. 미디어 쿼리는 뷰포트의 최소 또는 최대 너비와 같은 특정 기준에 따라 브라우저에 적용되는 다양한 스타일 규칙을 테스트합니다. 이 작업을 간소화하려면 두 개의 미디어 쿼리를 만들어야 합니다. 하나는 화면 폭이 최소 700px인 경우 페이지가 2열로 된 레이아웃으로 표시되는 미디어 쿼리이고 또 다른 하나는 화면 폭이 최소 900px인 경우 일부 이미지 주위로 텍스트가 자동 조정되는 미디어 쿼리입니다. 이 장을 완료하면 홈 페이지는 그림 2와 같이 표시됩니다.

이 과정에서 절대 위치 사용과 관련된 문제를 방지할 수 있는 방법을 살펴봅니다. 먼저 아직 스타일이 지정되어 있지 않은 두 번째 페이지를 완성해 봅니다.

두 번째 페이지의 스타일 지정

외부 스타일 시트를 사용하면 스타일이 연결되어 있는 모든 페이지에 즉시 적용되는 장점이 있습니다. 스타일 시트를 sights.html에 연결한 다음에는 두 번째 페이지의 내비게이션 메뉴를 업데이트해야 합니다.

1. 파일 패널에서 sights.html 두 번 클릭하여 문서 창에 엽니다.
   
   
2. CSS 디자이너로 전환한 다음 소스 창의 왼쪽 상단에 있는 + 버튼을 클릭하고 기존 CSS 파일 첨부를 선택합니다(그림 3 참조).

3. 대화 상자에서 탐색 버튼을 클릭하여 styles 폴더에서 responsive.css를 찾습니다. 확인(Windws) 또는 열기(Mac)를 클릭한 다음 확인을 클릭하여 첫 번째 대화 상자를 닫습니다.
   
   스타일 시트를 첨부하면 페이지 모양이 바로 바뀝니다. 또한 Dreamweaver는 스타일이 Adobe Edge Web Font를 사용하는지 감지하고 코드를 삽입하여 다운로드합니다.
   
   
4. 내비게이션 메뉴는 비순차 목록으로 표시되어 있습니다. DOM 패널에서 비순차 목록을 선택합니다.(이 목록은 header 요소와 nav 요소 안에 중첩되어 있습니다). ul 요소를 두 번 클릭한 다음 오른쪽 필드에 #navlinks .displayed를 입력하여 편집합니다. ID 및 클래스에 대한 코드 힌트가 표시됩니다(그림 4 참조).

내비게이션 메뉴의 스타일이 다시 지정되고 첫 번째 머리글과 다음 단락이 절대 위치에 배치되었습니다. 라이브 뷰의 폭이 1000px 이상인 경우 반투명한 배경이 오른쪽에 있는 wrapper <div>;까지 확장되는 것에 대해 걱정하지 않아도 됩니다. 이 현상은 2열로 된 레이아웃에서는 표시되지 않습니다.

5. DOM 패널에서 ul 요소를 확장한 다음 두 번째 li 요소를 확장하고 안에 중첩되어 있는 a 요소를 선택합니다. 라이브 뷰에서 SIGHTS 링크가 선택되는데, 정확한 요소가 선택되었는지 확인할 수 있습니다.
   
   DOM 패널에서 a 요소를 두 번 클릭한 다음 thispage 클래스를 할당합니다(그림 5 참조).

Enter/Return 키를 눌러 편집 내용을 적용하면 요소 표시에 클래스가 표시되고 두 번째 링크의 색상이 변합니다(그림 6 참조).

6. 내비게이션 메뉴를 완성하려면 트리거 링크 및 JavaScript 파일을 추가해야 합니다. 이 추가 작업을 위한 여러 방법이 있는데, DOM 패널에서 작업하고 있으므로 여기에서 추가해 봅니다.
   
   문서 창에서 index.html을 활성 페이지로 선택한 다음 DOM 패널에서 h2 #menulink를 마우스 오른쪽 버튼으로 클릭한 다음 표시되는 메뉴에서 복사를 선택합니다(그림 7 참조).

7. sights.html로 돌아가 DOM 패널에서 nav 요소를 선택하고 마우스 오른쪽 버튼으로 클릭한 다음 자식으로 붙여넣기를 선택합니다.
   
   주의: 자식으로 붙여넣기가 아닌 붙여넣기를 클릭하면 트리거 링크가 nav 요소의 형제(즉, HTML 계층 구조의 동일한 레벨)로 삽입되므로 DOM 패널에서 ul 요소 바로 아래에 표시됩니다. 그러나 비순차 목록은 절대 위치에 배치되어 일반 문서 흐름에서 제거되므로 라이브 뷰에서 정확한 위치에 표시됩니다.
   
   DOM 패널에서 h2 #menulink가 그림 8과 같이 비순차 목록 위에 있는 nav 요소에 올바로 중첩되어 있는지 확인합니다.

h2 #menulink가 비순차 목록 아래에 있는 경우 Ctrl+Z(Windows) 또는 Command+Z(Mac)를 눌러 실행 취소합니다. 그런 다음 nav 요소를 다시 선택한 다음 마우스 오른쪽 버튼으로 클릭하여 자식으로 붙여넣기를 선택합니다.

8. 다시 index.html로 돌아가 DOM 패널의 하단에 있는 script 요소를 마우스 오른쪽 버튼으로 클릭한 다음 표시되는 메뉴에서 복사를 선택합니다.
   
   
9. sights.html로 돌아가 DOM 패널에 있는 footer 요소를 마우스 오른쪽 버튼으로 클릭한 다음 표시되는 메뉴에서 붙여넣기를 선택합니다.
   
   이때 자식으로 붙여넣기가 아니라 붙여넣기를 선택합니다. 그러면 스크립트가 바닥글 안에 중첩되는 것이 아니라 바닥글 뒤에 오게 됩니다.
   
   스크립트가 첨부되면 내비게이션 메뉴가 index.html에서와 동일한 방식으로 숨겨집니다. 문서 창의 폭이 1000px 이상인 경우 스크립트를 첨부하면 라이브 뷰에서 wrapper가 왼쪽으로 치우쳐 표시될 수 있습니다. 이러한 경우 F5를 눌러 페이지를 새로 고칩니다.
   
   
10. sights.html을 저장합니다.

제3장에서 미완성된 버전의 내비게이션 메뉴를 복사하여 여기에서 업데이트하는 것보다 먼저 완성했으면 더 좋았을 것이라고 생각할 수 있습니다. 실제로 웹 개발 작업은 매끄럽게 진행되지 않습니다. 여러분이나 여러분의 클라이언트가 새로운 아이디어 또는 요구 사항이 있는 경우를 대비하여 요소를 다른 페이지에 복사하는 방법을 알고 있어야 합니다. 이는 요소가 올바로 중첩되는지 확인하기 위한 중요한 연습이기도 합니다. 이 페이지는 스크립트가 바닥글 안에 중첩되어 있어도 아무런 문제 없이 작동할 것이지만 올바로 중첩되지 않은 코드는 문제를 일으키는 경우가 많습니다. 코드가 체계적으로 구성되면 훨씬 수월하게 문제를 해결할 수 있습니다.

트리거 링크에서 글꼴 수정

이전 섹션에서는 index.html과 sights.html을 여러 번 오가면서 작업했습니다. 관찰력이 뛰어나신 분들이라면 이 두 페이지의 트리거 링크가 다르다는 점을 이미 아셨을 것입니다. index.html의 MENU 텍스트는 sights.html의 MENU 텍스트보다 얇습니다(그림 9 참조).

이러한 차이가 발생하는 이유는 body에 적용한 글꼴이 font-weight가 400(표준)으로 설정된 source-sans-pro로 정의되어 있기 때문입니다. 제4장에서 이 스타일 규칙을 만들 때 Dreamweaver는 처음에 font-weight를 200(얇게)으로 설정했습니다. 즉, index.html에서 Adobe Edge Web Font를 로드하는 스크립트가 두 개의 두께를 다운로드합니다. 그러나 스타일 시트를 sights.html에 첨부하면 Dreamweaver는 표준 font-weight의 source-sans-pro만을 인식합니다. 이 문제를 해결하려면 다른 두께를 사용하는 스타일을 조정해야 합니다.

1. 문서 창에서 sights.html을 활성 페이지로 선택한 상태에서 CSS 디자이너의 선택기 창에서 #menulink a를 선택합니다.
   
   
2. 필요한 경우 속성 창에서 세트 표시를 선택 해제하고 아이콘을 클릭하여 텍스트 속성으로 이동하고 font-family를 source-sans-pro로 설정합니다. 그러면 <head> 섹션에서 Edge Web Fonts를 다운로드하는 스크립트가 업데이트됩니다.
   
   
3. 다시 index.html로 돌아가 CSS 디자이너의 선택기 창에서 #hero p의 스타일 규칙을 선택합니다. 이 규칙에서는 font-weight가 600으로 설정되어 있습니다. 이 값은 표준 font-weight보다 두꺼우므로 브라우저(라이브 뷰 포함)는 해당 글꼴을 약간 굵게 인식하지만 이것은 원하는 결과가 아닙니다. 이 규칙에 대한 font-family를 source-sans-pro로 설정합니다. 이제 이 단락의 텍스트가 훨씬 깔끔하게 보입니다.
   
   
4. 이러한 변경 내용은 다른 파일에도 적용되었으므로 파일 > 모두 저장을 선택합니다.
   
   
5. Dreamweaver에서는 sights.html에서 Web Fonts를 업데이트할지를 묻는 메시지가 표시됩니다(그림 10 참조).

6. 업데이트를 클릭하고 업데이트가 완료되었음을 알리는 대화 상자가 표시되면 닫기를 클릭하여 대화 상자를 닫습니다. Dreamweaver는 업데이트한 파일을 자동으로 저장합니다.

보통 본문 외에 스타일 규칙에서 font-family를 지정해야 하는 경우는 다른 글꼴을 사용하려는 경우밖에 없습니다. 그러나 이 경우 Adobe 서버에서 다운로드해야 하는 Edge Web Font를 사용하고 있습니다. 다운로드 크기를 최대한 줄이기 위해 Dreamweaver는 현재 사용 중인 것으로 인식하는 두께만을 가져옵니다. index.html에서는 약간 굵게(600)만 사용되고 있지만 sights.html을 방문할 때 별도의 font-weight가 브라우저 캐시에서 저장되므로 부담을 초래할 위험은 없습니다. 그러나 많은 웹 글꼴을 사용하고 있는 경우(권장하지 않음) 사용하지 않는 글꼴을 다운로드하는 것은 재고해야 합니다.

로컬 소스의 이미지 삽입

제5장에서 Bayside CC Libraries를 통해 바로 이미지를 <figure> 요소에 삽입했습니다. 그러나 로컬 시스템에 저장되어 있는 이미지를 사용하는 경우가 많습니다. 이 섹션에서는 다른 방법을 통해 sights.html에 두 개의 이미지를 추가해 봅니다. 이 과정은 제5장에서 사용한 것과 매우 유사하므로 최대한 간단하게 설명합니다.

1. CC Libraries 패널에서 alcatraz라는 이미지를 마우스 오른쪽 버튼으로 클릭한 다음 표시되는 메뉴에서 연결되지 않은 항목 다운로드를 선택합니다.
   
   
2. 이때 표시되는 대화 상자에서 이미지 형식을 JPEG로 변경하고 400 x 266으로 리샘플링합니다.
   
   
3. 앞의 두 단계를 반복하여 cable_car2라는 이미지를 다운로드합니다. 제1장에서 이미지를 기본 이미지 폴더로 정의했으므로 두 이미지는 CC Libraries에서 추출되어 Bayside Responsive 사이트의 이미지 폴더로 다운로드되어 있습니다.
   
   
4. 라이브 뷰에서 sights.html의 첫 번째 단락("The precipitous hills…"로 시작하는 단락)을 선택합니다.
   
   
5. 삽입 패널의 HTML 섹션에서 Figure를 선택하여 중첩된 <figcaption>을 포함하여 <figure> 요소를 삽입합니다. 위치 지원 대화 상자에서 이후를 선택합니다.
   
   
6. <figure> 요소가 선택된 상태에서 다음 방법을 통해 cable_car2.jpg를 삽입합니다.
   
   
   • 삽입 패널의 HTML 섹션에서 Image를 클릭합니다.
   • 삽입 > Image를 선택합니다.
   • 키보드 단축키인 Ctrl+Alt+I(Windows) 또는 Command+Option+I(Mac)를 사용합니다.
      
7. 위치 지원 대화 상자에서 중첩을 선택하고 표시되는 대화 상자에서 cable_car2.jpg를 선택합니다.
   
   
8. 빠른 속성 관리자를 사용하여 이미지의 너비 및 높이를 제거합니다. <figure> 요소의 자리 표시자 텍스트를 삭제하고 caption 자리 표시자 텍스트를 The front seat of a cable car affords a great view of the city로 바꿉니다.
   
   
9. 세 번째 단락과 네 번째 단락 사이에 <figcaption>이 포함된 <figure> 요소를 삽입합니다.
   
   
10. 파일 패널에서 로컬 이미지를 드래그하여 놓을 수는 없지만 디자인 작업 영역에서 DOM 패널에 기본적으로 도킹되어 있는 에셋 패널에서는 드래그하여 놓을 수 있습니다.
    
    에셋 패널 탭을 클릭하여 열고 패널 왼쪽 상단에 이미지 아이콘이 선택되어 있는지 확인합니다(그림 11 참조).

필요한 경우 오른쪽 하단에 있는 원형 화살표를 클릭하여 패널 콘텐츠를 새로 고칩니다. 또한 아래 가장자리를 아래로 드래그하여 미리 보기 창의 크기를 늘릴 수 있습니다.

11. 파일 이름 목록 또는 미리 보기 창에서 alcatraz.jpg를 선택하고 라이브 뷰로 드래그합니다. 제5장에서 한 것과 동일한 방식으로 <figure> 요소 바로 위에 있는 녹색 선이 표시될 때까지 이미지를 드래그하고 일시 중지한 다음 표시되는 </> 아이콘으로 마우스 포인터를 이동합니다. 그런 다음 유동 DOM 패널에서 계속 드래그하다가 마우스 포인터가 figure 요소 위에 오면 마우스 버튼을 놓습니다(그림 12 참조). 그러면 figure 요소 안에 이미지가 중첩됩니다.

12. 빠른 속성 관리자를 사용하여 이미지의 너비 및 높이를 제거합니다. <figure> 요소의 자리 표시자 텍스트를 삭제하고 캡션 텍스트를 Alcatraz—former exclusive residence for notorious criminals로 바꿉니다.
    
    
13. Alcatraz 이미지를 선택하고 요소 표시에서 grayscale 클래스를 적용합니다(클래스를 할당하고 있음을 나타내기 위해 처음에 점을 붙인다는 점을 명심하십시오).
    
    
14. sights.html을 저장합니다.

미디어 쿼리를 추가하여 태블릿 및 데스크탑용 사이트의 스타일 지정

미디어 쿼리는 CSS에서 비교적 새로운 기능이지만 최신 브라우저라면 어디에서나 지원되고 있는 기능입니다. 널리 사용되는 브라우저 중 미디어 쿼리를 지원하지 않는 유일한 브라우저는 Internet Explorer 8 및 이전 버전으로, Microsoft에서도 공식적으로 지원하지 않으므로 이러한 이전 브라우저를 사용하는 사람들은 급격히 감소하고 있습니다. 미디어 쿼리의 가장 큰 장점이라면 화면, 방향, 픽셀 밀도 등과 같은 특정 기능에 따라 다양한 CSS 세트를 브라우저에 제공할 수 있다는 점입니다. 작업을 간소화하기 위해 모두 화면의 최소 너비를 기반으로 한두 개의 미디어 쿼리만 생성해 봅니다.

1. 더 이상 CC Libraries 패널은 필요 없으므로 CC Libraries 탭을 패널 그룹의 오른쪽에 있는 코드 단편 패널 옆으로 드래그합니다(그림 13 참조). 파란색 선이 표시될 때까지 패널 그룹 상단으로 이동시킵니다. 그런 다음 마우스 버튼을 놓아 다른 패널 옆에 고정시킵니다.

2. 문서 창의 폭이 700px이 될 때까지 라이브 뷰 스크러버를 드래그합니다. 이때 크기를 정확하게 조정하지 않아도 됩니다. 또한 이때 활성화되어 있는 문서가 index.html이거나 sights.html이거나 상관없습니다.
   
   
3. 문서 창의 상단에 있는 눈금자에서 아이콘을 클릭하여 팝업 패널을 열고 미디어 쿼리를 설정합니다(그림 14 참조).

4. 드롭다운 메뉴에서 min-width를 선택하고 min-width 필드 값을 700px로 설정한 다음 마지막 드롭다운 메뉴에서 responsive.css를 선택합니다. 지금까지 적용한 설정이 그림 15와 같은지 확인하고 확인을 클릭합니다.

5. 문서 창의 상단에 있는 비주얼 미디어 쿼리 바가 보라색으로 표시됩니다. 이 바를 클릭하여 문서 창의 폭을 정확하게 700px로 설정합니다.
   
   
6. CSS 디자이너의 상단에 전체 버튼이 선택되어 있는지 확인합니다. 소스 창에서 responsive.css를 선택하고 @미디어 창을 확장하면 이제 미디어 쿼리가 표시됩니다. 이 미디어 쿼리를 선택하면 선택기 창에는 아무것도 표시되지 않습니다(그림 16 참조).

7. @미디어 창에서 전체를 클릭합니다. 제4장에서 제6장까지 만든 모든 선택기가 여기에 표시됩니다. 이러한 스타일은 화면 폭과 상관없이 모든 브라우저에 적용됩니다. 화면의 최소 폭이 700px일 때 덮어쓸 값만 변경할 경우 미디어 쿼리를 사용합니다.
   
   
8. 파일 > 관련 파일 모두 저장을 선택하여 작업 내용을 저장합니다.

여러 미디어 쿼리를 사용하면 비주얼 미디어 쿼리 바의 실제 값이 표시됩니다. 위의 행은 max-width 쿼리를 녹색 바로 표시하고 중간 행은 최소 및 최대 쿼리를 파란색 바로 표시하며 아래 행은 min-width 쿼리를 보라색 바로 표시합니다. 해당 바를 클릭하면 문서 창의 크기가 조정되므로 여러 스타일 규칙의 효과를 볼 수 있습니다. 비주얼 미디어 쿼리 바에 대한 자세한 내용은 온라인 설명서를 참조하십시오. 

2열로 된 레이아웃을 위한 내비게이션 메뉴의 스타일 지정

내비게이션 메뉴는 항상 2열로 된 레이아웃으로 표시됩니다. 이제 선택기 및 스타일 규칙을 생성하는 방법을 살펴보았으므로 이 방법은 간략하게 설명합니다.

1. 문서 창의 최소 폭을 700px로 설정합니다. 이때 활성 파일이 index.html이거나sights.html이거나 상관없습니다. 라이브 뷰에서 내비게이션 트리거 링크 안의 아무 곳이나 클릭하여 선택합니다.
   
   
2. CSS 디자이너에서 전체 버튼이 선택되어 있는지 확인하고 소스 창에서 responsive.css를 선택한 다음 @미디어 창에서 (min-width: 700px)를 선택합니다. 선택기 창에는 아무것도 표시되어 있지 않습니다(그림 16 참조).
   
   
3. 선택기 창에서 + 버튼을 클릭하고 #menulink 선택기를 만듭니다. 속성 창의 레이아웃 섹션에서 display 속성을 none으로 설정하면 메뉴 트리거 링크가 사라집니다.
   
   
4. 라이브 뷰 스크러버를 왼쪽으로 드래그하여 페이지 폭을 700px로 줄이면 트리거 링크가 다시 표시됩니다. 반대 방향으로 다시 드래그하면 페이지 폭이 700px이 되면서 링크가 사라집니다.
   
   
5. @미디어 창에서 미디어 쿼리가 선택된 상태에서(이는 모든 다음 변경 내용에 적용) #navlinks 선택기를 만들고 다음의 속성 및 값을 설정합니다.

position 속성을 static으로 변경하면 내비게이션 링크의 비순차 모록이 더 이상 절대 위치에 배치되지 않고 페이지에서 표준 위치로 표시되므로 다른 페이지 콘텐츠가 아래로 내려갑니다. menu.js의 JavaScript를 통해 collapsed 클래스가 다이내믹하게 적용되었으므로 아직 링크가 표시되지 않습니다.

6. #navlinks.collapsed(점 주위에 공백 없음) 선택기를 만들고 opacity 속성을 1로 설정합니다. 메뉴가 다시 표시되지만 이전 단계에서 background-color를 투명하게 설정했으므로 thispage 링크만 표시됩니다. 흰색 배경의 흰색 링크는 볼 수 없습니다.
   
   
7. #navlinks a 선택기를 만들어 링크를 수정하고 다음의 속성 및 값을 설정합니다.

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

내비게이션 메뉴에는 5개의 링크가 있는데, 각 링크의 width를 20%로 설정하고 왼쪽으로 자동 조정되도록 설정하면 페이지 전체에 균등하게 표시됩니다. 5단계에서 max-width 속성을 1000px로 설정하면 wrapper <div> 밖으로 확장되는 것을 방지할 수 있습니다.

float 속성은 현재 블록 수준 요소를 가로로 정렬할 수 있는 가장 안정적인 방식입니다. 링크는 블록 수준 요소가 아니지만 제4장-제6장에서 만든 전체 스타일에서 링크의 display 속성을 block으로 설정했습니다.

절대 위치를 사용하여 이미지 위에 텍스트 배치

제5장에서 Golden Gate Bridge 이미지 아래에 오는 단락의 스타일을 아래 테두리가 있고 약간 굵은 분홍색 글꼴로 지정했습니다. 2열로 된 레이아웃의 경우 절대 위치를 사용하여 이미지 위에 배치하고 모든 측면에 테두리가 있으며 다른 색상으로 스타일을 지정해 봅니다. 또한 절대 위치를 지정할 때 일반적으로 범하는 실수를 방지할 수 있는 방법도 살펴봅니다.

1. 필요한 경우 index.html로 돌아가 비주얼 미디어 쿼리 바에 있는 보라색 바를 클릭하여 문서 창의 폭을 700px로 설정합니다.
   
   페이지의 상단에 있는 눈금자가 올바로 설정되어 있지 않은 경우 index.html을 닫고 다시 엽니다. 폭이 700x 미만인 화면에서 내비게이션 메뉴를 제어하는 JavaScript에서는 눈금자의 위치가 한쪽으로 치우쳐 표시되기도 합니다.
   
   
2. 라이브 뷰에서 Golden Gate Bridge 이미지 바로 아래에 있는 단락을 선택합니다. CSS 디자이너에서 responsive.css와 미디어 쿼리가 선택된 상태에서 #hero p 선택기를 만들고 다음의 속성 및 값을 설정합니다.

position 속성을 absolute로 설정하면 "Riding the Cable Cars" 머리글과 다음에 오는 텍스트는 스타일을 지정할 단락 뒤에서 표시됩니다. 절대 위치는 일반 문서 흐름에서 요소를 제거하고 다른 요소 앞에 있는 레이어에 배치합니다.

3. position 속성 바로 아래에 있는 시각적 툴을 사용하여 위쪽과 오른쪽 오프셋을 설정하여 단락을 Golden Gate Bridge 이미지 위로 이동시킵니다. 오프셋에 양의 값을 설정하면 요소의 해당 측면이 컨테이너 블록의 동일한 측면에서 멀어집니다.
   
   이때 제5장에서 살펴본 스크러빙 기법을 사용하면 해결됩니다. 측정 단위로 px을 선택한 다음 커서가 양방향 화살표로 변할 때까지(그림 18 참조) 마우스 포인터를 값 위 또는 바로 아래에 놓습니다. 그런 다음 값을 높이려면 오른쪽으로 드래그하고 값을 낮추려면 왼쪽으로 드래그합니다.

4. color 속성을 white로 설정하고 모든 측면의 테두리 폭을 5px과 solid로 설정합니다. 그림 19는 Golden Gate Bridge 이미지 위에 단락이 어떻게 배치되는지를 보여줍니다.

5. 라이브 뷰의 측면에 있는 회색 영역을 두 번 클릭하여 문서 창 전체를 채웁니다. 모니터가 클수록 결과는 더 나쁘게 표시됩니다(그림 20 참조).

대부분 사람들의 첫 반응은 절대 위치에 배치된 요소가 이동했다고 생각합니다. 하지만 그렇지 않습니다. 위쪽과 오른쪽의 오프셋은 여전히 동일합니다. 문제는 이 오프셋이 배치된 요소의 컨테이너 블록을 기준으로 계산되었다는 데에 있습니다. 이 단락은 hero <div> 안에 중첩되어 있습니다. 과연 컨테이너 블록도 그럴까요?

이는 너무나 자연스러운 가정입니다. 그러나 CSS 사양에 따르면 배치된 요소의 컨테이너 블록도 위치가 지정되어야 합니다. 이러한 요소가 없는 경우 페이지가 컨테이너 블록이 됩니다. 따라서 36% 폭은 hero <div>가 아니라 페이지와 관련이 있으며, 이 오프셋은 페이지의 위쪽과 오른쪽을 기준으로 계산된 것입니다.

6. 이 문제는 매우 간단하게 해결할 수 있습니다. #hero에 대한 새 선택기를 만들고 position 속성을 relative로 설정합니다. 그러면 parent <div>가 절대 위치에 배치된 단락의 컨테이너 블록이 되고 오프셋은 더 이상 페이지의 위쪽과 오른쪽을 기준으로 계산되지 않습니다.
   
   
7. #hero p 선택기를 선택하고 top 속성을 약 90px로 재설정하여 단락의 위치를 조정합니다. 전체 히어로 이미지는 그림 21과 같이 표시됩니다.

폭이 700px이 화면에서 텍스트는 그림 19와 같이 동일한 위치에 표시됩니다.

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

요소의 position 속성을 relative로 설정하면 주위 요소에 영향을 주지 않고 페이지에서 표준 위치를 기준으로 채울 수 있습니다. 이 경우 hero <div>에 대해서는 오프셋이 설정되어 있지 않으므로 움직이지 않습니다. 그러나 hero <div>는 배치된 요소이므로 절대 위치에 배치된 단락의 컨테이너 블록 역할을 합니다. 이상하게 보일 수 있지만 절대 위치는 이러한 방식으로 작동합니다.

이와 같이 텍스트를 이미지 위에 배치하는 작업 등 개별 작업의 경우 상대 위치와 절대 위치를 함께 사용하는 것도 유용합니다. 그러나 웹 페이지 전체의 레이아웃을 지정하는 것은 현명한 선택이 아닙니다. 웹은 유동적인 매개체이기 때문입니다.

다른 열과 나란히 유동적인 정렬

앞서 살펴본 바와 같이 내비게이션 링크를 가로로 정렬시킬 때 float 속성을 사용했습니다. 이 float 속성을 사용하는 것이 2열로 된 레이아웃을 생성하는 데 가장 안정적인 방법입니다. 요소가 왼쪽 또는 오른쪽으로 자동 조정될 때 해당 방향으로 이동하므로 뒤에 오는 요소도 함께 위의 빈 공간으로 올라갑니다. 요소가 자동 조정되도록 하려면 declared width 또는 max-width를 설정해야 합니다.

1. CSS 디자이너에서 responsive.css와 미디어 쿼리가 선택된 상태에서 main 선택기를 만들고 width 속성을 60%로 설정합니다.
   
   
2. aside 선택기를 만들고 width 속성을 28%로 설정합니다. 또한 왼쪽 여백을 0px로 설정합니다. 전체 스타일에서 상속받는 4% 여백을 덮어써야 합니다.
   
   <main> 요소의 경우 전체 스타일의 양쪽 여백을 4%로 상속받고 <aside> 요소의 오른쪽 여백은 여전히 4%로 설정되어 있습니다. 두 요소와 가로 여백의 폭을 모두 더하면 정확히 100%가 됩니다.
   
   
3. main, aside에 대한 그룹 선택기를 만듭니다. 다음의 속성 및 값을 설정합니다.

float 속성을 설정하면 마치 재해가 닥친 것처럼 대부분의 배경이 검정색으로 변합니다(그림 22 참조).

그러나 이러한 현상은 정상입니다. 절대 위치에 배치된 요소와 유사한 방식으로 문서의 주요 흐름에서 유동 요소가 제거되었습니다. <footer> 요소가 <main> 요소와 함께 위로 올라가고 배경은 유동 요소가 떠난 공간을 채우기 때문입니다. 이러한 문제는 쉽게 해결할 수 있습니다.

1.   footer 선택기를 만들고 clear 속성을 left로 설정하면 모든 것이 정상으로 돌아옵니다.

또 다른 방식은 flexbox라는 것으로, 2열로 된 레이아웃의 경우 사용할 수 있습니다. 이 방식은 모든 최신 버전의 브라우저에서 지원됩니다. 안타깝게도 여전히 사용 중인 많은 브라우저가 이전 버전의 flexbox 속성을 구현하여 안정적인 브라우저 간 구현을 어렵게 만들고 있습니다.

이미지 주위로 텍스트 배치

float 속성의 원래 목적은 이미지 주위로 텍스트를 배치하는 것이었습니다. 그러면 브라우저 뷰포트가 900px 이상인 경우 두 번째 미디어 쿼리를 만들고 sights.html에서 이미지 주위로 텍스트가 배치되도록 디자인을 완성해 봅니다.

1. sights.html로 전환하고 라이브 뷰 스크러버를 사용하여 라이브 뷰 크기를 약 900px로 조정합니다.
   
   
2. 눈금자에 있는 아이콘을 클릭하고 responsive.css에서 min-width: 900px에 대한 미디어 쿼리를 만듭니다(동일한 설정은 그림 23 참조).

3. 비주얼 미디어 쿼리 바에서 900px의 오른쪽을 클릭하여 라이브 뷰의 폭을 900px로 재설정합니다.
   
   
4. sights.html의 상단에 있는 케이블카 이미지를 선택한 다음 위쪽 화살표를 한 번 눌러 부모 <figure> 요소를 선택합니다. 요소 표시에 있는 + 버튼을 클릭합니다. 편집 가능한 필드에 .floatright를 입력하고 Tab 또는 Enter/Return 키를 눌러 클래스를 할당합니다. 팝업 패널에서 responsive.css가 선택되어 있는지 확인하고 두 번째 드롭다운 메뉴에서 min-width: 900px 미디어 쿼리를 선택합니다(그림 24 참조).

5. CSS 디자이너의 @미디어 창에서 min-width: 900px 미디어 쿼리를 선택한 다음 선택기 창에서 .floatright를 선택합니다. 이 클래스에 대해 다음의 속성 및 값을 설정합니다.

이 클래스를 할당하면 이후 단락의 텍스트가 이미지 및 캡션 왼쪽으로 배치됩니다(그림 25 참조).

이미지가 오른쪽으로 이동하지 않으면 이 이미지에 부모 <figure> 요소가 아니라 클래스를 적용한 것일 수 잇습니다.

5. Alcatraz 이미지에 4단계와 5단계를 반복하고, 이때 .floatleft라는 클래스를 만들고 다음의 값을 설정합니다.

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

뷰포트 메타 태그 설정

이제 반응형 디자인이 완성되었습니다. 완성된 사이트를 모바일 디바이스에 올바로 표시하기 전에 마지막으로 해야 할 작업이 하나 있습니다.

삽입 패널의 HTML 범주에서 뷰포트를 선택합니다(그림 26 참조). 뷰포트는 세 번째 섹션에서 약 2/3쯤에 있습니다.

이 작업은 sights.html과 index.html(기타 모든 반응형 페이지 포함) 모두에서 해야 합니다. 모바일폰은 자동으로 페이지 비율을 조정하는데, 이러한 기능이 없다면 미디어 쿼리를 무시하기 때문입니다.

다음 단계로

지금까지 수고하셨습니다. 이 과정에서 Dreamweaver 2015를 사용하는 방법은 물론이고 웹 디자인의 현주소까지 살펴볼 수 있었습니다. 일부 기법이 어렵다고 생각되면 다시 해당 장으로 돌아가 살펴보시기 바랍니다. HTML 및 CSS의 기본 사항을 익히는 것이 어려운 일은 아니지만 웹 디자인은 갈수록 복잡해지고 있습니다. 단숨에 전문가가 되려고 하지 마십시오. 그래픽 디자인에 일가견이 있는 많은 사람들은 자신들이 코드 작성자가 아니라 디자이너라고 주장할 때 이 점을 간과하게 됩니다. 웹 사이트를 구축하는 것도 디자인하는 것입니다. 즉, 코드를 사용하여 디자인하는 것입니다. Dreamweaver는 대부분의 코드를 자동으로 작성해 주지만 원하는 효과를 적용하기 위해서는 필요한 CSS 속성과 값을 알고 있어야 합니다.

레이아웃 및 디자인 문제에 대해 도움이 필요한 경우 주요 Dreamweaver 지원 포럼에 문제가 있는 웹 사이트의 페이지를 업로드하고 질문을 게시해 주십시오. 이때 게시물에 URL과 간략한 문제 설명까지 포함해 주시기 바랍니다. 그러면 많은 사람들이 적극 지원할 것입니다.

이 튜토리얼 시리즈의 마지막 장에서 웹 페이지 및 기타 에셋을 라이브 웹 서버에 업로드하는 방법을 살펴보세요.