Dreamweaver에서 튜토리얼 경험해 보기
모던한 반응형 웹 페이지를 디자인하세요.
글꼴 변경 및 기본 스타일 만들기
웹 요소의 크기를 계산하는 방법을 살펴보세요. 그런 다음 CSS를 사용하여 일반적인 레이아웃 및 스타일을 페이지의 요소 및 텍스트에 적용해 보세요.
소개
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 은 페이지에 있는 모든 것에 영향을 미치는 CSS 선택기입니다.
중괄호를 닫은 다음 Enter/Return 키를 누릅니다. 그러면 들여쓰기가 적용된 다음 줄이 생성되고 CSS 속성에 해당하는 코드 힌트가 표시됩니다. box 를 입력합니다. box를 입력하면 Dreamweaver는 코드 힌트를 필터링하면서 속성 이름 중간에 있는 모든 유효한 속성을 비롯해 box와 일치하는 유효한 속성을 검색합니다(그림 4 참조).
사용할 속성은 box-sizing 입니다. 화살표 키 또는 마우스를 사용하여 코드 힌트에서 box-sizing을 선택한 다음 Enter/Return을 누릅니다. 그러면 속성 이름이 자동으로 완성되고 속성 이름 뒤에 콜론(:)이 추가되고 다시 코드 힌트가 표시됩니다. 코드를 보다 손쉽게 표시하려면 공백을 추가한 다음 목록에서 border-box 를 선택한 다음 세미콜론(;)을 추가하여 줄을 마무리합니다.
다음 줄에 다음 스타일 규칙을 입력합니다.
디자인 작업 영역에서 파일 패널에 도킹되어 있는 코드 단편 패널을 열고 CSS_Snippets 폴더를 선택합니다(그림 5 참조).
코드 뷰에서 방금 작성한 주석과 두 개의 스타일 규칙을 선택한 다음 마우스 오른쪽 버튼으로 클릭하고 표시되는 메뉴에서 새 코드 단편 만들기 를 선택합니다(그림 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는 무료로 사용할 수 있지만 라이선스 계약에 동의해야 합니다. 패널 하단에 있는 링크를 클릭하면 약관이 표시됩니다.
약관에 동의하면 완료 를 클릭합니다.
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에 포함되어 있습니다.
색상 속성의 색상 설정을 클릭하여 색상 피커를 엽니다.
font-family 의 오른쪽을 클릭하여 일반적으로 사용된 글꼴 스택의 메뉴를 엽니다. 앞서 설치한 Adobe Edge Web Fonts를 선택하는데, 하단에 source-sans-pro 로 표시됩니다(그림 14 참조).
font-style (normal) 값은 괜찮지만 font-weight (200) 값은 매우 얇습니다.
200 을 클릭하여 이 글꼴의 두께 메뉴를 열어 보통에 해당하는 400 을 선택합니다(그림 15 참조).
font-size 옆을 클릭하여 글꼴에 적용할 수 있는 측정 단위 및 키워드 메뉴를 열어 em 을 선택합니다(그림 16 참조).
속성 창 상단에 있는 배경 아이콘을 클릭하여 배경 속성으로 이동합니다.
이번에는 색상 피커를 사용하여 background-color 속성을 설정하지 않고 CC Libraries 패널의 연한 파란색 견본을 클릭합니다(그림 17 참조). 그러면 이 색상의 16진수 값이 클립보드에 복사됩니다.
속성 창의 오른쪽 상단에 있는 세트 표시 체크 상자를 선택하여 페이지 본문에 설정된 모든 CSS 속성을 확인합니다(그림 18 참조).
CSS 디자이너에서 바로 속성 설정
CSS 디자이너의 다양한 섹션에서 일반적인 속성을 선택하면 CSS를 보다 효과적으로 배울 수 있습니다. 하지만 CSS에 대해 익히 알고 있고 속성과 값만을 설정하려면 속성 창의 하단에 자세히 섹션을 이용합니다. Dreamweaver에서 코드 힌트 기능을 사용하면 신속하게 작업할 수 있습니다. 본격적으로 시작해 봅니다. CSS에 대한 지식이 전혀 없더라도 다음 지침을 따를 수 있어야 합니다.
CSS 디자이너의 상단에 있는 전체 버튼을 선택하고 소스 창에서 responsive.css 가 선택되어 있는지 확인합니다. 필요한 경우 속성 창의 오른쪽 상단에 있는 세트 표시 체크 상자를 선택합니다.
선택기 창에서 #wrapper 를 선택합니다. 해시 기호는 ID 선택기를 나타내므로 ID wrapper 가 있는 선택기에 스타일 규칙이 적용됩니다. 이 선택기가 표시되어 있지 않는 경우 선택기 창의 왼쪽 상단에 있는 + 버튼을 클릭하여 편집 가능한 필드에 #wrapper 를 입력합니다.
이 선택기에 설정된 스타일이 없으므로 속성 창에는 자세히와 속성 및 값을 추가할 수 있는 두 개의 편집 가능한 필드만이 표시됩니다.속성 추가 필드 안을 클릭하여 width 를 입력하기 시작하면 코드 힌트를 통해 일치하는 속성이 표시됩니다. width가 강조 표시된 상태에서 Tab 또는 Enter/Return 키를 눌러 선택합니다.
wrapper가 큰 화면에 너무 넓게 표시되는 것을 방지하기 위해 또 다른 속성인 max-width 를 추가한 다음 이 속성값을 1000px 로 설정합니다.
margin 속성을 추가하고 이 속성값을 0 auto로 설정하여 wrapper를 가운데에 배치합니다. 이렇게 하면 상단과 하단에 여백이 설정되지 않지만 왼쪽과 오른쪽에 여백이 자동으로 설정됩니다. 문서 창이 1000px(max-width 의 값)보다 넓은 경우 페이지 콘텐츠는 항상 라이브 뷰의 가운데에 표시됩니다.
background-color 속성을 추가한 다음 이 속성값을 white 로 설정합니다. 이 속성값은 모든 브라우저에서 인식되는 색상 키워드입니다. 이제 속성 창에는 #wrapper 선택기에 대한 4개의 스타일 정의가 표시됩니다(그림 19 참조).
파일 > 관련 파일 모두 저장 을 선택하여 작업 내용을 저장합니다. 페이지의 스타일을 지정할 때에는 저장을 자주 하는 것이 좋습니다.
흰색 배경의 텍스트 콘텐츠가 이제 가운데에 배치되어 있습니다. 문서 창이 1000px보다 넓은 경우 본문의 연한 파란색 배경이 양쪽에 표시됩니다. 페이지 상단에도 알 수 없는 공백이 있고 텍스트는 wrapper
의 왼쪽에 몰려 있습니다. 이 문제는 제5장에서 해결해 봅니다. 먼저 웹 페이지의 픽셀 측정에 대해 살펴봅니다.
픽셀 및 고밀도 디스플레이
픽셀은 컴퓨터 디스플레이를 구성하는 작은 점 하나입니다. 웹이 등장했을 때 1px 은 이러한 점 하나와 같은 크기를 의미했습니다. 그러나 수년간 기술이 발전하면서 이러한 점은 점점 더 작아졌습니다. 다행히도 CSS는 이러한 상황을 예상했습니다. 측정 단위로 사용되는 픽셀은 디바이스 화면에서 사용되는 물리적 픽셀 크기에 영향을 받지 않습니다. 따라서 wrapper
의 최대 너비로 설정된 1000px은 예전 모니터에서나 최신 고밀도 디스플레이에서도 거의 동일하게 표시됩니다.
사이트가 서서히 구색을 갖춰가고 있지만 여전히 가야 할 길은 멉니다. 다음 단계에서 가로 및 세로 공백에서 발생하는 문제를 해결하고 반응형 이미지를 사용하여 페이지를 향상시켜 봅니다.
