웹 요소의 크기를 계산하는 방법을 살펴보세요. 그런 다음 CSS를 사용하여 일반적인 레이아웃 및 스타일을 페이지의 요소 및 텍스트에 적용해 보세요.
필요 항목
다운로드 파일에는 Creative Cloud Libraries 전체 세트와 이 튜토리얼 시리즈에서 사용할 프로젝트 파일이 포함되어 있습니다. 제1장에서 만든 시작 파일을 계속 사용하거나 각 섹션과 관련된 폴더에 포함된 시작 파일을 사용할 수 있습니다.
소개
Dreamweaver 2015에서 간단한 반응형 웹 사이트를 만드는 방법에 대한 이 튜토리얼 시리즈의 제4장을 시작합니다. 이전 세 개의 장에서는 Dreamweaver에서 사이트를 정의하는 방법과 논리적 HTML 구조를 사용하여 두 개의 페이지를 만드는 방법을 살펴보았습니다. 그림 1은 index.html을 브라우저에 로드하면 나타나는 홈 페이지를 보여줍니다.
마지막 장을 제외한 나머지 튜토리얼에서는 이와 같은 미완성된 사이트를 CSS를 사용하고 이미지를 추가하여 간단하면서도 세련된 디자인의 웹 사이트로 만드는 방법을 살펴봅니다. 이 장에서는 높이 및 너비 계산을 간소화하고 글꼴을 변경하며 CSS 디자이너를 사용하여 기본 스타일을 만드는 방법을 살펴봅니다.
코드 단편을 생성하여 높이 및 너비 계산 간소화
CSS에서는 모든 요소가 상자로 인식됩니다. 기본 CSS 상자 모델에서 요소의 너비 및 높이는 일반적으로 요소 자체에만 적용됩니다. 요소의 콘텐츠 주위에 공백(패딩)을 추가하면 이 공백은 계산에 포함되지 않습니다. 테두리도 계산에서 제외됩니다. 따라서 요소의 너비를 250px로 설정하고 높이를 100px로 설정한 경우 양측에 20px의 패딩을 각각 추가하고 5px의 테두리도 추가해야 하므로 전체 너비는 300px이 되고 전체 높이는 150px이 됩니다(그림 2 참조).
특히 크기 단위를 픽셀과 백분율로 혼용하는 경우 계산하기 어려울 수 있습니다. 패딩과 테두리를 요소의 크기에 포함된 것으로 간주하는 것이 좋습니다. 대부분의 전문 웹 디자이너는 페이지 레이아웃을 보다 손쉽게 제어하기 위해 요소의 전체 너비 및 높이에 패딩 및 테두리를 포함하는 간단한 두 가지 스타일 규칙을 스타일 시트의 시작 부분에 추가합니다. Dreamweaver의 코드 단편 패널에 이러한 규칙을 저장하면 다른 웹 사이트를 만들 때 스타일에 삽입하면 되므로 매우 유용합니다.
- 문서 창에서 index.html을 연 다음 관련 파일 툴바에서 responsive.css(그림 3 참조)를 클릭하여 분할 뷰에서 외부 스타일 시트를 엽니다.
- 코드 안을 클릭하여 2번 줄에 빈 줄을 만들고 /* Simplify width and height calculations */를 입력합니다. CSS에서 /*와 */ 사이에 있는 모든 것은 주석으로 간주되며, 코드의 기능을 알려줍니다.
- 새 줄을 만들어 html을 입력한 다음 여는 중괄호({)를 입력합니다. 스타일 규칙은 선택기 뒤에서 중괄호 안에 속성/값으로 구성됩니다. 가장 간단한 선택기 유형은 꺾쇠 괄호 없는 HTML 태그로 구성됩니다. 모든 웹 페이지의 최상위 요소는
<html>이므로html은 페이지에 있는 모든 것에 영향을 미치는 CSS 선택기입니다.
- 중괄호를 닫은 다음 Enter/Return 키를 누릅니다. 그러면 들여쓰기가 적용된 다음 줄이 생성되고 CSS 속성에 해당하는 코드 힌트가 표시됩니다. box를 입력합니다. box를 입력하면 Dreamweaver는 코드 힌트를 필터링하면서 속성 이름 중간에 있는 모든 유효한 속성을 비롯해 box와 일치하는 유효한 속성을 검색합니다(그림 4 참조).
- 사용할 속성은
box-sizing입니다. 화살표 키 또는 마우스를 사용하여 코드 힌트에서 box-sizing을 선택한 다음 Enter/Return을 누릅니다. 그러면 속성 이름이 자동으로 완성되고 속성 이름 뒤에 콜론(:)이 추가되고 다시 코드 힌트가 표시됩니다. 코드를 보다 손쉽게 표시하려면 공백을 추가한 다음 목록에서border-box를 선택한 다음 세미콜론(;)을 추가하여 줄을 마무리합니다. - 다음 줄에 다음 스타일 규칙을 입력합니다.
다음 줄에 닫는 중괄호(})를 입력하여 스타일 규칙 정의를 마무리합니다.
*, *:before,
*:after {
box-sizing: inherit;
}
- 디자인 작업 영역에서 파일 패널에 도킹되어 있는 코드 단편 패널을 열고 CSS_Snippets 폴더를 선택합니다(그림 5 참조).
이 규칙은 그룹 선택기를 사용합니다. 그룹 선택기는 쉼표로 구분되는 세 개의 선택기로 구성되고 모든 선택기에 동일한 스타일을 적용합니다. 별표(*)가 표시된 것은 공통 선택기이므로 모든 요소에 적용합니다. 나머지 두 개의 선택기는 유사 요소로 사용합니다.
이 스타일 규칙에 대한 이해는 고급 수준에 해당합니다. 웹 디자인을 학습하는 이 단계에서는 스타일 규칙의 역할만을 이해하면 됩니다. 지금은 정확하게 입력하는 것이 중요합니다. box-sizing 속성 뒤에 오는 콜론 다음에는 공백을 추가할 수 있지만 *:before와 *:after에서 콜론 다음에는 공백을 추가할 수 없습니다.
- 코드 뷰에서 방금 작성한 주석과 두 개의 스타일 규칙을 선택한 다음 마우스 오른쪽 버튼으로 클릭하고 표시되는 메뉴에서 새 코드 단편 만들기를 선택합니다(그림 6 참조).
- 이름 필드에 Box-sizing: border-box를 입력합니다. 설명에 너비 및 높이에 패딩 및 테두리 포함을 입력합니다. 코드 단편 유형에서는 블록 삽입 라디오 버튼을 선택합니다. 미리 보기 형식은 기본값인 코드로 둡니다. 이 패널은 그림 7과 같습니다.
그러면 선택한 코드가 이미 필드 중 하나로 포함되어 있는 코드 단편 대화 상자가 열립니다.
- 확인을 클릭하여 코드 단편을 저장합니다. 코드 단편 패널에서 CSS_Snippets 폴더를 선택했으므로 새 코드 단편은 동일한 폴더에 자동 저장됩니다.
스타일 시트에 이 코드 단편을 포함하면 전체 크기에 영향을 주지 않고 요소의 패딩 및 테두리를 조정할 수 있습니다.
코드 단편을 Creative Cloud와 동기화할 수 있습니다. 코드 단편 사용에 대한 자세한 내용은 온라인 설명서를 참조하십시오.
Adobe Edge Web Fonts 설치
브라우저는 기본값으로 serif 글꼴인 Times 또는 Times New Roman을 사용하여 텍스트를 표시합니다. Serif 글꼴은 획 끝에 장식 고리가 있습니다. CSS font-family 속성을 사용하면 글꼴을 선택할 수는 있지만 디바이스에서 사이트를 표시하기 위해 제공하는 글꼴만 선택할 수 있습니다. 페이지에 다운로드되는 웹 글꼴을 사용하면 이러한 제약 사항을 해결할 수 있습니다. Dreamweaver에는 Adobe가 호스팅하는 웹 글꼴이 내장되어 있어 무료로 이용할 수 있습니다. 먼저 Dreamweaver에서 이러한 웹 글꼴을 활성화해야 합니다.
- 수정 > 글꼴 관리를 선택하여 그림 8과 같은 패널을 엽니다.
- 사용할 글꼴은 Source Sans Pro입니다. 검색 필드에 이 글꼴 이름을 입력하면 세 개의 옵션이 표시됩니다. 중간에 있는 옵션인 Source Sans Pro를 클릭합니다. 체크 표시는 해당 글꼴이 선택되었음을 나타냅니다(그림 9 참조).
- Adobe Edge Web Fonts는 무료로 사용할 수 있지만 라이선스 계약에 동의해야 합니다. 패널 하단에 있는 링크를 클릭하면 약관이 표시됩니다.
- 약관에 동의하면 완료를 클릭합니다.
Source Sans Pro는 sans-serif 글꼴로, 획 끝에 장식 고리가 없습니다. Source Sans Pro와 Source Serif Pro의 차이를 명확하게 확인할 수 있습니다.
Dreamweaver는 개별 구성 폴더에 Edge Web Fonts를 설치하므로 Dreamweaver에서 제작하는 모든 사이트에서 사용할 수 있습니다.
CSS 디자이너에서 페이지에 기본 스타일 추가
앞서 코드 뷰에서 코드 힌트를 통해 스타일 규칙을 신속하게 만드는 방법을 살펴보았습니다. 또한 Dreamweaver는 라이브 뷰에서 변경 내용을 확인하면서 페이지에 스타일을 지정할 수 있는 패널인 CSS 디자이너를 제공합니다. 이 섹션에서는 CSS 디자이너를 사용하여 기본 스타일을 responsive.css에 추가하고 이러한 기본 스타일이 index.html에 미치는 영향을 확인해 봅니다.
- 문서 창에서 index.html을 연 상태에서 라이브 버튼을 클릭하여 전체 창에 라이브 뷰를 표시합니다.
- 화면 오른쪽에 있는 패널 그룹에서 CSS 디자이너 탭을 클릭하여 엽니다(이 패널은 이전 섹션에서 사용한 코드 단편 패널과 함께 도킹되어 있습니다). CSS 디자이너는 소스, @미디어, 선택기 및 속성인 4개 창으로 구성되어 있습니다(그림 10 참조).
CSS 디자이너는 기본적으로 디자인 작업 영역의 오른쪽에 있는 속성 창과 함께 두 개의 열로 된 레이아웃으로 되어 있습니다. 모니터가 작은 경우 패널 그룹의 한 측면을 안쪽으로 드래그하여 한 개의 열로 된 레이아웃으로 변환할 수 있습니다.
새로운 스타일 규칙을 만들 경우 패널 상단에서 전체 버튼을 선택합니다.
각 창은 다음과 같은 역할을 합니다.
- 소스: 이 창은 현재 페이지에 적용된 모든 스타일의 소스를 보여줍니다. 스타일은 responsive.css와 같은 외부 스타일 시트이나 페이지에 임베드된 블록에 있을 수 있고 다이내믹하게 연결되어 있을 수 있습니다.
- @미디어: 이 창은 다양한 소스에서 사용된 미디어 쿼리를 보여줍니다. 이 창에 대한 자세한 내용은 제7장에서 살펴봅니다.
- 선택기: 이 창은 선택된 소스에 있는 모든 CSS 선택기를 보여줍니다. 상단에 있는 검색 필드를 통해 큰 스타일 시트에서 선택기를 찾을 수 있습니다.
- 속성: 이 창은 선택기의 속성과 값을 정의하는 곳입니다. 세트 표시 체크 상자를 선택하면 이 창에 설정된 속성만 표시됩니다. 체크 상자를 선택 해제하면 이 창에 레이아웃, 텍스트, 테두리 및 배경에 대한 가장 일반적으로 사용되는 약 50개의 속성을 보여줍니다.
- CSS 디자이너의 상단에 있는 전체 버튼이 선택되어 있는지 확인합니다.
소스 창에서 responsive.css를 선택합니다.
제7장까지 @미디어 창은 필요 없으므로 선택기 창의 상단 끝을 위쪽으로 드래그하여 닫습니다.
선택기 창은 이미 만들어진 선택기를 보여줍니다. 마지막에 있는 선택기(#wrapper)는 아직 스타일이 지정되어 있지 않습니다. 또 다른 선택기가 강조 표시되지 않은 경우를 제외하고 새롭게 생성된 선택기는 항상 스타일 시트의 맨 아래에 표시됩니다. 논리적 순서로 스타일을 유지하는 것이 좋으므로*,*:before,*:after를 선택한 다음 속성 창의 오른쪽 상단에 있는 세트 표시 체크 상자를 선택 해제합니다.
- 선택기 창의 왼쪽 상단에 있는 + 버튼을 클릭하여 새 선택기를 만듭니다. 라이브 뷰에서 현재 선택한 항목을 기반으로 선택기의 이름이 자동 제시됩니다. 이 이름을 무시하고 body를 입력합니다. Enter/Return 키를 두 번 눌러 변경 내용을 적용합니다. 새로운 선택기가 강조 표시된 상태에서(그림 11 참조) 이제 속성 창에서 속성값을 설정하여 페이지의 모든 요소에 영향을 줄 수 있는 스타일 규칙을 만들 수 있습니다.
- 상단에 있는 레이아웃 섹션에는 여백 속성을 설정할 수 있는 시각적 툴이 있습니다. 이 경우에 사용하는 대신 대표 속성 설정을 클릭하여 편집 가능한 필드를 열어 0을 입력합니다. Enter/Return 키를 눌러 변경 내용을 적용합니다.
기본 8px의 여백이 요소에서 제거되어 라이브 뷰의 콘텐츠가 약간 왼쪽 상단으로 이동한 것을 볼 수 있습니다.
속성 창의margin속성은 이제 설정되었음을 의미하는 굵은체로 표시됩니다. 또한 시각적 툴에서 모든 측면의 값은 0으로 설정되었습니다(그림 12 참조).
- 속성 창의 상단에 있는 텍스트
아이콘을 클릭하여 텍스트 속성 옵션으로 이동합니다. 첫 번째로 표시된 속성인 color은 텍스트의 색상을 설정합니다. 이 프로젝트의 모든 색상은 제1장에서 설치한 CC Libraries에 포함되어 있습니다.
색상속성의 색상 설정을 클릭하여 색상 피커를 엽니다.
CC Libraries 패널은 CSS 디자이너와 함께 도킹되어 있으므로 CC Libraries 탭을 드래그하여 패널 그룹에서 분리해 문서 창 위에 표시합니다.
오른쪽 하단에 있는 Hex 버튼이 선택되어 있는지 확인합니다. 이 속성은 모든 브라우저에서 지원되는 16진수를 사용하여 색상을 설정합니다.
색상 피커의 오른쪽 하단에 있는 스포이드 툴을 선택하여 CC Libraries 패널에서 밝은 회색 견본의 색상을 추출합니다(그림 13 참조). 그러면 흰색 배경의 검정보다는 눈에 피로감을 주지 않는 #4B4B4B로 색상이 설정됩니다.
font-family의 오른쪽을 클릭하여 일반적으로 사용된 글꼴 스택의 메뉴를 엽니다. 앞서 설치한 Adobe Edge Web Fonts를 선택하는데, 하단에source-sans-pro로 표시됩니다(그림 14 참조).
색상 피커 밖을 클릭하여 닫습니다.
font-style(normal) 값은 괜찮지만font-weight(200) 값은 매우 얇습니다.
200을 클릭하여 이 글꼴의 두께 메뉴를 열어 보통에 해당하는 400을 선택합니다(그림 15 참조).
글꼴 스택은 일반적으로 사용하는 글꼴을 선호도 순으로 표시합니다. 첫 번째 글꼴이 사용자 디바이스에서 제공되지 않는 경우 브라우저는 두 번째 글꼴을 시도하며, 적합한 글꼴을 찾을 때까지 차순으로 시도합니다.
Edge Web Font를 자동으로 선택하면 font-family는 물론이고 font-style 및 font-weight 속성값이 설정됩니다. 관련 파일 툴바에는 새 파일(source-sans-pro:n2,n4:default.js)이 표시되고 소스 창에는 읽기 전용 소스가 표시됩니다.(경우에 따라 한 개 이상의 소스가 표시됩니다.) 새 파일 및 읽기 전용 소스는 Adobe 서버에서 다이내믹하게 글꼴을 로드하므로 편집할 수 없습니다.
font-size옆을 클릭하여 글꼴에 적용할 수 있는 측정 단위 및 키워드 메뉴를 열어 em을 선택합니다(그림 16 참조).
font-weight 속성은 100단위로 숫자를 입력하여 100(light)에서 900(heavy)까지 숫자를 입력하거나 normal(400에 해당), bold(700), bolder 또는 lighter와 같은 키워드를 사용하여 설정할 수 있습니다. Edge Web Fonts 값은 숫자를 기반으로 하며, 각 글꼴마다 사용 가능한 값은 다릅니다. 그림 15를 보면 source-sans-pro는 100, 500 또는 800을 지원하지 않습니다.
- 속성 창 상단에 있는 배경 아이콘을 클릭하여 배경 속성으로 이동합니다.
- 이번에는 색상 피커를 사용하여
background-color속성을 설정하지 않고 CC Libraries 패널의 연한 파란색 견본을 클릭합니다(그림 17 참조). 그러면 이 색상의 16진수 값이 클립보드에 복사됩니다.
라이브 뷰는 비어 있는데, The Hitchhiker’s Guide to the Galaxy의 커버에 있는 구문인 Don’t panic!을 인용해 봅니다.
측정 단위를 선택하면 측정값이 0으로 자동 설정됩니다. em은 현재 글꼴의 높이에 비례하지만 0으로 설정하면 텍스트가 사라집니다.
1을 입력하면 텍스트가 다시 표시됩니다. body 스타일 규칙에서 값을 1em으로 설정하는 것은 단락 및 목록 항목의 브라우저 기본값인 16px을 사용하는 것입니다.
- 속성 창의 오른쪽 상단에 있는 세트 표시 체크 상자를 선택하여 페이지 본문에 설정된 모든 CSS 속성을 확인합니다(그림 18 참조).
background-color의 오른쪽에 있는 색상 설정을 클릭하여 편집 가능한 필드를 열어 값을 붙여넣은 다음 Enter/Return 키를 눌러 변경 내용을 적용합니다. 이 페이지 배경은 이제 연한 파란색으로 변경되었습니다.
CSS 디자이너에서 바로 속성 설정
CSS 디자이너의 다양한 섹션에서 일반적인 속성을 선택하면 CSS를 보다 효과적으로 배울 수 있습니다. 하지만 CSS에 대해 익히 알고 있고 속성과 값만을 설정하려면 속성 창의 하단에 자세히 섹션을 이용합니다. Dreamweaver에서 코드 힌트 기능을 사용하면 신속하게 작업할 수 있습니다. 본격적으로 시작해 봅니다. CSS에 대한 지식이 전혀 없더라도 다음 지침을 따를 수 있어야 합니다.
- CSS 디자이너의 상단에 있는 전체 버튼을 선택하고 소스 창에서 responsive.css가 선택되어 있는지 확인합니다. 필요한 경우 속성 창의 오른쪽 상단에 있는 세트 표시 체크 상자를 선택합니다.
- 선택기 창에서
#wrapper를 선택합니다. 해시 기호는 ID 선택기를 나타내므로 IDwrapper가 있는 선택기에 스타일 규칙이 적용됩니다. 이 선택기가 표시되어 있지 않는 경우 선택기 창의 왼쪽 상단에 있는 + 버튼을 클릭하여 편집 가능한 필드에#wrapper를 입력합니다.
이 선택기에 설정된 스타일이 없으므로 속성 창에는 자세히와 속성 및 값을 추가할 수 있는 두 개의 편집 가능한 필드만이 표시됩니다.
속성 추가필드 안을 클릭하여 width를 입력하기 시작하면 코드 힌트를 통해 일치하는 속성이 표시됩니다. width가 강조 표시된 상태에서 Tab 또는 Enter/Return 키를 눌러 선택합니다.
- wrapper가 큰 화면에 너무 넓게 표시되는 것을 방지하기 위해 또 다른 속성인
max-width를 추가한 다음 이 속성값을 1000px로 설정합니다.
margin속성을 추가하고 이 속성값을 0 auto로 설정하여 wrapper를 가운데에 배치합니다. 이렇게 하면 상단과 하단에 여백이 설정되지 않지만 왼쪽과 오른쪽에 여백이 자동으로 설정됩니다. 문서 창이 1000px(max-width의 값)보다 넓은 경우 페이지 콘텐츠는 항상 라이브 뷰의 가운데에 표시됩니다.
background-color속성을 추가한 다음 이 속성값을 white로 설정합니다. 이 속성값은 모든 브라우저에서 인식되는 색상 키워드입니다. 이제 속성 창에는#wrapper선택기에 대한 4개의 스타일 정의가 표시됩니다(그림 19 참조).
이제 두 번째 필드로 이동하여 100%를 입력한 다음 Enter/Return 키를 누릅니다. 그러면 wrapper가 화면의 전체 너비를 채우게 됩니다.
- 파일 > 관련 파일 모두 저장을 선택하여 작업 내용을 저장합니다. 페이지의 스타일을 지정할 때에는 저장을 자주 하는 것이 좋습니다.
흰색 배경의 텍스트 콘텐츠가 이제 가운데에 배치되어 있습니다. 문서 창이 1000px보다 넓은 경우 본문의 연한 파란색 배경이 양쪽에 표시됩니다. 페이지 상단에도 알 수 없는 공백이 있고 텍스트는 wrapper <div>의 왼쪽에 몰려 있습니다. 이 문제는 제5장에서 해결해 봅니다. 먼저 웹 페이지의 픽셀 측정에 대해 살펴봅니다.
픽셀 및 고밀도 디스플레이
픽셀은 컴퓨터 디스플레이를 구성하는 작은 점 하나입니다. 웹이 등장했을 때 1px은 이러한 점 하나와 같은 크기를 의미했습니다. 그러나 수년간 기술이 발전하면서 이러한 점은 점점 더 작아졌습니다. 다행히도 CSS는 이러한 상황을 예상했습니다. 측정 단위로 사용되는 픽셀은 디바이스 화면에서 사용되는 물리적 픽셀 크기에 영향을 받지 않습니다. 따라서 wrapper <div>의 최대 너비로 설정된 1000px은 예전 모니터에서나 최신 고밀도 디스플레이에서도 거의 동일하게 표시됩니다.
사이트가 서서히 구색을 갖춰가고 있지만 여전히 가야 할 길은 멉니다. 다음 단계에서 가로 및 세로 공백에서 발생하는 문제를 해결하고 반응형 이미지를 사용하여 페이지를 향상시켜 봅니다.
