CSS(Cascading Style Sheets)의 이해

CSS(겹쳐 놓기 스타일 시트)는 웹 페이지의 내용이 나타나는 모양을 제어하는 서식 적용 규칙을 모은 것입니다. CSS를 사용하여 페이지 서식을 지정하면 실제 내용과 표시 내용을 분리할 수 있습니다. 페이지 내용(HTML 코드)은 HTML 파일에 있고, 코드 표시를 정의하는 CSS 규칙은 다른 파일(외부 스타일 시트)이나 HTML 문서의 다른 부분(일반적으로 head 섹션)에 있습니다. 내용과 표시를 분리하면 변경을 수행할 때마다 모든 페이지의 속성을 업데이트하지 않아도 되므로 중앙에서 사이트의 모양을 보다 쉽게 관리할 수 있습니다. 또한 내용과 표시를 분리하면 HTML 코드를 간결하게 정리할 수 있으므로 브라우저 로드 시간이 단축되고 화면 판독기 등에서의 내비게이션이 단순화되어 액세스 가능성이 향상됩니다.

CSS를 사용하면 정확한 페이지 모양을 보다 유연하게 제어할 수 있습니다. 또한 굵게, 기울임체, 밑줄, 텍스트 그림자, 텍스트 색상 및 배경색, 링크 색상 및 링크 밑줄 등의 특정 글꼴 및 글꼴 크기를 비롯하여 많은 텍스트 속성을 제어할 수 있습니다. CSS를 사용하여 글꼴을 제어하면 여러 브라우저에서 페이지 레이아웃과 모양을 일관되게 적용할 수 있다는 장점도 있습니다.

이러한 텍스트 서식을 적용하는 것 외에도, 웹 페이지에 있는 블록 수준 요소의 서식과 위치를 제어할 수도 있습니다. 블록 수준 요소는 독립적인 내용 부분으로 대부분의 경우 HTML에서 새 행으로 구분되고 하나의 블록으로 서식 지정되어 표시됩니다. 예를 들어 h1 태그, p 태그 및 div 태그는 모두 웹 페이지에서 블록 수준 요소를 만듭니다. 블록 수준 요소의 여백과 테두리를 설정하여 특정 위치에 배치하고 배경색을 추가하거나 주위에 부동 텍스트를 설정하는 등의 작업을 수행할 수 있습니다. CSS를 사용한 페이지 레이아웃 지정의 기본은 블록 수준 요소를 조작하는 것입니다.

CSS 규칙 정보

CSS 서식 적용 규칙은 선택기와 선언(대부분의 경우 선언 블록)의 두 부분으로 구성되어 있습니다. 선택기는 서식이 지정된 요소를 식별하는 용어(예: p, h1, 클래스 이름, ID)입니다. 선언 블록은 스타일 속성을 정의합니다. 다음 예제에서 h1은 선택기이고, 중괄호({}) 사이에 있는 모든 값은 선언 블록입니다.

개별 선언은 속성(예: font-family)과 값(예: Helvetica)이라는 두 부분으로 구성됩니다. 이전 CSS 규칙에서 h1 태그에 사용하기 위해 특정 스타일을 만들었습니다. 이 스타일에 연결된 모든 h1 태그의 텍스트는 16픽셀 크기의 굵은 Helvetica 글꼴로 표시됩니다.

규칙 또는 규칙 모음에서 가져온 스타일은 실제 텍스트와 구분된 위치에 있으며, 그 서식은 보통 외부 스타일시트에 있거나 HTML 문서의 헤드 부분에 있습니다. 따라서 h1 태그의 한 가지 규칙을 여러 태그에 한 번에 적용할 수 있으며, 외부 스타일시트의 경우에는 이 규칙을 서로 다른 페이지의 여러 태그에 한 번에 적용할 수 있습니다. 이런 식으로 CSS는 매우 쉬운 업데이트 기능을 제공합니다. 한곳에서 CSS 규칙을 업데이트하면 정의된 스타일을 사용하는 모든 요소의 서식이 새 스타일로 자동 업데이트됩니다.

Dreamweaver에서는 다음과 같은 유형의 스타일을 정의할 수 있습니다.

• 클래스 스타일을 통해 페이지의 한 요소 또는 여러 요소에 스타일 속성을 적용할 수 있습니다.

• HTML 태그 스타일 - h1과 같은 특정 태그의 서식을 재정의합니다. h1 태그의 CSS 스타일을 만들거나 변경하면 h1 태그를 사용하여 서식을 적용한 모든 텍스트가 즉시 업데이트됩니다.

