CSS(캐스케이딩 스타일시트) Designer

CSS Designer는 스타일시트의 소스를 표시하므로 구문 강조표시, 컨텐츠 지원 및 미리보기 기능을 사용하여 스타일을 편집할 수 있습니다. HTML 파일에 스타일시트에 대한 링크가 있는 경우에 CSS Designer에서 수정한 사항이 Page Designer의 디자인 페이지에 즉시 적용됩니다.

이 제품은 다음과 같은 W3C(World Wide Web Consortium) 캐스케이딩 스타일시트 표준을 지원합니다. 또한 WAP 포럼 표준 WCSS 1.0(WAP CSS 1.0)도 지원됩니다.
CSS Designer에서는 Page Designer의 세 페이지와 유사한 기능을 갖고 있는 소스 분할창 및 미리보기 분할창을 제공합니다(이들 분할창 간의 방향과 상호작용이 약간은 다름).
소스
소스 분할창에서는 파일의 소스 코드를 보고 직접 작업할 수 있습니다. 특성 및 스타일 보기에는 소스 페이지를 보완하는 기능이 있습니다. 새 스타일 작성, 스타일 적용, 특성 변경 및 스타일시트링크 설정과 관련된 많은 기능을 CSS Designer 스타일 메뉴와 스타일 보기의 도구 모음에서 사용할 수 있습니다.
스타일시트의 각 스타일은 일반적으로 다음과 같이 정의됩니다.
selector { property : value; }
다음 예제는 .css 파일에 나올 수 있는 단락에 대한 실제 스타일 정의입니다.
P { font-style : italic; font-size : x-small;}
미리보기
미리보기 분할창에서는 현재 정의된 스타일이 웹 브라우저에서 어떻게 표시되는지 확인할 수 있습니다. 적용할 실제 웹 페이지를 선택한 후 CSS Designer에 의해 작성된 스타일을 표시하거나, 정의된 스타일의 최소 버전을 제공하는 샘플 HTML 파일을 사용할 수 있습니다. 미리보기 분할창에는 선택된 스타일 영역 및 표준 HTML 요소 영역의 두 개 영역이 있습니다. 선택된 스타일 영역은 커서(소스 분할창 내)가 위치하는 영역이나 스타일 보기에서 선택한 스타일에 대한 스타일 정의의 스타일 효과를 표시하는 데 사용됩니다. 표준 HTML 요소 영역은 표준 HTML 요소의 스타일을 표시하며 커서 위치에 영향을 받지 않습니다.

미리보기는 소스 분할창 또는 스타일 보기를 사용하여 .css 파일을 수정하는 경우 자동으로 갱신됩니다.

CSS 소스 분할창에 있는 여러 가지 텍스트 편집 기능은 다음과 같습니다.

표 1. CSS Designer의 텍스트 편집 기능
기능 설명
구문 강조표시 태그 유형마다 서로 다르게 강조표시되므로 편집할 특정 유형의 태그를 쉽게 찾을 수 있습니다. 구문 강조표시는 구문 오류를 찾을 때도 유용합니다.
무제한의 실행 취소 및 다시 실행 전체 편집 세션 동안 파일에 대해 수행한 모든 변경사항을 점층적으로 실행 취소하고 다시 실행할 수 있습니다. 텍스트의 경우에는 변경사항이 한 번에 한 문자씩이나 선택한 문자 세트씩 증분됩니다.
컨텐츠 지원 컨텐츠 지원 기능을 사용하면 쉽게 태그 또는 코드 행을 완성하고 매크로를 삽입할 수 있습니다. 컨텐츠 지원 목록에서 사용할 수 있는 선택사항은 편집 중인 파일에 대해 지정된 태그 표준에서 정의한 태그에 따라 다릅니다.
요소 선택사항 커서 위치에 따라, 요소 선택사항 표시기는 소스 페이지의 왼쪽 영역에 있는 수직 눈금자의 요소를 포함하는 행 번호를 강조표시합니다.
팝업 메뉴 옵션 편집기의 팝업 메뉴에는 Workbench의 편집 메뉴에서 사용할 수 있는 것과 동일한 다양한 편집 옵션이 있습니다.

CSS 편집기의 분할창 메뉴를 사용하면 소스 및 미리보기 분할창의 방향 및 상대 크기를 변경할 수 있습니다.

관련 태스크
웹 사이트의 페이지 스타일 정의 - 개요
스타일시트 작성
스타일시트 편집
이용약관 | 피드백
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.