NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


효율적인 CSS 코딩을 위한 드림위버 환경설정 및 CSS 대표속성의 이해.

본문 건너 뛰기

드림위버를 이용하여 CSS 규칙을 ‘생성 또는 수정’ 하고자 할 때 보다 보다 효과적인 방법으로 코딩할 수 있도록 환경설정 에서 지원합니다. Preferences(Ctrl+U) > CSS Styles 항목을 소개합니다. 대표속성에 따라 코딩하는 방법, 대화상자 또는 코드뷰를 이용한 코딩방법을 사용자 선호에 따라서 지원하고 있습니다. 먼저 어떤 항목이 있는지 CSS 환경설정 부분을 그림으로 살펴봅니다.

드림위버의 CSS 코딩 환경 설정

새로운 CSS 규칙을 생성할 때 대표속성 사용하기.

대표속성은 여러가지 유사 속성과 값을 하나의 속성에 몰아서 정의하는 방식 입니다. 대표속성을 사용하면 CSS 코드의 분량을 획기적으로 절감할 수 있습니다. 아래 예제는 대표속성을 사용하지 않았을 때와 대표속성을 사용했을 때의 극단적인 예를 보여 줍니다. 1px 짜리 회색 보더를 가진 상자를 표현하는 코드로서 첫 번째 예제와 두 번째 예제는 동일하게 렌더링 됩니다. 이미 말씀드린 대로 다소 극단적인 예제 이지만 이 코드를 보면 대표속성을 왜 사용해야 하는지 확실한 동기가 부여 됩니다.

#ex1 {border-top-width:1px; border-top-style:solid; border-top-color:#CCC; border-right-width:1px; border-right-style:solid; border-right-color:#CCC; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#CCC; border-left-width:1px; border-left-style:solid; border-left-color:#CCC; }

#ex2 {border: 1px solid #CCC;}

이제 본론으로 들어가서 드림위버의 CSS 환경설정을 들여다 보도록 하겠습니다. 아주 쉬운 문장임에도 영어로 되어있어서 저조차도 읽기가 불편하네요. /*한글 번역*/ 해 드렸습니다.

  • When creating CSS rules: /*CSS 규칙을 생성할 때*/
    • Use shorthand for: /*~에 대한 대표속성을 사용함*/
      • Font /*폰트*/
      • Background /*배경*/
      • Margin and Padding /*마진 & 패딩*/
      • Border and border width /*보더 & 보더 두께*/
      • List-Style /*목록*/

이 부분은 CSS 규칙을 생성할 때 대표속성을 사용할 것인지에 대하여 설정하는 부분입니다. 대표속성으로 코딩이 가능한 CSS 속성으로는 ‘font, background, margin, padding, border, list-style’ 이 있습니다. 나머지 속성들은 대표속성이 필요 없거나 지원하지 않습니다. 대표속성이 무엇인지 간단하게 살펴보는것도 나쁘지 않겠네요. 이미 대표속성을 알고 있는 분들은 ‘대표속성의 종류와 규칙’ 에 관한 설명을 건너뛰기 하시고, 하나라도 놓치고 싶지 않은 분들은 꾸준히 읽어내려 가십시오. 대표속성을 사용하려면 ‘Use shorthand for’ 항목에 전부 체크 하시면 됩니다.

아래 목록은 CSS의 ‘대표속성 및 각개속성’ 입니다. W3C 표준 가운데 주요 브라우저(IE, FF, OP)에서 지원하는 속성만 간추렸습니다. 특히 font 에 대한 대표속성을 사용할 때에는 몇가지 주의사항이 있으므로 이를 유념하지 않으면 원하는대로 렌더링 되지 않습니다. 주의깊게 확인하시기 바랍니다.

‘font’ 대표속성 규칙.

  • ‘font’ 는 아래 속성을 대표 합니다.
    • font-style
    • font-variant
    • font-weight
    • font-size
    • font-family

