CSS 속성패널 (CSS Properties Panel)

CSS 속성패널을 이용하여 코드를 관리하는 방법 입니다. CSS 숙련도가 비교적 중급에 해당하는 사용자에게 권장되는 방법으로서 이 방법 역시 CSS 코드의 순서를 제작자의 의도대로 정리할 수 없고 드림위버 8버전을 사용하는 경우 코드의 줄 바꿈을 사용자의 의도대로 설정할 수 없는 단점이 존재합니다.

속성패널을 이용한 CSS 관리

Preferences-CSS Styles

Preferences > CSS Styles 항목에서 When double-clicking in CSS panel(CSS 패널을 더블 클릭했을 때 다음 명령에 따름) 항목 가운데 Edit using Properties pane (속성패널을 이용하여 편집)을 선택 합니다.

CSS Styles Panel

현재 열려있는 페이지에서 편집하려고 하는 대상(엘리먼트, 이미지, 텍스트...)을 선택하면 CSS Styles 패널에는 위와같이 현재 선택물에 적용된 스타일만 정리해서 보여줍니다. 이것을 편집하려면 수정하고자 하는 속성이나 값을 더블클릭 합니다.

CSS 속성 패널

CSS Properties 패널 입니다. 원하는 항목을 수정하거나 새로운 속성을 추가할 수 있습니다.

* {
margin:0;
padding:0;
color:#dddddd;
font: small/1.3em "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;
}

한편 이렇게 Properties 패널을 이용하여 코딩하게 되면 CSS 코드의 줄바꿈을 마음대로 조정할 수 없게 됩니다. 대화상자를 이용하는 경우 드림위버 8 버전은 CSS의 속성 하나를 정의한 다음 개행(줄 바꿈)을 시켜서 위와 같은 코드를 만들어 냅니다.

CSS 코드의 줄 바꿈 규칙은 개인의 선호 또는 조직의 규칙에 따르겠지만 만약 하나의 스타일을 한 줄에 코딩하는 것을 선호한다면 역시 Properties 패널을 이용한 CSS 편집은 불편한 방법이 됩니다. 드림위버 CS3 버전에서는 CSS 코드의 줄바꿈 설정을 사용자 정의 할 수 있으므로 참조하세요.