CSS 대화상자 (CSS Dialog Box)

CSS 대화상자를 이용하여 코드를 관리하는 방법 입니다. CSS 숙련도가 비교적 낮은 초심자에게 권장되는 방법으로서 CSS 코드의 순서를 제작자 의도대로 정리할 수 없는 단점이 존재합니다.

대화상자를 이용한 CSS 관리

Preferences-CSS Styles

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

CSS Styles Panel

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

CSS 대화상자

CSS 대화상자 입니다. 원하는 항목을 찾아 수정하거나 새로운 속성을 추가할 수 있습니다.

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

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

CSS 코드의 줄 바꿈 규칙은 개인의 선호 또는 조직의 규칙에 따르겠지만 만약 하나의 스타일을 한 줄에 코딩하는 것을 선호한다면 역시 대화상자를 이용한 CSS 편집은 불편한 방법이 됩니다.

» 도움말 : CSS 코드의 줄바꿈에 대한 드림위버의 버전별 차이 'Dreamweaver 8 & CS3'

드림위버 8 버전에는 CSS 코드의 줄바꿈을 자동으로 정리하는 기능이 존재하지 않습니다. 대화상자를 이용하여 코딩하는 경우 무조건 하나의 속성을 정의하고 줄바꿈을 합니다. 하지만 CS3 버전에서는 다음과 같이 CSS 코드의 줄 바꿈 규칙을 설정해 놓고 자동으로 이것을 정리할 수 있도록 돕습니다.

CS3-환경설정-코드포멧-고급서식-CSS

설정-하나의 스타일 묶음을 한 줄에 코딩하기

설정-한 줄에 하나의 속성을 정의하고 줄바꿈 하기