CSS 대표속성 (CSS Shorthand Properties)

CSS 대표속성을 이용하면 CSS 코드의 양을 획기적으로 줄일 수 있습니다. 또한 코드가 간결해 지기 때문에 코드를 생성할 때 뿐만 아니라 유지보수시에도 이롭습니다. 대표속성으로 코딩이 가능한 CSS 속성은 'font, background, margin, padding, border, list-style' 입니다.

CSS 대표속성 사용을 위한 환경설정(Ctrl+U)

Preferences-CSS Styles

Preferences > CSS Styles 항목에서 When creating CSS rules(새 CSS 규칙을 생성할 때) 항목 가운데 Use shorthand for(대표속성 사용)의 하위 항목(Font, Background, Margin and Padding, Border and border width, List-Style)을 모두 선택하면 CSS 대화상자 또는 CSS 속성패널을 이용할 때 대표속성으로 코딩 됩니다. Code View를 이용하여 CSS를 관리하는 사용자에게는 이 설정이 무의미 합니다.

Preferences-CSS Styles

Preferences > CSS Styles 항목에서 When editing CSS rules(CSS 규칙을 편집 할 때) 항목 가운데 Use shorthand(대표속성 사용)의 하위 항목을 선택하는 방법에 따라 사용자 정의 설정에 따를 것인지 기존 코드의 규칙에 따를 것인지 설정할 수 있습니다. 이 규칙 역시 Code View를 이용하여 CSS를 관리하는 사용자에게는 무의미 합니다.

» 보충설명 : CSS 대표속성 규칙과 예제 코드

Font의 대표속성 사용규칙

Font의 대표속성 사용규칙은 다른 속성에 비하여 조금 복잡한 규칙을 지니고 있기에 조금 자세히 설명하겠습니다.

  1. 'font-size 와 font-family' 는 반드시 정의 되어야 한다.
  2. 'font-size 와 font-family' 는 반드시 그 순서를 지켜야 하며 'font-size' 가 먼저 정의되어야 한다. (잘된 예: 'small dotum', 잘못된 예:'dotum small')
  3. 'font-size 와 font-family' 는 다른 속성보다 항상 나중에 정의되어야 한다.(잘된 예:'bold small dotum', 잘못된 예: 'small dotum bold')
  4. 'font-size 와 font-family' 이외의 속성은 없어도 무방하며'font-size 와 font-family' 보다 먼저 정의되기만 한다면 나머지 속성들은 더이상 순서에 구애받지 않는다.
  5. 'font-style, font-weight' 따위를 정의하지 않으면 마크업에서 기본적으로'italic, bold' 체로 표현되는 서체에'normal' 스타일이 적용된다. (예:'font-style' 을 정의하지 않으면'em, address' 따위의'italic' 속성이 제거되고'font-weight' 를 정의하지 않으면'h1~h6, th' 따위가 기본적으로 지니고 있는 'bold' 속성이 제거됨.)
#ex1 {font: small dotum;}
#ex2 {font: italic small-caps bold small dotum;}

Background

#ex {background: #CCC url(dot.png) no-repeat 50% 50% fixed;}

Margin

#ex1 {margin: 1em 2em 1em 2em;} = #ex1 {margin: 1em 2em;}

Padding

#ex2 {padding: 1em 2em 1em 2em;} = #ex2 {padding: 1em 2em;}

Border

#ex1 {border: 1px solid #CCC;}
#ex2 {border: 1px solid #CCC; border-bottom:none;}

List-Style

#ex {list-style:url(bullet.png) inside;}

CSS의 대표속성에 대하여 더욱 자세한 이해를 요하시는 분께서는 제 블로그의 글 효율적인 CSS 코딩을 위한 드림위버 환경설정 및 CSS 대표속성의 이해 (http://naradesign.net/wp/2006/11/15/91/) 본문 글을 참조해 주시기 바랍니다.