Dreamweaver 2015에서 간단한 반응형 웹 사이트를 만드는 방법에 대한 이 튜토리얼 시리즈의 제5장을 시작합니다. 이전 장에서는 Bayside Beat 사이트의 홈 페이지 스타일을 코드 뷰와 CSS 디자이너에서 지정해 보았습니다. CSS 디자이너를 사용하는 경우 라이브 뷰에서 바로 결과를 확인할 수 있다는 장점이 있습니다. 이 장에서는 요소의 여백을 조정하고 화면 해상도에 따라 자동으로 크기가 조정되는 이미지를 추가하면서 웹 사이트 디자인을 시작해 봅니다.
패딩 및 여백을 사용하여 가로 및 세로 공백 제어
CSS는 요소의 가로 및 세로 공백을 제어하는 두 개의 속성을 제공하는데, 바로 패딩 과 여백 입니다. 경우에 따라 원하는 속성을 선택해도 상관없습니다. 이 두 속성은 모두 요소의 공백을 추가하지만 중요한 차이점이 있습니다. 여백은 요소의 전체 너비 또는 높이에 포함되지 않습니다(그림 1 참조). 이와 같은 사실은 기본 상자 모델을 사용하거나 제4장에서 생성한 코드 단편을 통해 덮어쓰거나 상관없이 변하지 않습니다.
다음 표는 패딩 및 여백이 다양한 기능에 미치는 영향을 요약해 놓은 것입니다.
기능
패딩
여백
배경
요소의 배경은 패딩까지 확장됨
부모 요소의 배경은 투명하게 표시됨
테두리
패딩은 안쪽에 추가됨
여백은 바깥쪽에 추가됨
축소
절대 축소되지 않음
인접한 세로 여백 축소
패딩 과 여백 은 요소의 공백을 넓히지만 여백 은 약간 다르게 작동합니다.
그림 2는 두 개의 요소가 서로 상하로 있는 경우를 나타낸 것입니다. 첫 번째 요소에는 20px 의 하단 여백 이 추가되어 있고 두 번째 요소에는 30px 의 상단 여백이 추가되어 있습니다.
자연스럽게 이 경우 두 요소 간의 세로 거리가 두 여백의 합, 즉 50px 이라고 가정하게 되지만 실제로는 그렇지 않습니다. 인접해 있는 세로 여백은 축소되거나 병합됩니다. 두 요소 간의 세로 거리는 두 여백 중 큰 값을 취하게 되고, 이 경우 30px 이 됩니다(그림 3 참조).
반면 패딩은 절대로 축소되지 않습니다. 이 예제의 경우 하단 여백과 상단 여백을 동일한 패딩 값으로 대체해 보면 두 요소의 콘텐츠 간의 거리는 50px 이 됩니다.
제4장에서 만든 스타일 규칙에서 body 및 wrapper
는 상단 여백이 0 으로 설정되어 있습니다. 페이지의 상단에 공백이 생기는 이유는 브라우저가 머리글을 비롯한 일부 요소에 기본 여백을 적용하기 때문입니다.
머리글의 기본 상단 여백은 wrapper
의 상단 여백 값인 0 과 결합하여 페이지의 상단에서 wrapper를 밀어낸 것입니다. 부모 요소의 배경은 항상 여백을 표시하므로 본문의 연한 파란색 배경을 확인할 수 있습니다. 반면 패딩은 절대로 축소되지 않습니다. 게다가 요소의 배경은 패딩 영역까지 확장됩니다. 이제 문제가 해결되었습니다. 아직 이유를 이해하지 못했다면 백문이 불여일견. 직접 해 보시기 바랍니다.
페이지 상단의 공백 제거 및 머리글의 스타일 지정
페이지 상단의 공백 문제를 해결하기 위해서는 기본 머리글의 상단 여백을 동일한 값의 패딩으로 대체해야 합니다. 동시에 다른 머리글의 스타일을 지정해야 합니다.
라이브 뷰에서 기본
머리글을 선택하고 CSS 디자이너의 소스 창에서 responsive.css 가 선택되어 있는지 확인합니다. 다음 선택기는 #wrapper 이므로 선택기 창에서 이 선택기를 선택합니다. 그런 다음 + 버튼을 클릭하여 새 선택기를 만듭니다.
머리글이 선택되어 있으므로 #wrapper header h1 이 선택기로 자동 제시됩니다. 이 선택기는 요소 안에 중첩되어 있는
요소를 찾는 특정 후손 선택기이며, 이 요소는 반대로 ID wrapper가 있는 요소 안에 중첩되어 있습니다. 선택기의 지정 범위를 좀 더 넓히려면 위쪽 화살표 키를 한 번 눌러 header h1으로 변경합니다. 이것도 너무 좁으면 위쪽 화살표 키를 한 번 더 눌러 h1으로 변경합니다. 이제 이 선택기는 페이지에 있는 모든
요소를 대상으로 합니다.
요소에도 동일한 규칙을 적용하려면 편집 가능한 필드에서 h1 의 오른쪽을 클릭하여 쉼표를 입력한 다음 h2 를 입력합니다. 그러면 선택기는 다음과 같이 표시됩니다.
h1, h2
위쪽 화살표 키를 눌러 선택기의 지정 범위를 넓히는 것은 Dreamweaver에서 해당 선택기에 대한 이름이 자동으로 제시될 때에만 사용할 수 있습니다. 필요한 경우 선택기를 두 번 클릭하여 편집 가능한 필드를 열고 group selector를 직접 입력합니다.
속성 창의 상단에 있는 아이콘을 클릭하고 새 선택기에 대한 다음의 텍스트 속성을 설정합니다.
이제 머리글은 기본 텍스트보다 더 어두은 회색으로 표시되지만 굵은체로 표시되지 않습니다.
기본 머리글 및 h1, h2 선택기가 선택된 상태에서 선택기 창에서 + 버튼을 클릭하고 위쪽 화살표 키를 두 번 눌러 h1 에 대한 선택기를 만듭니다. 레이아웃 섹션으로 이동하는 아이콘을 클릭하고 다음의 속성을 설정합니다(그림 4 참조).
그러면 머리글의 세로 공백은 그대로 유지되지만 배경은 body가 아니라 wrapper
때문에 생깁니다. 불필요한 연한 파란색의 띠가 사라집니다.
텍스트 섹션에서 다음의 속성 및 값을 설정합니다.
text-align 및 text-transform 속성은 아이콘을 사용하여 설정합니다(그림 5 참조). 속성을 알 수 없는 경우 마우스 포인터를 속성 위에 가져갑니다.
모두 대문자로 된 큰 기본 머리글이 가운데에 배치됩니다.
머리글 중 하나를 선택하고 위쪽 화살표를 두 번 눌러 제시된 선택기의 지정 범위를 좀 더 넓혀 h2 선택기를 만듭니다. 다음의 속성 및 값을 설정합니다.
margin-top: 0.5em
font-size: 2.25em
측정 단위로 em 을 사용하면 텍스트 및 상단 여백 크기가 페이지의 기본 본문에 있는 텍스트에 맞게 변경됩니다.
wrapper 안에 가로 공백 추가
wrapper
안에 있는 텍스트는 테두리에 가까이 붙어 있습니다. 양쪽에 일정한 공백을 추가할 수 있는 한 가지 방법은 가로 패딩을 추가하는 것입니다. 그러나 이렇게 하면 Golden Gate Bridge 이미지를 나중에 삽입할 때 hero
의 전체 너비를 채우지 못하게 됩니다. 그 대신 다음의 속성과 값으로 된 main, aside 의 그룹 선택기를 만듭니다(그림 6 참조).
변경 내용을 적용한 다음 파일 > 관련 파일 모두 저장 을 눌러 반드시 저장합니다.
CC Libraries의 이미지 및 캡션 삽입
이미지를 추가하여 페이지를 향상시켜 봅니다. 이 섹션에서는 CC Libraries에서 이미지를 다운로드한 다음 요소를 사용하여 캡션과 함께 index.html에 삽입합니다. 동시에 이미지 형식을 선택하고 크기를 조정해 봅니다.
분할 뷰에서 현재 HTML를 확인할 수 있습니다. 필요한 경우 관련 파일 툴바에서 소스 코드 를 클릭한 다음 라이브 뷰에서 머리글 "Riding the Cable Cars" 뒤에 오는 두 번째 단락을 선택합니다. "The cable cars rely…"로 시작되는 단락입니다.
삽입 패널을 연 다음 HTML 범주에서 Figure 를 클릭합니다.
위치 지원 대화 상자에서 이후를 선택하여 선택한 단락 뒤에 요소를 삽입합니다. 이 새로운 요소에는 이 안에 중첩되어 있고 이 두 요소에는 자리 표시자 텍스트가 포함되어 있습니다(그림 8 참조).
요소가 선택된 상태에서 CC Libraries 패널에 있는 cable_car1 이라는 이미지를 마우스 오른쪽 버튼으로 클릭합니다. 이때 표시되는 메뉴에서 연결되지 않은 항목 삽입 을 선택합니다. 위치 지원 대화 상자가 이미지를 삽입할 위치를 물으면 중첩 을 클릭하여 요소 안에 중첩시킵니다.
대화 상자에서는 사이트에서의 파일 위치, 이미지 형식 및 크기를 지정할 수 있습니다. 이 튜토리얼 시리즈의 제1장에서 이 이미지 폴더를 기본 이미지 폴더로 설정했으므로 src 필드는 이미지 폴더에 이미지를 저장하도록 자동 제시합니다. 이미지 이름은 CC Libraries에서 사용된 이름을 기반으로 제시됩니다. 두 방식 모두 좋지만 이미지를 PNG 32 형식으로 저장하면 파일 크기가 커집니다. 대화 상자의 오른쪽에 있는 드롭다운 메뉴를 열고 JPEG 를 선택합니다(그림 9 참조).
그러면 src 필드에서 파일 이름 확장명이 .jpg 로 변경됩니다.
너비가 3000px 이상인 경우 이미지 크기가 너무 크므로 W 필드 값을 400 으로 변경합니다. 기본적으로 W(너비) 및 H(높이) 필드 간의 링크 아이콘이 선택되므로 H 필드의 값은 자동으로 266 으로 자동 변경됩니다.
대화 상자에서 그림 10과 같이 값이 표시되는지 확인한 다음 확인 를 클릭합니다.
이 이미지는 요소 안에 삽입되고 현재 HTML에서 width 및 height 가 자동 설정됩니다. 그러나 반응형 레이아웃을 만들어야 하므로 이 값은 제거해야 합니다.
이미지가 선택된 상태에서 요소 표시에 있는 햄버거 아이콘을 클릭하여 빠른 속성 관리자(그림 11 참조)가 표시되면 width 및 height 필드 속성을 삭제하고 관리자 밖을 클릭하여 닫습니다.
요소의 자리 표시자 텍스트를 두 번 클릭하여 편집 모드를 시작하고 이 텍스트를 선택한 다음 Delete 키를 눌러 이미지 및 캡션 자리 표시자만 둡니다.
또한 Dreamweaver는 현재 HTML에서 태그의 alt="" 를 제거할 수 있습니다. 이러한 경우 출력 패널에 alt 속성값을 입력하라는 경고 메시지가 표시됩니다. alt 속성은 시각 장애인을 위한 화면 판독기와 같은 비시각적 브라우저의 대안 텍스트를 제공하기 위해 마련된 것입니다. 이미지가 캡션과 함께 삽입되거나 순 장식용으로 사용된 경우 alt 속성은 필요하지 않으므로 이 경고 메시지를 무시할 수 있습니다.
캡션 자리 표시자 텍스트를 두 번 클릭하여 The cable car terminus near Union Square 로 대체합니다.
index.html을 저장합니다.
CC Libraries 패널에서 표시되는 메뉴에는 삽입 및 다운로드를 위한 연결된 옵션 또는 연결되지 않은 옵션이 포함되어 있습니다. 연결되지 않은 옵션을 선택하면 사이트에 이미지의 로컬 버전이 생성됩니다. 연결된 옵션 중 하나를 선택하면 이미지가 Creative Cloud 라이브러리에서 변경될 때마다 로컬 버전도 자동으로 업데이트됩니다.
Creative Cloud에서 에셋 동기화
에 대한 자세한 내용을 살펴보십시오.
CC Libraries에서 이미지 드래그하여 놓기
index.html의 다른 이미지는 ID hero가 있는
안에 중첩되어야 합니다. 이 섹션에서는 CC Libraries 패널에서 바로 드래그 앤 드롭 방식으로 이미지를 페이지에 삽입하는 방법을 살펴봅니다. 이 기법은 처음에는 습득하기 어려울 수 있으므로 다음의 개괄적인 지침을 자세히 읽은 다음 직접 해 보시기 바랍니다.
문서 창의 왼쪽 상단에 있는 라이브 버튼을 클릭하여 분할 뷰를 닫습니다. 이때 단락이 글머리 기호 목록 바로 다음에 "Bayside Beat keeps…"로 시작하는지 확인합니다.
그림 12와 같이 DOM 패널에서 div #hero 요소만 확장하고 자식 요소가 중첩되어 있는 요소 중 대부분은 축소합니다. 그래야 이미지를 정확하고 손쉽게 배치할 수 있습니다.
CC Libraries 패널에서 golden_gate 라는 이미지를 선택하고 라이브 뷰로 드래그합니다. 이미지를 페이지에 가져오면 이미지 삽입 위치를 나타내는 가로로 된 녹색 막대가 표시됩니다. 녹색 막대가 글머리 기호 목록과 단락 사이에 표시되면 드래그를 멈춥니다. 이때 마우스 버튼은 아직 놓지 마십시오. 몇 초 후에 마우스 포인터의 오른쪽 하단에 작은 아이콘이 표시됩니다(그림 13 참조).
마우스 버튼이 눌러져 있는 상태에서 마우스 포인터를 아이콘에 가져가면 유동 버전의 DOM 패널이 표시됩니다. 녹색 선이 div #hero 요소와 다음 p 사이에 표시될 때까지 이 유동 패널 위를 계속 드래그합니다(그림 14 참조). 원하는 위치에 배치되면 마우스 버튼을 놓습니다.
그러면 로컬 사이트의 이미지를 저장할 위치 및 방식을 묻는 대화 상자가 표시됩니다(이전 섹션의 그림 9 및 10 참조).
이미지 형식은 JPEG 로 변경하고 width 및 height 는 1000 과 547 로 각각 설정합니다. 그런 다음 확인을 클릭합니다.
Golden Gate Bridge 이미지는 글머리 기호 목록과 단락 사이에 삽입됩니다. 이미지를 잘못 배치했더라도 걱정하지 않아도 됩니다. 잠시 후에 수정하는 방법을 살펴봅니다.
이 이미지가 선택된 상태에서 햄버거 아이콘을 클릭하여 빠른 속성 관리자를 표시합니다.
alt 필드에 The Golden Gate Bridge 를 입력한 다음 너비 및 높이 필드 값을 삭제합니다. 이 이미지에는 캡션이 포함되지 않으므로 비시각 브라우저를 위한 alt 속성이 필요합니다. 이 이미지는 화면 해상도에 따라 자동으로 크기가 조정되므로 크기는 설정하지 않아도 됩니다.
DOM 패널에서 img 요소가 div #hero 와 p 사이에 있는지, p 와 동일하게 들여쓰여 있는지 확인합니다(그림 15 참조).
이미지가 잘못 배치되어 있는 경우 세로로 된 녹색 막대가 div #hero 와 다음 p 사이에 표시될 때까지 DOM 패널 안으로 드래그합니다. 그런 다음 마우스 버튼을 놓습니다.
index.html 을 저장합니다.
라이브 뷰 및 DOM 패널에서 드래그 앤 드롭 방식을 사용하면 HTML 요소 및 에셋을 웹 페이지에서 효율적으로 재구성할 수 있습니다. 따라서 이 기법을 사용하여 작업하는 것에 익숙해져야 합니다.
마우스를 사용한 작업에 익숙하지 않다면 이전 섹션에서와 동일한 방식으로 Golden Gate Bridge 이미지를 삽입할 수 있습니다. 먼저 hero
를 선택한 다음 표시되는 메뉴에서 연결되지 않은 항목 삽입 을 선택합니다. 위치 지원 대화 상자에서 중첩 을 선택합니다.
반응형 이미지 만들기
Golden Gate Bridge 이미지의 너비는 1000px이고 이 사이트의 다른 이미지 너비는 400px입니다. HTML에서 width 및 height 속성을 제거했지만 CSS를 사용하여 화면 크기에 맞게 반응하는 이미지를 만들지 않은 경우를 제외하고 브라우저는 보통 브라우저 크기에 맞게 이미지를 표시합니다.
라이브 뷰 스크러버를 왼쪽으로 드래그하여 라이브 뷰의 너비를 줄입니다(그림 16 참조). 라이브 뷰의 너비가 1000px 미만이면 가로 스크롤 막대가 표시되고 Golden Gate Bridge 이미지는 오른쪽 측면이 가려진 채 화면에 표시됩니다.
라이브 뷰에서 Golden Gate Bridge 이미지가 선택된 상태에서 CSS 디자이너에서 새 선택기를 만듭니다. 위쪽 화살표를 한 번 눌러 제시된 선택기를 #hero img 로 변경하고 Enter/Return 키를 눌러 변경 내용을 적용합니다.
그러면 공백으로 분리되는 두 개 이상의 선택기로 구성되는 후손 선택기가 만들어집니다. 이 선택기는 ID hero가 있는 요소 안의 이미지를 대상으로 합니다.
다음의 속성과 값을 설정합니다.(모두 레이아웃 섹션에 있습니다.)
max-width 속성을 100% 로 설정하면 이미지는 부모 요소, 이 경우 hero
보다 넓게 표시되지 않습니다
라이브 뷰 스크러버를 양쪽으로 드래그합니다. Golden Gate Bridge 이미지는 자동으로 크기가 조정되면서 가로 공백을 채웁니다(그림 17 참조).
라이브 뷰에서 케이블카 이미지를 선택하고 위쪽 화살표 키를 한 번 누릅니다. 그러면 선택 항목이 HTML 계층 구조 위로 이동하면서 부모 요소가 선택됩니다.
figure 에 해당하는 선택기를 만들고 다음의 속성을 설정합니다.
필요한 경우 라이브 뷰의 크기를 400px 이상으로 줄입니다. 요소의 시각 안내선을 보면 92% 의 max-width 속성이 너비 속성값을 덮어쓰고 있습니다. 요소는 가로로 보면 가운데에 있지만 오른쪽 바깥쪽까지 표시되어 있습니다(그림 18 참조).
요소에 중첩된 이미지의 스타일을 지정하려면 또 다른 후손 선택기인 figure img 를 만듭니다. 그런 다음 max-width 속성을 100% 로 설정합니다.
그러면 이미지가 상위 컨테이너 밖까지 표시되지 않습니다. 라이브 뷰가 435px 보다 넓은 경우 이미지는 400px 의 기본 크기로 표시되고 가로로 보면 가운데에 배치됩니다.
요소를 사용하는 동안 figcaption 에 대한 선택기를 만들고 다음의 속성 및 값을 설정합니다.
CSS 필터를 사용하여 이미지의 스타일 지정
CSS 필터는 공식적으로 실험 단계에 있지만 대부분의 최신 브라우저에서 지원됩니다. 몇 가지 간단한 스타일을 만들어 이미지를 회색 음영으로 변환한 다음 마우스를 가져가면 색상 버전이 표시되도록 해 봅니다.
라이브 뷰에서 케이블카 이미지를 선택하고 img 요소 표시에서 + 버튼을 클릭합니다. 편집 가능한 필드에 .grayscale (점부터 시작)을 입력하고 Tab 또는 Enter/Return 키를 눌러 해당 클래스를 이미지에 할당합니다.
이때 표시되는 팝업 메뉴에서 responsive.css 가 선택되어 있는지 확인하고 메뉴 밖을 클릭하여 닫습니다.
CSS 디자이너의 선택기 창에서 만들어진 .grayscale 선택기를 선택하고 속성 창의 상단에서 세트 표시 체크 상자를 선택합니다.
속성 추가 및 값 추가 필드에 다음의 속성 및 값을 설정합니다.
이제 이미지는 흑백 사진으로 표시됩니다(그림 19 참조).
선택기 창에서 .grayscale 선택기를 마우스 오른쪽 버튼으로 클릭한 다음 표시되는 메뉴에서 복제를 선택합니다. Dreamweaver에서는 스타일 규칙의 사본이 만들어지지만 새 선택기의 이름은 편집 가능합니다. 다음과 같이 :hover 유사 클래스를 끝에 추가합니다.
.grayscale:hover
유사 클래스에 대한 자세한 내용은 이 튜토리얼 시리즈의 제6장에서 살펴봅니다.
속성 창에서 각 속성값을 두 번 클릭하여 grayscale(0%) 로 변경합니다.
라이브 뷰에서 이미지에 마우스를 가져가면 이미지는 컬러로 변경됩니다.
파일 > 관련 파일 모두 저장 을 선택하여 작업 내용을 저장합니다.
브라우저 간 호환하려면 -webkit-filter 및 filter 를 모두 사용해야 합니다. 두 속성을 모두 지원하지 않는 이전 브라우저는 이 스타일 규칙을 무시하고 이미지를 컬러로 표시합니다.
단락에 독특한 스타일 지정
이전 섹션에서는 케이블카 이미지를 클래스로 할당하여 히어로 이미지와 다른 스타일을 지정해 보았습니다. 그러나 요소에 다른 스타일을 지정하기 위해 클래스를 사용하지 않아도 됩니다. Golden Gate Bridge 이미지와 첫 번째
머리글 사이에 있는 단락은 hero
에 중첩되어 있으므로 #hero p 에 대한 후손 선택기를 만들어 다른 모든 단락과 다른 스타일을 지정할 수 있습니다.
라이브 뷰에서 Golden Gate Bridge 이미지 바로 아래에 있는 단락을 선택합니다.
관련 스타일 규칙을 함께 유지하는 것이 좋으므로 CSS 디자이너의 선택기 창에서 #hero img 를 강조 표시하고 + 버튼을 클릭합니다. Dreamweaver는 #wrapper #hero p 를 선택기로 제시합니다. 위쪽 화살표 키를 한 번 눌러 #hero p 로 변경합니다.
속성 창의 오른쪽 상단에 있는 세트 표시 체크 상자를 선택 해제하고 텍스트 섹션으로 이동하는 아이콘을 클릭합니다.
CC Libraries 패널에서 분홍색 색상 견본을 클릭하여 16진수 값인 #F68979 를 color 속성값으로 클립보드에 복사하여 붙여넣습니다. hero
에 있는 단락만이 분홍색으로 표시됩니다. 다른 모든 텍스트는 어두운 회색으로 유지됩니다.
font-weight 를 600 으로 설정합니다.
font-size 오른쪽을 한 번 클릭하여 측정 단위로 em 을 선택합니다. 제4장에서 살펴본 바와 같이 Dreamweaver는 항상 값을 0 으로 설정하므로 텍스트가 사라집니다.
따라서 value 는 1.5em 으로 설정해야 하는데, 다음의 두 가지 방법을 사용할 수 있습니다.
편집 가능한 필드에 바로 1.5 를 입력한 다음 Enter/Return 키를 눌러 값을 적용합니다.
커서가 양방향 화살표로 변할 때까지 마우스 포인터를 값 아래에 가져갑니다. 그런 다음 Ctrl 키(Windows) 또는 Command 키(Mac)를 누른 상태에서 마우스를 오른쪽으로 스크러빙합니다. 그러면 값은 0.1 씩 증가(그림 20 참조)하고 라이브 뷰에서 바로 효과를 확인할 수 있습니다. 너무 많이 값을 올렸다면 마우스를 왼쪽으로 스크러빙합니다. 값을 한 번 더 클릭하여 변경 내용을 적용합니다. 이 기법은 특정 값을 설정하는 대신 스크러빙하면서 라이브 뷰에서 시각적으로 결과를 확인할 수 있어 특히 유용합니다.
스크러빙하는 동안 Shift 키를 누르면 10씩 값이 변경됩니다. 수정자 키를 사용하지 않고 스크러빙하면 1씩 값이 변경됩니다.
속성 창의 상단에 있는 아이콘을 클릭하여 테두리 섹션으로 이동합니다. border 속성은 탭으로 된 패널로 그룹화되어 있습니다(그림 22 참조). 첫 번째 탭에서 값을 설정하면 동일한 테두리가 요소의 각 측면에 적용됩니다. 다른 탭에서는 top , right , bottom 및 left 의 테두리를 개별적으로 설정합니다.
아래 테두리에 해당하는 탭을 선택하여 width를 3px 로 설정하고 style을 solid 로 설정합니다. 테두리의 기본 색상은 현재 요소의 텍스트에서 상속되므로 색상을 지정하지 않아도 됩니다.
이 단락의 스타일을 완성하려면 속성 창의 상단에 있는 아이콘을 클릭하여 레이아웃 속성으로 이동합니다. 패딩 시각적 툴을 찾은 다음 왼쪽 및 오른쪽 값을 4% 로 설정하고 아래는 20px 로 설정합니다(그림 23 참조).
텍스트 상단과 Golden Gate Bridge 이미지 사이의 공백이 너무 큽니다. margin 시각적 툴을 사용하여 상단 여백을 10px 로 재설정합니다.
이제 단락이 독특한 스타일로 만들어졌습니다(그림 24 참조).
바닥글의 스타일 지정
지금까지 살펴본 내용을 활용하여 이제 선택기 및 스타일 규칙을 만들어 바닥글에 스타일을 지정할 수 있습니다. 코드 뷰에서 바로 스타일 시트의 하단에 스타일 정의를 추가해 봅니다. 다음과 같이 코드를 작성합니다.
완료한 다음 작업한 내용을 반드시 저장하시기 바랍니다. 브라우저에서 페이지를 보면 그림 25와 같이 표시되어야 합니다. 멋진 디자인이 완성되어 가고 있습니다.