‘font-size 와 font-family’ 에 밑줄 쫙 친 이유가 있습니다. ‘font’ 에 대한 대표속성을 정의 할 때 주의할 점은 다음과 같습니다.

  1. ‘font-size 와 font-family’ 는 반드시 정의 되어야 한다.
  2. ‘font-size 와 font-family’ 는 반드시 그 순서를 지켜야 한다.(잘된 예: ‘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’ 속성이 제거됨.)

라는 점 입니다. ‘font’ 에 대한 대표속성 코딩 규칙에 따르면 최소한 다음과 같은 형식을 가집니다.

#ex1 {font: small dotum;}
#ex2 {font: italic small-caps bold small dotum;}

‘font-size 와 font-family’ 를 반드시 포함하고 있으며 ‘font-size’ 를 먼저 정의하고 ‘font-family’ 를 나중에 정의 하였습니다. 그리고 그것들은 다른 속성들보다 ‘가장 나중에 정의’ 되어 있습니다. 이 규칙을 머리속에 넣기 복잡하다고 생각되시면 ‘size & family’ 순이니까 ‘si-fa’ 라고 기억하시면 되겠네요. 발음이 좋네요. 욕나오는 것들은 나중에 처리합시다.

‘background’ 대표속성 규칙.

  • ‘background’ 는 아래 속성을 대표 합니다.
    • background-color
    • background-image
    • background-repeat
    • background-position
    • background-attachment

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

배경색과 배경이미지를 동시에 설정할 수 있습니다. 이런 경우 배경색이 배경이미지보다 아래쪽에 깔립니다. 그리고 배경 이미지의 반복과 배치는 자유롭게 설정이 가능합니다. 위 예제에서 ‘50% 50%’ 부분은 배경이미지의 x좌표와 y좌표에 대한 값 입니다. x좌표와 y좌표를 설정하는 부분을 제외한 나머지 속성값은 그 순서를 지키지 않아도 무방 합니다.

‘margin’ 및 ‘padding’ 대표속성 규칙.

  • ‘margin’ 은 아래 속성을 대표 합니다.
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
  • ‘padding’ 은 아래 속성을 대표 합니다.
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

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

속성 값을 ‘top right bottom left’ 순으로 정의 합니다. 시계방향. 쉽죠? 만약 ‘top’ 과 ‘bottom’ 의 값이 같고, ‘right’ 와 ‘left’ 의 값이 같다면 ‘top, right’ 값만 순서대로 적어주어도 됩니다.

‘border’ 대표속성 규칙.

  • ‘border’ 는 아래 속성을 대표 합니다.
    • border-width
    • border-style
    • border-color
    • border-bottom
    • border-bottom-color
    • border-bottom-style
    • border-bottom-width
    • border-left
    • border-left-color
    • border-left-style
    • border-left-width
    • border-right
    • border-right-color
    • border-right-style
    • border-right-width
    • border-top
    • border-top-color
    • border-top-style
    • border-top-width

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

박스 네 변의 보더값이 모두 같다면 ‘#ex1’ 형태로 처리할 수 있습니다. 세 변이 같고 하나만 다르다면 ‘#ex2’ 와 같이 처리해도 됩니다. 순서상으로 나중에 정의된 코드가 우선권을 갖는 원리 입니다.

‘list-style’ 대표속성 규칙.

  • ‘list-style’ 은 아래 속성을 대표 합니다.
    • list-style-image
    • list-style-position
    • list-style-type

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

사실상 목록에 블릿을 표현하는 방법으로서 예제와 같이 ‘image’ 속성을 사용하는 것보다는 ‘background’ 를 이용하는 방식이 훨씬 더 많은 표현의 자유를 보장 합니다. ‘list-style’ 은 블릿의 위치를 ‘inside’ 또는 ‘outside’ 밖에 설정하지 못하지만 ‘background’ 는 자유롭게 배치할 수 있기 때문입니다.