• 고급 스타일 - 특정 요소 조합에 대한 서식을 재정의하거나, CSS에서 허용하는 다른 선택기 양식에 대한 서식을 재정의합니다. 예를 들어 td h2 선택기는 표 셀 내에 h2 헤더가 나타날 때마다 적용됩니다. 고급 스타일은 또한 특정 id 속성을 포함하는 태그의 서식도 재정의합니다. 예를 들어 #myStyle로 정의된 스타일은 속성-값 쌍 id="myStyle"을 포함하는 모든 태그에 적용됩니다.

CSS 규칙은 다음 위치에 있을 수 있습니다.

HTML 파일이 아닌 별도의 외부 CSS(.css) 파일에 저장된 CSS 규칙의 모음입니다. 문서의 헤드 섹션에서 링크 또는 @import 규칙을 사용하여 이 파일을 웹 사이트의 여러 페이지에 링크할 수 있습니다.

HTML 문서의 헤드 부분에 있는 style 태그에 포함된 CSS 규칙 모음입니다.

HTML 문서 전체에서 특정 태그 인스턴스 내에 정의됩니다. 인라인 스타일은 사용하지 않는 것이 좋습니다.

Dreamweaver는 기존 문서에 정의된 스타일이 CSS 스타일 지침을 따르는 경우 이를 인식합니다. Dreamweaver는 또한 적용된 대부분의 스타일을 직접 디자인 뷰로 렌더링합니다. 하지만 브라우저 창에서 문서를 미리 볼 경우 가장 정확한 실제 모습으로 페이지를 렌더링합니다. 일부 CSS 스타일은 Microsoft Internet Explorer, Netscape, Opera, Apple Safari 또는 기타 브라우저에서 서로 다르게 렌더링되며, 일부 브라우저에서 지원되지 않는 CSS 스타일도 있습니다.

겹쳐 놓기 스타일 정보

겹쳐 놓기는 브라우저에서 웹 페이지의 특정 요소에 대한 스타일을 최종적으로 표시하는 방법을 가리키는 용어입니다. 세 가지 소스 즉, 페이지 제작자가 만든 스타일 시트, 사용자가 정의한 스타일 선택 사항(있는 경우) 및 브라우저 자체의 기본 스타일에 따라 웹 페이지에 나타나는 스타일이 결정됩니다. 이전 항목에는 웹 페이지 및 해당 페이지에 첨부된 스타일 시트의 제작자로서 웹 페이지의 스타일을 만드는 방법이 설명되어 있습니다. 그러나 브라우저에도 웹 페이지의 렌더링 방법이 지정된 고유의 기본 스타일 시트가 있으며 사용자는 웹 페이지의 표시가 변경되도록 선택하여 브라우저를 사용자 정의할 수 있습니다. 이러한 세 가지 소스의 규칙을 함께(또는 "겹쳐 놓기") 적용하여 웹 페이지를 최적의 방법으로 렌더링하는 과정을 통해 웹 페이지의 최종적인 모양이 결정됩니다.

일반적인 태그 즉, 단락 태그 또는 <p> 태그를 통해 이 개념을 설명하겠습니다. 기본적으로 브라우저에는 단락 텍스트 즉, HTML 코드의 <p> 태그 사이에 위치하는 텍스트에 대한 글꼴 및 글꼴 크기를 정의하는 스타일 시트가 있습니다. 예를 들어 Internet Explorer에서 단락 텍스트를 비롯한 모든 본문 텍스트는 기본적으로 Times New Roman, Medium 글꼴로 표시됩니다.

그러나 웹 페이지의 제작자는 단락 글꼴 및 글꼴 크기에 대한 브라우저의 기본 스타일을 재정의하는 스타일 시트를 만들 수 있습니다. 예를 들어 웹 페이지 제작자는 스타일 시트에 다음과 같은 규칙을 만들 수 있습니다.

사용자가 페이지를 로드하면 작성자가 브라우저의 단락 텍스트 기본 설정을 재정의한 대로 단락 글꼴 및 글꼴 크기가 설정됩니다.

