CSS 스타일 패널

[CSS 스타일] 패널을 사용하여 현재 선택한 페이지 요소에 영향을 주는 CSS 규칙과 속성([현재] 모드) 또는 전체 문서에 영향을 주는 규칙과 속성([모두] 모드)을 추적할 수 있습니다. 패널의 위에 있는 전환 버튼을 사용하여 두 모드 간에 전환할 수 있습니다. [CSS 스타일] 패널에서는 [모두] 모드와 [현재] 모드 모두에서 CSS 속성을 수정할 수도 있습니다.

[현재] 모드에서 [CSS 스타일] 패널에는 문서에서 현재 선택한 항목에 대한 CSS 속성을 표시하는 [선택 항목 요약] 창, 선택한 속성의 위치를 표시하거나 선택 항목에 따라 선택한 태그의 규칙을 겹쳐 놓기로 배열하는 규칙 창, 선택 항목에 적용되는 규칙의 CSS 속성을 편집할 수 있는 속성 창 등의 3개 창이 표시됩니다.

창의 크기는 창 사이의 경계선을 드래그하여 조정할 수 있고 열의 크기는 구분선을 드래그하여 조정할 수 있습니다.

[선택 항목 요약] 창에는 활성화된 문서에서 현재 선택한 항목의 CSS 속성 요약과 값이 표시됩니다. 요약은 선택 항목에 직접 적용되는 모든 규칙의 속성을 보여 줍니다. 설정된 속성만 표시됩니다.

예를 들어 다음 규칙은 클래스 스타일과 태그(이 경우 단락) 스타일을 만듭니다.

문서 창에서 .foo 클래스 스타일로 단락 텍스트를 선택할 경우 두 규칙이 선택 항목에 적용되므로 [선택 항목 요약] 창에 두 규칙에 대한 상대적인 속성이 표시됩니다. 이 경우 [선택 항목 요약] 창에 다음 속성 목록이 표시됩니다.

[선택 항목 요약] 창은 특이성의 오름차순으로 속성을 정렬합니다. 위 예제에서 태그 스타일은 글꼴 크기를 정의하고 클래스 스타일은 기본 글꼴과 색상을 정의합니다. 클래스 선택기의 특이성이 태그 선택기보다 높으므로 클래스 스타일에서 정의된 기본 글꼴은 태그 스타일에서 정의된 기본 글꼴을 무시합니다. CSS 특이성에 대한 자세한 내용은 www.w3.org/TR/CSS2/cascade.html 사이트를 참조하십시오.

규칙 창에 선택 영역에 따라 [정보] 보기와 [규칙] 보기의 두 가지 보기가 표시됩니다. [정보] 보기(기본 보기)에서 이 창에는 선택한 CSS 속성을 정의하는 규칙 이름과 이 규칙이 들어 있는 파일 이름이 표시됩니다. [규칙] 보기에서 이 창에는 현재 선택 항목에 직간접적으로 적용된 규칙의 겹쳐 놓기나 계층 구조가 표시됩니다. 규칙이 직접 적용되는 태그가 오른쪽 열에 나타납니다. 규칙 창의 오른쪽 위 모서리에 [정보 표시] 및 [겹쳐 놓기 표시] 버튼을 클릭하여 두 보기 사이를 전환할 수 있습니다.

[선택 항목 요약] 창에서 속성을 선택한 경우 정의하는 규칙의 모든 속성이 속성 창 아래에 표시됩니다. [규칙] 보기를 선택한 경우 규칙 창에서 정의 규칙도 선택됩니다. 예를 들어 기본 글꼴, 글꼴 크기 및 색상을 정의하는 .maintext 규칙이 있는 경우 [선택 항목 요약] 창에서 이러한 속성을 선택하면 속성 창에 .maintext 규칙으로 정의된 모든 속성이 표시되고 규칙 창에 선택한 .maintext 규칙이 표시됩니다. 또한 규칙 창의 규칙을 선택하면 해당 규칙의 속성이 속성 창에 표시됩니다. 그러면 속성 창을 사용하여 CSS가 현재 문서에 포함되었는지 또는 연결된 스타일 시트를 통해 링크되었는지 여부에 관계없이 CSS를 빨리 수정할 수 있습니다. 기본적으로 속성 창에는 이미 설정된 속성이 알파벳순으로 표시됩니다.

속성 창을 다른 두 가지 보기로 표시되도록 선택할 수 있습니다. [범주] 보기는 글꼴, 배경, 블록, 테두리 등의 범주로 그룹화된 속성을 표시합니다. 설정된 속성은 각 범주의 위쪽에 파란색 텍스트로 표시됩니다. [목록] 보기는 사용 가능한 모든 속성을 알파벳순으로 표시하고 설정된 속성을 파란색 텍스트로 위에 정렬합니다. 보기 사이를 전환하려면 속성 창의 왼쪽 아래 모서리에 있는 [범주 보기 표시], [목록 보기 표시] 또는 [설정된 속성만 표시] 버튼을 클릭하십시오.