지금까지 대표속성의 종류와 대표속성 사용규칙을 간단하게 살펴보았습니다. ‘대표속성의 종류와 규칙’ 에 대하여 리뷰 할 필요가 있는 분들은 위로이동 하시구요. 계속해서 CSS를 위한 드림위버의 환경설정 설명이 이어집니다.

CSS 규칙을 수정할 때 대표속성 사용하기.

  • When editing CSS rules: /*CSS 규칙을 수정할 때*/
    • Use shorhand: /*대표속성을 사용함*/
      • If original used shorhand /*원문에서 대표속성을 사용했을 때에만 대표속성 사용*/
      • According to setting above /*상위 설정(CSS 생성 규칙)에 따름*/
      • Open CSS files when modified /*수정될 때 CSS파일 열기*/

CSS 패널을 더블클릭 할 때 ‘대화상자 or 속성패널 or 코드뷰’ 에서 편집하기.

  • When double-clicking CSS panel: /*CSS 패널을 더블클릭 할 때*/
    • Edit using CSS dialog /*CSS 대화상자를 이용함*/
    • Edit using Properties pane /*속성패널을 이용함*/
    • Edit using code view /*코드뷰를 이용함*/

드림위버에서 CSS를 편집하는 방법은 모두 3가지가 있습니다.

디자인뷰, 또는 코드뷰를 통하여 특정 마크업을 선택한 다음 CSS Styles 패널을 보면 그림과 같이 해당 마크업에 적용된 CSS 속성을 보여주는데 이를 더블클릭 하면 사용자가 설정해 놓은 방법으로 CSS 편집이 가능한 상태가 됩니다.
드림위버의 CSS Styles 패널

CSS Styles 패널을 더블클릭 했을 때 이렇게 ‘대화상자’ 를 이용하여 편집하는 것을 선호하는 사람이 있고,
드림위버의 CSS 편집 대화상자

아래 그림과 같이 ‘CSS 속성패널’ 에서 편집하는 것을 선호하는 사람이 있는가 하면,
드림위버의 CSS 속성 패널

이렇게 ‘코드뷰를 직접 열어서 ‘태그 자동완성기능을 이용’ 하여 편집하는 사람도 있습니다.
드림위버의 CSS 코드뷰, 빠른태그편집기를 이용한 편집모드

제 경우,

  1. CSS 코드를 원하는 순서대로 배치하기 위하여.
  2. 한 개의 속성에 한 번의 줄 바꿈을 해버리는 드림위버의 CSS 코드 정렬을 싫어하기 때문에.

‘코드뷰를 직접 열어서 태그 자동완성기능을 이용’ 한 편집만 고집하고 있습니다. ‘코드뷰’ 에서의 ‘태그 자동완성기능’ 은 ‘Space’ 또는 ‘Ctrl+Space’ 키를 이용하여 활성화 됩니다.

분류: CSS,편집기 | 2006년 11월 15일, 2:55 | 정찬명 | 댓글: 6개 |
트랙백URI - http://naradesign.net/wp/2006/11/15/91/trackback/

6개의 댓글이 있습니다.

  1. 양승규 댓글:

    감사합니다. 잘보고 갑니다

  2. 김경렬 댓글:

    감사합니다 많은 도움이 되었습니다.

  3. 김민 댓글:

    ㅎㅎ.. 이제껏 사용하면서 환경설정에 저런게 있다는걸 모르고 잇엇네요…

    맨아래….코드포맷 원라인으로………이 속성이 아마 어디 있을겁니다…

  4. 정찬명 댓글:

    네, CS3 부터 그 기능을 지원하고 있습니다. ^^

  5. 박상현 댓글:

    정말 도움이 많이 됩니다 ㅠㅠ 감사요

  6. 담요 댓글:

    완전 감사하네요. css 오랫동안 사용하고 우격다짐으로 해왔었는데 세세한 팁까지 알려주셔서 기초를 새로 닦는 기분이라 너무 좋습니다. 감사요~!

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님