이 항목을 통해 CSS 규칙, 선택기, 상속 등과 같은 CSS의 기본 개념을 살펴보시기 바랍니다. 또한 Dreamweaver에서 웹 페이지와 CSS를 연결하는 방법에 대해서도 살펴봅니다.
CSS(Cascading Style Sheets) 정보
Cascading Style Sheets(CSS)는 웹 페이지에서 콘텐츠의 모양을 제어하는 서식 규칙의 모음입니다. CSS 스타일을 사용하여 페이지의 서식을 지정하면 콘텐츠와 표시를 분리할 수 있습니다. 페이지의 콘텐츠인 HTML 코드는 HTML 파일에 있고, 코드의 표시를 정의하는 CSS 규칙은 다른 파일(외부 스타일 시트)이나 HTML 문서의 다른 부분(보통 head 섹션)에 있습니다. 콘텐츠와 표시를 분리하면 변경할 때마다 모든 페이지의 모든 속성을 업데이트할 필요가 없으므로 중앙 위치에서 사이트의 모양을 훨씬 쉽게 유지 관리할 수 있습니다. 콘텐츠와 표시를 분리하면 더 단순하고 깔끔한 HTML 코드가 생성되어 브라우저 로딩 시간이 단축되고 접근성 문제가 있는 사람들(예: 스크린 리더를 사용하는 사람들)의 탐색이 단순해집니다.
CSS를 사용하면 페이지의 정확한 모양을 매우 유연하고 세밀하게 제어할 수 있습니다.CSS를 사용하면 특정 글꼴과 글꼴 크기, 굵게, 기울임꼴, 밑줄, 텍스트 그림자, 텍스트 색상과 배경색, 링크 색상과 링크 밑줄 등 다양한 텍스트 속성을 제어할 수 있습니다. CSS를 사용하여 글꼴을 제어하면 여러 브라우저에서 페이지 레이아웃과 모양을 더 일관되게 처리할 수도 있습니다.
텍스트 서식 지정 외에도 CSS를 사용하여 웹 페이지에서 블록 레벨 요소의 형식과 위치를 제어할 수 있습니다. 블록 레벨 요소는 독립된 콘텐츠 단위로, 일반적으로 HTML에서 새 줄로 구분되며 시각적으로 블록 형태로 표시됩니다.예를 들어 h1 태그, p 태그, div 태그는 모두 웹 페이지에서 블록 레벨 요소를 생성합니다. 블록 레벨 요소에 여백과 테두리를 설정하고, 특정 위치에 배치하고, 배경색을 추가하고, 텍스트를 주변에 배치하는 등의 작업을 할 수 있습니다.블록 레벨 요소를 조작하는 것은 본질적으로 CSS로 페이지를 레이아웃하는 방법입니다.
CSS 규칙 정보
CSS 형식 지정 규칙은 선택기와 선언(또는 대부분의 경우 선언 블록) 두 부분으로 구성됩니다.선택기는 형식이 지정된 요소를 식별하는 용어(p, h1, 클래스 이름 또는 id 등)이며, 선언 블록은 스타일 속성을 정의합니다.다음 예에서 h1은 선택기이고 중괄호({}) 사이의 모든 것이 선언 블록입니다:
h1 {
font-size: 16 픽셀;
font-family: Helvetica;
font-weight:bold;
}
개별 선언은 속성 (font-family와 같은)과 값(Helvetica와 같은)의 두 부분으로 구성됩니다. 이전 CSS 규칙에서 h1 태그에 대한 특정 스타일이 만들어졌습니다. 이 스타일에 연결된 모든 h1 태그의 텍스트는 16픽셀 크기, Helvetica 글꼴, 굵게로 표시됩니다.
스타일(규칙 또는 규칙의 모음에서 나오는)은 실제 서식을 지정하는 텍스트와 분리된 장소에 있습니다. 일반적으로 외부 스타일 시트나 HTML 문서의 head 부분에 있습니다. 따라서 h1 태그에 대한 하나의 규칙이 한 번에 여러 태그에 적용될 수 있습니다(외부 스타일 시트의 경우 여러 다른 페이지에서 한 번에 여러 태그에 규칙을 적용할 수 있습니다). 이런 방식으로 CSS는 매우 쉬운 업데이트 기능을 제공합니다. 한 곳에서 CSS 규칙을 업데이트하면 정의된 스타일을 사용하는 모든 요소의 서식이 자동으로 새로운 스타일로 업데이트됩니다.
Dreamweaver에서는 다음과 같은 유형의 스타일을 정의할 수 있습니다.
클래스 스타일을 사용하면 페이지의 모든 요소나 여러 요소에 스타일 속성을 적용할 수 있습니다.
HTML 태그 스타일은 h1과 같은 특정 태그의 서식을 재정의합니다. h1 태그에 대한 CSS 스타일을 생성하거나 변경하면 h1 태그로 서식이 지정된 모든 텍스트가 즉시 업데이트됩니다.
고급 스타일은 특정 요소 조합이나 CSS에서 허용하는 다른 선택기 형식의 서식을 재정의합니다 (예: td h2 선택기는 h2 헤더가 표 셀 내부에 나타날 때 적용됩니다.) 고급 스타일은 특정 id 속성을 포함하는 태그의 서식을 재정의할 수도 있습니다 (예: #myStyle로 정의된 스타일은 id="myStyle" 속성-값 쌍을 포함하는 모든 태그에 적용됩니다).
CSS 규칙은 다음 위치에 있을 수 있습니다.
외부 CSS 스타일 시트
별도의 외부 CSS (.css) 파일(HTML 파일이 아님)에 저장된 CSS 규칙 모음입니다. 이 파일은 문서의 head 섹션에서 링크나 @import 규칙을 사용하여 웹 사이트의 하나 이상의 페이지에 연결됩니다.
내부(또는 임베디드) CSS 스타일 시트
HTML 문서의 head 부분에 있는 style 태그에 포함된 CSS 규칙 모음입니다.
인라인 스타일
HTML 문서 전체에서 특정 태그 인스턴스 내에 정의됩니다. 인라인 스타일은 사용하지 않는 것이 좋습니다.
Dreamweaver는 기존 문서에 정의된 스타일이 CSS 스타일 지침을 준수하는 한 이를 인식합니다. Dreamweaver는 또한 적용된 대부분의 스타일을 디자인 보기에서 직접 렌더링합니다. (하지만 브라우저 창에서 문서를 미리보기하면 페이지의 가장 정확한 "실시간" 렌더링을 확인할 수 있습니다.) 일부\nCSS 스타일은 Microsoft Internet Explorer,\nNetscape, Opera, Apple Safari 또는 기타 브라우저에서 다르게 렌더링되며,\n일부는 현재 어떤 브라우저에서도 지원되지 않습니다.
겹쳐 놓기 스타일 정보
캐스케이딩이라는 용어는 브라우저가 최종적으로 웹 페이지의 특정 요소에 대한 스타일을 표시하는 방식을 의미합니다.세 가지 다른 소스가 웹 페이지에서 볼 수 있는 스타일을 담당합니다: 페이지 작성자가 만든 스타일시트, 사용자의 맞춤형 스타일 선택(있는 경우), 그리고 브라우저 자체의 기본 스타일입니다.이전 주제에서는 웹 페이지와 해당 페이지에 첨부된 스타일시트의 작성자로서 웹 페이지용 스타일을 만드는 방법을 설명했습니다.하지만 브라우저에도 웹 페이지의 렌더링을 지시하는 자체 기본 스타일시트가 있으며, 사용자는 웹 페이지의 표시를 조정하는 선택을 통해 브라우저를 맞춤 설정할 수 있습니다.웹 페이지의 최종 모습은 이 세 가지 소스의 규칙이 모두 함께 작용하여(또는 \"종속되어\") 웹 페이지를 최적의 방식으로 렌더링한 결과입니다.
일반적인 태그인 단락 태그 또는 <p> 태그가 이 개념을 보여줍니다.기본적으로 브라우저는 단락 텍스트(즉, HTML 코드의 <p> 태그 사이에 있는 텍스트)에 대한 글꼴과 글꼴 크기를 정의하는 스타일시트와 함께 제공됩니다.예를 들어 Internet Explorer에서는 단락 텍스트를 포함한 모든 본문 텍스트가 기본적으로 Times New Roman, Medium 글꼴로 표시됩니다.
그러나 웹 페이지의 작성자로서 단락 글꼴과 글꼴 크기에 대한 브라우저의 기본 스타일을 재정의하는 스타일시트를 만들 수 있습니다.예를 들어 스타일시트에서 다음 규칙을 만들 수 있습니다:
p {
font-family: Arial;
font-size: small;
}
사용자가 페이지를 로드할 때, 작성자가 설정한 단락 글꼴 및 글꼴 크기 설정이 브라우저의 기본 단락 텍스트 설정을 재정의합니다.
사용자는 자신의 용도에 최적화된 방식으로 브라우저 디스플레이를 사용자 정의할 수 있습니다.예를 들어 Internet Explorer에서 사용자는 [보기] > [텍스트 크기] > [가장 큼]을 선택하여 글꼴이 너무 작다고 생각할 경우 페이지 글꼴을 더 읽기 쉬운 크기로 확장할 수 있습니다. 결국(적어도 이 경우에는) 사용자의 선택이 단락 글꼴 크기에 대한 기본 브라우저 스타일과 웹 페이지 작성자가 만든 단락 스타일을 모두 재정의합니다.
상속은 겹쳐 놓기의 또 다른 중요한 부분입니다. 웹 페이지의 대부분 요소에 대한 속성은 상속됩니다. 예를 들어 단락 태그는 본문 태그에서 특정 속성을 상속하고, span 태그는 단락 태그에서 특정 속성을 상속합니다. 따라서 스타일 시트에서 다음 규칙을 만들면:
body {
font-family: Arial;
font-style: italic;
}
본문 태그의 위와 같은 속성은 단락 태그로 상속되므로 웹 페이지의 모든 단락 텍스트 및 단락 태그의 속성을 상속하는 텍스트는 Arial 및 기울임체로 표시됩니다. 그러나 이러한 규칙을 보다 명확하게 할 수 있으며 상속에 대한 표준 법칙을 재정의하는 스타일을 만들 수도 있습니다. 예를 들어 스타일 시트에 다음과 같은 규칙을 만드는 경우를 가정해 봅니다.
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
모든 본문 텍스트는 Arial 기울임꼴이 되지만 단락(및 상속된) 텍스트는 Courier 표준(기울임꼴 아님)으로 표시됩니다. 기술적으로 단락 태그는 먼저 본문 태그에 설정된 속성을 상속하지만 자체적으로 정의된 속성이 있기 때문에 해당 속성을 무시합니다. 즉, 페이지 요소는 일반적으로 위에서 속성을 상속하지만, 태그에 속성을 직접 적용하면 항상 표준 상속 공식을 재정의합니다.
위에서 논의한 모든 요소와 CSS 특수성(특정 종류의 CSS 규칙에 다른 가중치를 부여하는 시스템), CSS 규칙의 순서와 같은 기타 요소가 결합되어 우선순위가 높은 항목이 우선순위가 낮은 속성을 재정의하는 복잡한 캐스케이드를 형성합니다.종속, 상속 및 특수성을 관리하는 규칙에 대한 자세한 내용을 보려면 www.w3.org/TR/CSS2/cascade.html을 방문하십시오.
텍스트 서식 적용 및 CSS 정보
기본적으로 Dreamweaver에서는 CSS(겹쳐 놓기 스타일 시트)를 사용하여 텍스트 서식을 적용합니다. 속성 관리자 또는 메뉴 명령을 사용하여 텍스트에 스타일을 적용하면 CSS 규칙이 만들어지고 현재 문서의 헤드에 임베드됩니다.
CSS Designer를 사용하여 CSS 규칙과 속성을 만들고 편집할 수도 있습니다. CSS Designer는 속성 관리자보다 훨씬 강력한 편집기로서, 규칙이 문서 헤드에 임베드되는지 또는 외부 스타일 시트에 임베드되는지에 상관없이 현재 문서에 대해 정의된 모든 CSS 규칙을 표시합니다. Adobe는 CSS를 만들고 편집하는 주 도구로 속성 관리자보다는 CSS Designer를 사용할 것을 권장합니다. 코드가 보다 쉽게 유지 관리할 수 있도록 정리되기 때문입니다.
CSS Designer에 대한 자세한 내용은 CSS Designer를 사용하여 페이지 레이아웃하기를 참조하십시오.
사용자가 만든 스타일 및 스타일 시트 외에 Dreamweaver에 포함된 스타일 시트를 사용하여 문서에 스타일을 적용할 수도 있습니다.
CSS로 텍스트 서식을 지정하는 튜토리얼에 대해서는 www.adobe.com/go/vid0153을 참조하십시오.
대표 CSS 속성 정보
CSS 사양에서는 축약 CSS라고 하는 축약 구문을 사용하여 스타일을 만들 수 있습니다. 축약 CSS를 사용하면 단일 선언으로 여러 속성의 값을 지정할 수 있습니다. 예를 들어, font 속성을 사용하면 font-style, font-variant, font-weight, font-size, line-height, font-family 속성을 한 줄에 설정할 수 있습니다.
CSS 단축 속성을 사용할 때 주의해야 할 중요한 사항은 단축 CSS 속성에서 생략된 값들이 기본값으로 할당된다는 점입니다.동일한 태그에 두 개 이상의 CSS 규칙이 할당된 경우 페이지가 올바르게 표시되지 않을 수 있습니다.
예를 들어, 아래에 표시된 h1 규칙은 롱핸드 CSS 구문을 사용합니다.font-variant, font-stretch, font-size-adjust, font-style 속성이 기본값으로 할당되었다는 점에 유의하십시오.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
단일 단축 속성으로 다시 작성하면 동일한 규칙이 다음과 같이 나타날 수 있습니다:
h1 { font: bold 16pt/18pt Arial }
단축 표기법을 사용하여 작성할 때 생략된 값은 자동으로 기본값이 할당됩니다.따라서 이전 단축 예제에서는 font-variant, font-style, font-stretch, font-size-adjust 태그가 생략되었습니다.
두 곳 이상에서 스타일을 정의한 경우(예: HTML 페이지에 포함된 스타일과 외부 스타일시트에서 가져온 스타일 모두) CSS 구문의 단축 형식과 긴 형식을 모두 사용하면, 단축 규칙에서 생략된 속성이 다른 규칙에서 명시적으로 설정된 속성을 재정의(또는 cascade)할 수 있습니다.
이러한 이유로 Dreamweaver는 기본적으로 CSS의 긴 형식 표기법을 사용합니다.이렇게 하면 단축 규칙이 롱핸드 규칙을 재정의하여 발생할 수 있는 문제를 방지할 수 있습니다.Dreamweaver에서 단축 CSS 표기법으로 코딩된 웹 페이지를 열면, Dreamweaver가 롱핸드 형식을 사용하여 새 CSS 규칙을 만든다는 점에 유의하십시오.기본 설정 대화 상자의 CSS 스타일 범주에서 CSS 편집 기본 설정을 변경하여 Dreamweaver가 CSS 규칙을 만들고 편집하는 방법을 지정할 수 있습니다(Windows의 경우 [편집] > [기본 설정], Macintosh의 경우 [Dreamweaver] > [기본 설정]).
Dreamweaver 및 CSS
Dreamweaver에서는 여러 가지 방법으로 CSS를 사용할 수 있습니다:
- CSS Designer를 사용하여 최소한의 코딩으로 CSS를 빌드할 수 있습니다. 자세한 내용은 CSS Designer를 사용하여 페이지 레이아웃 지정을 참조하십시오.
- 수동으로 CSS를 코딩할 수도 있습니다. Dreamweaver에서 제공하는 코딩 기능에 대한 자세한 내용은 Dreamweaver의 코딩 환경을 참조하십시오.
- Sass, Scss 또는 Less 파일로 작업하려는 경우에는 자주 사용하는 구문으로 파일을 코딩하고 이를 Dreamweaver에서 사용할 수 있습니다. 자세한 내용은 CSS 전처리기를 참조하십시오.