모든 보기에서 설정된 속성은 파란색으로 표시되며 선택한 요소와 관련이 없는 속성은 빨간색 취소선으로 표시됩니다. 관련이 없는 규칙 위에 마우스 포인터를 올려 놓으면 속성이 해당 규칙과 무관한 이유를 설명하는 메시지가 표시됩니다. 우선 순위가 낮거나 상속되지 않은 속성은 일반적으로 관련되지 않습니다.

속성 창에서 변경한 모든 내용은 곧바로 적용되기 때문에 변경한 결과를 미리 볼 수 있습니다.

모두 모드의 CSS 스타일 패널

[모두] 모드에서 [CSS 스타일] 패널에는 [모든 규칙] 창(위쪽)과 속성 창(아래쪽)이 표시됩니다. [모든 규칙] 창에는 현재 문서에 정의된 규칙 목록과 현재 문서에 연결된 스타일 시트에 정의된 모든 규칙이 표시됩니다. 속성 창을 사용하여 [모든 규칙] 창에서 선택한 규칙의 CSS 속성을 편집할 수 있습니다.

창의 크기는 창 사이의 경계선을 드래그하여 조정할 수 있고 속성 열의 크기는 구분선을 드래그하여 조정할 수 있습니다.

[모든 규칙] 창에서 규칙을 선택할 경우 해당 규칙에 적용되는 모든 속성은 속성 창에 정의됩니다. 그러면 속성 창을 사용하여 CSS가 현재 문서에 포함되었는지 또는 연결된 스타일 시트를 통해 링크되었는지 여부에 관계없이 CSS를 빠르게 수정할 수 있습니다. 기본적으로 속성 창에는 이전에 설정된 속성만 알파벳순으로 표시됩니다.

속성을 다른 두 가지 보기로 표시되도록 선택할 수 있습니다. [범주] 보기는 글꼴, 배경, 블록, 테두리 등의 범주로 그룹화된 속성을 표시합니다. 설정된 속성은 각 범주의 위쪽에 파란색 텍스트로 표시됩니다. [목록] 보기는 사용 가능한 모든 속성을 알파벳순으로 표시하고 설정된 속성을 파란색 텍스트로 위에 정렬합니다. 보기 사이를 전환하려면 속성 창의 왼쪽 아래 모서리에 있는 [범주 보기 표시], [목록 보기 표시] 또는 [설정된 속성만 표시] 버튼을 클릭하십시오. 모든 보기에서 설정된 속성은 파란색으로 표시됩니다.

속성 창에서 변경한 모든 내용은 곧바로 적용되기 때문에 변경한 결과를 미리 볼 수 있습니다.

CSS 스타일 패널 버튼 및 보기

[모두] 모드와 [현재] 모드 모두에서 [CSS 스타일] 패널에는 속성 창(아래 창)의 보기를 변경할 수 있는 다음과 같은 3개의 버튼이 포함됩니다.

Dreamweaver에서 지원하는 CSS 속성은 여덟 가지 범주 즉, 글꼴, 배경, 블록, 테두리, 상자, 목록, 배치 및 확장명으로 구분합니다. 각 범주의 속성은 축소가 가능한 목록에 포함되어 있으며, 이 목록은 해당 이름 옆에 있는 플러스(+) 버튼을 클릭하여 확장하거나 축소할 수 있습니다. 설정된 속성이 목록 위쪽에 나타납니다(파란색).

Dreamweaver에서 지원하는 모든 CSS 속성을 알파벳순으로 표시합니다. 설정된 속성이 목록 위쪽에 나타납니다(파란색).

설정된 속성만 표시됩니다. [설정된 속성 보기]는 기본 보기입니다.

[모두] 모드와 [현재] 모드 모두에서 [CSS 스타일] 패널에는 다음 버튼도 들어 있습니다.

[외부 스타일 시트 링크] 대화 상자를 엽니다. 링크하거나 현재 문서로 가져올 외부 스타일 시트를 선택합니다.

만들려는 스타일 유형을 선택할 수 있는 대화 상자를 엽니다. 예를 들어 클래스 스타일을 만들려면 HTML 태그를 다시 정의하거나 CSS 선택기를 정의합니다.

현재 문서나 외부 스타일 시트의 스타일을 편집할 수 있는 대화 상자를 엽니다.

선택한 규칙 또는 속성을 [CSS 스타일] 패널에서 제거하고 해당 스타일이 적용된 모든 요소에서 서식을 제거합니다. 그러나 해당 스타일에서 참조하는 클래스나 ID 속성을 제거하지는 않습니다. [CSS 규칙 삭제] 버튼을 사용하여 연결된 CSS 스타일 시트를 분리하거나 연결을 끊을 수도 있습니다.

CSS 스타일 패널 열기

[CSS 스타일] 패널에서는 CSS 스타일을 표시, 생성, 편집 및 제거할 수 있을 뿐만 아니라 문서에 외부 스타일 시트를 첨부할 수 있습니다.