이 문서에서는 CSS(Cascading Style Sheets)를 사용하여 Dreamweaver에서 페이지의 텍스트 서식을 지정하는 방법에 대해 설명합니다. CSS를 사용하면 HTML이 할 수 없는 방식으로 텍스트의 서식을 지정하고 위치를 지정할 수 있으므로 페이지 모양을 더 유연하게 제어할 수 있습니다.
CSS 이해
CSS(Cascading Style Sheets)는 웹 페이지의 콘텐츠 모양을 제어하는 형식 지정 규칙 집합입니다. CSS를 사용하여 페이지 형식을 지정하면 콘텐츠와 프레젠테이션이 별도로 유지됩니다. 페이지 콘텐츠(HTML 코드)는 자체 HTML 파일에 있는 반면, 코드 표현을 정의하는 CSS 규칙은 다른 파일(외부 스타일 시트)이나 HTML 문서의 다른 부분(일반적으로 섹션)에 있습니다. CSS를 사용하면 정확한 레이아웃 위치 지정부터 특정 글꼴 및 스타일에 이르기까지 페이지 모양을 유연하게 제어할 수 있습니다.
CSS를 사용하면 HTML만으로는 제어할 수 없는 많은 속성을 제어할 수 있습니다. 예를 들어 선택한 텍스트에 대해 다양한 글꼴 크기와 단위(픽셀, 포인트 등)를 지정할 수 있습니다. CSS를 사용하여 글꼴 크기를 픽셀 단위로 설정하면 여러 브라우저에서 페이지 레이아웃과 모양에 대한 보다 일관된 접근 방식을 보장할 수도 있습니다.
CSS 형식 지정 규칙은 선택기와 선언이라는 두 부분으로 구성됩니다. 선택자는 형식이 지정된 요소(예: P, H1, 클래스 이름 또는 ID)를 식별하는 용어이고 선언은 스타일 요소를 정의하는 데 사용됩니다. 다음 예에서 H1은 선택기이고 중괄호({}) 사이의 모든 내용은 선언입니다.
다음은 인용된 내용입니다.
H1 {
글꼴 크기:16 픽셀;
글꼴
-weight:bold
}
선언은 속성(예: 글꼴 모음)과 값(예: Helvetica)의 두 부분으로 구성됩니다. 위의 예는 H1 태그에 대한 스타일을 생성합니다. 이 스타일에 연결된 모든 H1 태그의 텍스트는 크기가 16픽셀이고 Helvetica 글꼴과 굵은 글꼴을 사용합니다.
"계단식"이라는 용어는 동일한 요소나 웹 페이지에 여러 스타일을 적용하는 기능을 의미합니다. 예를 들어 색상을 적용하는 CSS 규칙 하나와 여백을 적용하는 또 다른 규칙을 만든 다음 두 규칙을 모두 페이지의 동일한 텍스트에 적용할 수 있습니다. 정의된 스타일은 웹 페이지의 요소에 "계단식"으로 적용되어 궁극적으로 원하는 디자인을 만들어냅니다.
CSS의 가장 큰 장점은 업데이트가 쉽다는 것입니다. 하나의 CSS 규칙만 업데이트하면 정의된 스타일을 사용하는 모든 문서의 서식이 자동으로 새 스타일로 업데이트됩니다.
Dreamweaver에서는 다음 규칙 유형을 정의할 수 있습니다.
사용자 정의 CSS 규칙("클래스 스타일"이라고도 함)을 사용하면 모든 텍스트 범위 또는 텍스트 블록에 스타일 속성을 적용할 수 있습니다. 모든 수업 스타일은 마침표(.)로 시작됩니다. 예를 들어, .red라는 클래스 스타일을 만들고 규칙의 색상 속성을 빨간색으로 설정한 다음 스타일이 지정된 단락 텍스트의 일부에 스타일을 적용할 수 있습니다.
HTML 태그 규칙은 특정 태그(예: p 또는 h1)의 형식을 재정의합니다. h1 태그에 대한 CSS 규칙을 생성하거나 변경하면 h1 태그로 서식이 지정된 모든 텍스트가 즉시 업데이트됩니다.
CSS 선택기 규칙(고급 스타일)은 요소의 특정 조합 또는 CSS에서 허용하는 다른 선택기 형식의 형식을 재정의합니다. 예를 들어 테이블 셀 내에 h2 제목이 나타날 때마다 선택기 td h2를 적용합니다. 고급 스타일은 특정 id 속성이 포함된 태그의 형식을 재정의할 수도 있습니다. 예를 들어 #myStyle로 정의된 스타일은 속성/값 쌍 id="myStyle"이 포함된 모든 태그에 적용될 수 있습니다.
새 스타일 시트 만들기
먼저 단락 텍스트 스타일을 정의하는 CSS 규칙이 포함된 외부 스타일 시트를 만듭니다. 외부 스타일 시트에 스타일을 만들면 각 웹 페이지의 스타일을 개별적으로 설정할 필요 없이 중앙 위치에서 동시에 여러 웹 페이지의 모양을 제어할 수 있습니다.
CSS 규칙은 다음 위치에 있을 수 있습니다.
외부 CSS 스타일 시트는 별도의 외부 .css 파일(HTML 파일 아님)에 저장된 일련의 CSS 규칙입니다. .css 파일은 문서의 헤드 섹션에 있는 링크를 사용하여 웹 사이트의 하나 이상의 페이지에 연결됩니다.
내부(또는 포함된) CSS 스타일 시트는 HTML 문서의 헤드 섹션에 있는 스타일 태그 내에 포함된 일련의 CSS 규칙입니다.
예를 들어, 다음 예에서는단락
태그가 설정된 문서의 모든 텍스트에 대한 글꼴 크기를 정의합니다.
<스타일>
피{
글꼴 크기:80px
}
</style>
</head>：
인라인 스타일은 HTML 문서 내의 특정 태그 인스턴스 내에 정의됩니다. 예를 들어,
"p 스타일="글꼴 크기: 9px""
인라인 스타일을 포함하는 태그로 서식이 지정된 단락에 대해서만 글꼴 크기를 정의합니다.
Dreamweaver는 사용자가 적용한 대부분의 스타일 속성을 렌더링하고 문서 창에 표시합니다. 브라우저 창에서 문서를 미리 보고 스타일이 어떻게 적용되는지 확인할 수도 있습니다. 일부 CSS 스타일 속성은 Microsoft Internet Explorer, Netscape Navigator, Opera 및 Apple Safari에서 다르게 나타납니다.
"파일">"새로 만들기"를 선택합니다.
새 문서 대화 상자의 범주 열에서 기본 페이지를 선택하고 기본 페이지 열에서 CSS를 선택한 다음 만들기를 클릭합니다.
문서 창에 빈 스타일 시트가 나타납니다. 디자인 보기 및 코드 보기 버튼이 비활성화되었습니다. CSS 스타일 시트는 일반 텍스트 파일이며 해당 내용은 브라우저에서 보는 데 사용되지 않습니다.
이 페이지를 Cafe_townsend.css로 저장("파일">"저장")하세요.
스타일 시트를 저장할 때, 이를 Cafe_townsend 폴더(웹 사이트의 루트 폴더)에 저장하십시오.
스타일시트에 다음 코드를 입력합니다.
p{
글꼴 모음: Verdana, sans-serif;
글꼴 크기: 11px;
색상: #000000;
줄 높이: 18px;
패딩: 3px;
}
코드를 입력하면 Dreamweaver는 코드 힌트를 사용하여 입력을 완료하는 데 도움이 되는 옵션을 제안합니다. Dreamweaver에서 자동으로 완성할 코드가 보이면 Enter(Windows) 또는 Return(Macintosh)을 누르십시오.
각 줄 끝의 속성 값 뒤에 세미콜론을 추가하는 것을 잊지 마십시오.
완성된 코드는 다음 예와 같습니다.
가이드를 표시하려면 도움말 > 참조를 선택한 다음 참조 패널의 팝업 메뉴에서 O'Reilly CSS 참조를 선택합니다. 스타일시트를 저장합니다.
첨부된 스타일시트
웹 페이지에 스타일 시트를 첨부하면 스타일 시트에 정의된 규칙이 페이지의 해당 요소에 적용됩니다. 예를 들어, Cafe_townsend.css 스타일 시트를 index.html 페이지에 첨부하면 모든 단락 텍스트(HTML 코드의 태그로 서식이 지정된 텍스트)는 정의한 CSS 규칙에 따라 서식이 지정됩니다.
문서 창에서 Cafe Townsend의 index.html 파일을 엽니다. (파일이 이미 열려 있으면 해당 탭을 클릭하세요.)
자습서: 페이지에 콘텐츠 추가에서 페이지에 붙여넣은 첫 번째 텍스트를 선택합니다.
속성 관리자를 보고 단락 태그를 사용하여 단락의 서식이 지정되었는지 확인하세요.
속성 관리자의 서식 팝업 메뉴에 단락이라고 표시되면 해당 단락은 단락 태그를 사용하여 서식이 지정된 것입니다. 속성 관리자의 서식 팝업 메뉴에 없음 또는 기타 항목이 표시되면 단락을 선택하여 단락 서식을 지정합니다.
두 번째 단락에 대해 3단계를 반복합니다.
CSS 스타일 패널(창 > CSS 스타일)에서 패널 오른쪽 하단에 있는 스타일 시트 첨부 버튼을 클릭합니다.
외부 스타일 시트 첨부 대화 상자에서 찾아보기를 클릭하고 이전 섹션에서 생성한 Cafe_townsend.css 파일을 찾습니다.
확인을 클릭하세요.
문서 창의 텍스트 서식은 외부 스타일 시트의 CSS 규칙에 따라 지정됩니다.
CSS 스타일 패널 살펴보기
CSS 스타일 패널을 사용하면 현재 선택한 페이지 요소 또는 전체 문서에 영향을 미치는 CSS 규칙 및 속성을 추적하고 외부 스타일 시트를 열지 않고도 CSS 속성을 수정할 수 있습니다.
문서 창에 index.html 페이지가 열려 있는지 확인하세요.
CSS 스타일 패널(창 > CSS 스타일)에서 패널 상단에 있는 모두를 클릭한 다음 CSS 규칙을 확인하세요.
"모두" 모드에서 CSS 패널에는 외부 스타일 시트에 있든 자체 문서에 있든 현재 문서에 적용되는 모든 CSS 규칙이 표시됩니다. 모든 규칙 창에는 태그 카테고리와 Cafe_townsend.css 카테고리라는 두 가지 주요 카테고리가 표시됩니다.
레이블 범주가 확장되지 않은 경우 더하기 기호(+)를 클릭하여 범주를 확장합니다.
신체 규칙을 클릭합니다.
값이 #000000인 배경색 속성이 아래쪽 속성 창에 나타납니다.
전체 CSS 스타일 패널을 보려면 파일 패널과 같은 다른 패널을 축소해야 할 수도 있고, 창 사이의 테두리를 드래그하여 CSS 스타일 패널의 길이를 변경할 수도 있습니다.
튜토리얼: 테이블 기반 페이지 레이아웃 만들기에서 페이지 속성 수정 대화 상자를 사용하여 페이지의 배경색을 설정합니다. 이런 방식으로 페이지 속성을 설정하면 Dreamweaver는 문서에 내장된 CSS 스타일을 작성합니다.
더하기 기호(+)를 클릭하여 Cafe_townsend.css 카테고리를 확장하세요.
pRule을 클릭합니다.
p 규칙의 외부 스타일 시트에 정의된 모든 속성과 값은 아래 속성 창에 나타납니다.
문서 창에서 방금 서식을 지정한 두 단락의 아무 곳이나 한 번 클릭합니다.
CSS 스타일 패널에서 패널 상단에 있는 현재를 클릭한 다음 CSS 스타일을 검사합니다. 현재 모드에서는 CSS 패널에 현재 선택 항목의 속성 요약이 표시됩니다. 표시된 속성은 외부 스타일 시트의 p 규칙 속성에 해당합니다.
다음 섹션에서는 CSS 스타일 패널을 사용하여 새 규칙을 만듭니다. CSS 스타일 패널을 사용하여 새 규칙을 만드는 것은 원래 외부 스타일 시트를 만들 때처럼 규칙을 수동으로 입력하는 것보다 훨씬 쉽습니다.
새 CSS 규칙 만들기
이 섹션에서는 CSS 스타일 패널을 사용하여 사용자 정의 CSS 규칙 또는 클래스 스타일을 만듭니다. 클래스 스타일을 사용하면 모든 범위 또는 텍스트 블록의 스타일 속성을 설정할 수 있으며 모든 HTML 태그에 적용할 수 있습니다. 다양한 유형의 CSS 규칙에 대한 자세한 내용은 CSS 이해를 참조하세요.
CSS 스타일 패널에서 패널 오른쪽 하단에 있는 새 CSS 규칙을 클릭합니다.
새 CSS 규칙 대화 상자의 선택기 유형 옵션에서 클래스를 선택합니다. 이 옵션은 기본적으로 선택되어야 합니다.
이름 텍스트 상자에 .bold를 입력합니다.
"굵게"라는 단어 앞에 마침표(.)를 입력해야 합니다. 모든 수업 스타일은 마침표로 시작해야 합니다.
"정의" 팝업 메뉴에서 Cafe_townsend.css를 선택하세요. 이 파일은 기본적으로 선택되어야 합니다.
확인을 클릭하세요.
Cafe_townsend.css 파일에 .bold라는 클래스 스타일을 생성 중임을 나타내는 CSS 규칙 정의 대화 상자가 나타납니다.
"CSS 규칙 정의" 대화 상자에서 다음을 수행합니다.
"글꼴" 텍스트 상자에 Verdana, sans-serif를 입력합니다.
크기 텍스트 상자에 11을 입력하고 바로 오른쪽에 있는 팝업 메뉴에서 픽셀을 선택합니다.
행 높이 텍스트 상자에 18을 입력하고 바로 오른쪽에 있는 팝업 메뉴에서 픽셀을 선택합니다.
체중 팝업 메뉴에서 볼드체를 선택하십시오.
색상 텍스트 상자에 #990000을 입력합니다.
팁 CSS 속성에 대한 자세한 내용은 Dreamweaver에 포함된 O'Reilly 참조 안내서를 참조하십시오. 가이드를 표시하려면 도움말 > 참조를 선택한 다음 참조 패널의 팝업 메뉴에서 O'Reilly CSS 참조를 선택합니다.
확인을 클릭하세요.
CSS 스타일 패널 상단에 있는 모두 버튼을 클릭합니다.
Cafe_townsend.css 카테고리가 확장되지 않은 경우 카테고리 옆에 있는 더하기(+) 버튼을 클릭하세요.
Dreamweaver가 외부 스타일 시트에 정의된 규칙 목록에 .bold 클래스 스타일을 추가한 것을 확인할 수 있습니다. 모든 규칙 창에서 .bold 규칙을 클릭하면 규칙의 속성이 속성 창에 나타납니다. 새 규칙은 속성 관리자의 스타일 팝업 메뉴에도 나타납니다.
텍스트에 클래스 스타일 적용
이제 클래스 규칙을 만들고 이를 일부 단락 텍스트에 적용했습니다.
문서 창에서 첫 번째 단락 텍스트의 처음 4개 단어인 Cafe Townsend's Visionary Chef를 선택합니다.
속성 관리자(윈도우 > 속성)의 스타일 팝업 메뉴에서 볼드체를 선택합니다.
텍스트에 "굵게" 스타일이 적용됩니다.
2단계를 반복하여 두 번째 단락의 처음 4개 단어에 "굵게" 스타일 스타일을 적용합니다.
페이지를 저장합니다.
탐색 모음 텍스트 서식 지정
다음으로 CSS를 사용하여 탐색 모음의 링크 텍스트에 스타일을 적용하겠습니다. 많은 웹 페이지에서는 텍스트가 포함된 컬러 직사각형 이미지를 사용하여 탐색 모음을 만듭니다. 그러나 CSS를 사용하는 경우 설정해야 할 것은 링크 텍스트와 일부 서식뿐입니다. display:block 속성을 사용하고 블록의 너비를 설정하면 추가 이미지를 사용하지 않고도 효과적으로 직사각형을 만들 수 있습니다.
탐색을 위한 새 규칙 만들기
Cafe_townsend.css 파일이 아직 열려 있지 않은 경우 열거나 해당 탭을 클릭하여 파일을 표시합니다.
파일의 .bold 클래스 스타일 뒤에 다음 코드를 입력하여 새 규칙을 정의하십시오.
.navigation {
}
이는 빈 규칙입니다.
파일의 코드는 다음 예와 같아야 합니다.
Cafe_townsend.css 파일을 저장합니다.
다음으로 CSS 스타일 패널을 사용하여 규칙에 속성을 추가하겠습니다.
index.html 파일이 열려 있지 않으면 파일을 엽니다.
CSS 스타일 패널에서 모든 모드가 선택되어 있는지 확인하고 새 .navigation 규칙을 선택한 다음 패널 오른쪽 하단에 있는 스타일 편집을 클릭합니다.
"CSS 규칙 정의" 대화 상자에서 다음을 수행합니다.
"글꼴" 텍스트 상자에 Verdana, sans-serif를 입력합니다.
크기 팝업 메뉴에서 16을 선택한 다음 바로 오른쪽에 있는 팝업 메뉴에서 픽셀을 선택합니다.
스타일 팝업 메뉴에서 일반을 선택합니다.
수정 목록에서 없음을 선택합니다.
체중 팝업 메뉴에서 볼드체를 선택하십시오.
색상 텍스트 상자에 #FFFFFF를 입력합니다.
가이드를 표시하려면 도움말 > 참조를 선택한 다음 참조 패널의 팝업 메뉴에서 O'Reilly CSS 참조를 선택합니다.
확인을 클릭하세요.
이제 CSS 스타일 패널을 사용하여 .navigation 규칙에 더 많은 속성을 추가하겠습니다.
CSS 스타일 패널에서 .navigation 규칙이 선택되어 있는지 확인한 다음 목록 보기 표시를 클릭합니다.
목록 보기를 사용하면 속성 창에 사용 가능한 모든 속성이 사전순으로 표시됩니다(설정된 속성만 표시하는 속성 설정 보기와는 다름).
background-color 속성 오른쪽에 있는 열을 클릭합니다.
속성의 전체 내용을 보려면 속성 위에 마우스 포인터를 놓습니다.
16진수 값 #993300을 입력하고 Enter(Windows) 또는 Return(Macintosh)을 누릅니다.
팁 작업이 외부 스타일 시트에 미치는 영향을 보려면 작업하는 동안 문서 창에 Cafe_townsend.css 파일을 열어 두십시오. CSS 스타일 패널에서 항목을 선택하면 Dreamweaver가 스타일 시트에 CSS 코드를 작성하는 것도 볼 수 있습니다.
표시 속성을 찾고(아래로 스크롤해야 할 수도 있음) 오른쪽 열을 한 번 클릭한 다음 팝업 메뉴에서 블록을 선택합니다.
padding 속성을 찾아 오른쪽 열을 한 번 클릭한 후 8px 값을 입력하고 Enter(Windows) 또는 Return(Macintosh)을 누릅니다.
너비 속성을 찾고 오른쪽 열을 한 번 클릭한 다음 첫 번째 텍스트 상자에 140을 입력하고 팝업 메뉴에서 픽셀을 선택한 다음 Enter(Windows) 또는 Return(Macintosh)을 누릅니다.
속성 창에서 설정한 속성만 표시하려면 설정 속성 표시를 클릭합니다.
Cafe_townsend.css 파일을 클릭하면 표시됩니다. Dreamweaver가 사용자가 지정한 모든 속성을 파일에 추가한 것을 볼 수 있습니다.
Cafe_townsend.css 파일을 저장하고 닫습니다.
이제 탐색 모음 텍스트의 형식을 지정하는 규칙을 만들었습니다. 다음으로 선택한 링크에 규칙을 적용하겠습니다.
규칙 적용
문서 창에 index.html 페이지가 열려 있는 상태에서 Cuisine이라는 단어를 클릭하여 단어 어딘가에 삽입 지점을 놓습니다.
라벨 선택기에서 가장 오른쪽 라벨을 클릭합니다.
이 작업은 지정된 레이블이나 링크에 대한 모든 텍스트를 선택합니다.
속성 관리자(창 > 속성)의 스타일 팝업 메뉴에서 탐색을 선택합니다.
문서 창에서 요리 텍스트의 모양이 완전히 변경되었습니다. 이제 텍스트는 이전 섹션에서 .navigation 규칙에 대해 정의한 속성을 기반으로 탐색 모음 버튼으로 형식이 지정되었습니다.
탐색 표시줄의 각 링크에 대해 1~3단계를 반복합니다.
각 레이블이나 링크에 탐색 클래스 스타일을 할당해야 하므로 레이블 선택기를 사용하여 각 링크를 개별적으로 선택한 다음 각 링크에 클래스 스타일을 하나씩 할당하는 것이 중요합니다.
링크 텍스트의 형식을 지정하는 데 문제가 있는 경우 연결된 각 단어(또는 그룹) 사이에 공백(캐리지 리턴 아님)이 있는지 확인하세요. 또한 두 링크 사이의 공간이 자체적으로 연결되어 있지 않은지 확인하십시오. 공백이 연결된 경우 연결된 공백을 주의 깊게 선택하고 속성 관리자에서 링크 텍스트 상자를 지운 다음 Enter(Windows) 또는 Return(Macintosh)을 누릅니다.
탐색 모음에서 모든 단어의 서식을 지정했으면 페이지를 저장하고 브라우저에서 작업 내용을 미리 봅니다(파일 > 브라우저에서 미리 보기).
링크를 클릭하면 작동하는지 확인할 수 있습니다.
마우스 오버 효과 추가
이제 마우스 포인터가 링크 위로 지나갈 때마다 탐색 모음의 배경색이 변경되도록 하는 롤오버 효과를 추가하겠습니다. 마우스오버 효과를 추가하려면 :hover 가상 클래스를 포함하는 새 규칙을 추가하세요.
정보... 정보:hover 의사 클래스 의사 클래스는 문서 자체의 HTML 코드를 기반으로 하지 않고 웹 브라우저에서 적용되는 다른 외부 조건을 기반으로 HTML 문서의 특정 요소에 영향을 미치는 방법입니다. 의사 클래스는 동적일 수 있습니다. 즉, 사용자가 문서와 상호 작용할 때 페이지의 요소가 의사 클래스를 얻거나 잃을 수 있습니다.
:hover 의사 클래스는 사용자가 요소 위로 마우스 포인터를 가져갈 때 형식이 지정된 페이지 요소의 변경 사항에 영향을 줍니다. 예를 들어, :hover 의사 클래스를 .navigation 클래스 스타일(.navigation:hover)에 추가하여 새 규칙을 생성하면 .navigation 규칙으로 형식이 지정된 모든 텍스트 요소는 .navigation의 속성에 따라 변경됩니다. 호버 규칙.
Cafe_townsend.css 파일을 엽니다.
전체 .navigation 규칙을 선택합니다.
텍스트를 복사합니다("편집">"복사").
규칙 끝을 한 번 클릭한 다음 Enter(Windows) 또는 Return(Macintosh)을 몇 번 더 눌러 공간을 만듭니다.
방금 만든 공간에 복사한 텍스트를 붙여넣습니다("편집" > "붙여넣기").
다음과 같이 붙여넣은 .navigation 선택기에 :hover 의사 클래스를 추가합니다.
새로운 .navigation:hover 규칙에서 현재 배경색(#993300)을 #D03D03으로 바꿉니다.
파일을 저장하고 닫습니다.
문서 창에서 index.html 파일을 열고 브라우저에서 페이지를 미리 봅니다(파일 > 브라우저에서 미리 보기).
링크 위에 마우스 포인터를 놓으면 새로운 마우스 오버 효과를 볼 수 있습니다.