사용자는 각자의 용도에 가장 적합하게 브라우저 디스플레이가 사용자 정의되도록 선택할 수 있습니다. 예를 들어 사용자는 Internet Explorer에서 페이지 글꼴이 너무 작은 경우 보기 > 텍스트 크기 > 가장 크게를 선택하여 페이지 글꼴을 보다 읽기 쉬운 크기로 확대할 수 있습니다. 위에서 예로 든 경우에 한해 결론을 내린다면 단락 글꼴 크기에 대한 기본 브라우저 스타일 및 웹 페이지의 제작자가 만든 단락 스타일 모두 사용자의 선택에 따라 재정의할 수 있습니다.

상속은 겹쳐 놓기의 또 다른 중요한 부분입니다. 웹 페이지의 요소 대부분의 속성은 상속됩니다. 예를 들어 단락 태그는 본문 태그의 특정 속성을 상속하며 <span> 태그는 단락 태그의 특정 속성을 상속합니다. 스타일 시트에 다음과 같은 규칙을 만든 경우를 가정해 봅니다.

본문 태그의 위와 같은 속성은 단락 태그로 상속되므로 웹 페이지의 모든 단락 텍스트 및 단락 태그의 속성을 상속하는 텍스트는 Arial 및 기울임체로 표시됩니다. 그러나 이러한 규칙을 보다 명확하게 할 수 있으며 상속에 대한 표준 법칙을 재정의하는 스타일을 만들 수도 있습니다. 예를 들어 스타일 시트에 다음과 같은 규칙을 만드는 경우를 가정해 봅니다.

Courier 일반(기울임체가 아님) 글꼴로 표시되는 단락 텍스트(단락 태그의 속성을 상속하는 텍스트 포함)를 제외한 나머지 모든 본문 텍스트는 Arial 및 기울임체로 표시됩니다. 기술적인 면에서 고찰하면 단락 태그에는 본문 태그에 설정된 속성이 상속되지만 자체에 정의된 속성이 있으므로 상속된 속성은 무시됩니다. 즉, 페이지 요소는 일반적으로 위로부터 속성을 상속하지만 태그에 직접 적용된 속성이 있으면 상속에 대한 표준 법칙이 항상 재정의됩니다.

위에서 언급된 모든 요소의 조합과 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_kr을 참조하십시오.

대표 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 속성에 기본값이 할당되었습니다.

이 규칙을 하나의 대표 속성으로 다시 작성하면 다음과 같습니다.

대표 속성 표기법으로 작성하면 생략된 값에는 자동으로 기본값이 할당됩니다. 따라서 위의 대표 속성 예제에서는 font-variant, font-style, font-stretch 및 font-size-adjust 태그가 생략되어 있습니다.

CSS 구문의 대표 속성 형식과 긴 형식을 모두 사용하여 여러 위치에서 스타일을 정의하는 경우(예: HTML 페이지에도 임베드하고 외부 스타일 시트에서도 가져오는 경우) 대표 규칙의 생략된 속성이 다른 규칙에 명시적으로 설정된 속성을 대체, 즉 겹쳐 놓기할 수 있습니다.

따라서 Dreamweaver에서는 기본적으로 긴 형식의 CSS 표기법을 사용합니다. 따라서 대표 규칙이 긴 형식의 규칙을 무시하여 발생할 수 있는 문제를 방지할 수 있습니다. 대표 CSS 속성 표기법으로 코딩된 웹 페이지를 Dreamweaver에서 열 경우 Dreamweaver는 새 CSS 규칙을 긴 형식으로 작성한다는 점에 유의하십시오. 환경 설정 대화 상자(Windows에서는 편집 > 환경 설정, Macintosh에서는 Dreamweaver > 환경 설정)의 CSS 스타일 범주에서 CSS 편집 환경 설정을 변경하여 Dreamweaver에서 CSS 규칙을 만들고 편집하는 방식을 지정할 수 있습니다.

Dreamweaver 및 CSS

Dreamweaver에서 다양한 방법으로 CSS를 사용하여 작업할 수 있습니다.

• CSS Designer를 사용하여 최소한의 코딩으로 CSS를 빌드할 수 있습니다. 자세한 내용은 CSS Designer를 사용하여 페이지 레이아웃 지정을 참조하십시오. 
• 수동으로 CSS를 코딩할 수도 있습니다. Dreamweaver에서 제공하는 코딩 기능에 대한 자세한 내용은 Dreamweaver의 코딩 환경을 참조하십시오.
• Sass, Scss 또는 Less 파일로 작업하려는 경우에는 자주 사용하는 구문으로 파일을 코딩하고 이를 Dreamweaver에서 사용할 수 있습니다. 자세한 내용은 CSS 프리프로세서를 참조하십시오.