in CSS

CSS shorthand properties (단축 속성)

Rated-R님의 글에도 소개된 것처럼, CSS 사용할때 단축 속성을 사용하면 코드를 줄일 수 있다.

이러한 CSS의 모든 속성에 shorthand properties(단축 속성)을 사용할 수 있는 것이 아닌, 아래의 몇몇 속성에서만 사용 가능하다.

  1. font 단축 속성
    구문 : { font: font-style | font-variant | font-weight | font-size | line-height | font-family }
    예제 : { font: 0.75em/1.4em 돋음, san-serif; }
  2. margin 단축 속성
    구문 : { margin: margin-top | margin-right | margin-bottom | margin-left }
    예제 : { margin: 1em 2em 3em 4em; }
  3. padding 단축 속성
    구문 : { padding: padding-top | padding-right | padding-bottom | padding-left }
    예제 : { padding: 1em 2em 3em 4em; }
  4. border 단축 속성
    구문 : { border: border-width | border-style | color }
    예제 : { border: 1px dotted #123456; }
  5. border-top, border-right, border-botoom, border-left 단축 속성
    구문 : { border-top: border-width | border-style | color }
    예제 : { border-top: 1px dotted #123456; }
  6. list-style 단축 속성
    구문 : { list-style: list-style-type | list-style-position | list-style-image }
    예제 : { list-style: url(“hooney.gif”) inside disc; }
  7. background 단축 속성
    구문 : { background: background-color | background-image | background-repeat | background-attachment | background-position }
    예제 : {background: #123456 url(“hooney.net”) no-repeat center left; }

위의 단축속성의 구문은 순서가 바껴도 IE6, FF1, NN7 등 대부분의 최근 브라우저에서 자동으로 해석해 주지만, 구식 브라우저(NN4, IE5 등)의 경우 바르게 표현하지 않는 문제가 있으므로, 가급적 단축속성 구문을 지켜야 한다.
단, margin과 padding의 CSS 단축속성의 구문은 반드시 지켜져야 한다. (위에서부터 시계방향으로…)

톱 스타일(top style)과 같은 CSS 전문 프로그램에서는 자동으로 단축속성을 정리해주는 기능이 포함되어 있다.

댓글 남기기

  1. 마진과 패딩을 제외하고는 구문 순서에 거의 상관없어요. 구식 브라우저(IE4, NN5 등)만 제대로 해석하지 못한다고 하더군요.

    저도 처음에는 1,6,7이 어려웠는데, 순서에 상관없이 쓰다보면 익숙해지더라구요. 요즘은 탑스타일이 알아서 해주는 편이죠~ ^^;

  2. 전 list-style빼고는 다 쓰고 있네용~
    근데 궁금한게-
    단축속성은 단일 value는 쓸 수 없는 건가용?
    전에 font를 쓰다 보니까
    font:0.7em – 이거 하나만 달랑 쓰니까 안되더라구요
    말그대로 단축이라.. 두개 이상의 value가 있어야 하는 걸까용

  3. list-style은 메뉴 구성할 때 자주 사용하지 않나요?

    폰트 경우에는 font {폰트패밀리 폰트크기/라인높이;} 이렇게 3가지는 반드시 지정해야 하는 것으로 알고 있어요. ^-^

  4. 저는 UL-LI 등등을 사용하게 된지 얼마 되지않아서~
    한마디로 테이블에서 벗어난지 얼마 되지 않아서
    그동안 list-style을 많이 쓸일이 없었거든요
    요즘들어서 이제 쓰기 시작하는 거예용 으크크 😳

    font에 대해서.. 제가 해봤던 기억으로는 (회사에서 예전에 삽질을)
    폰트 크기랑 패밀리 지정만 해주면 되는 것 같았거든용
    그래서 두개이상 해야 되는 걸까 라고 생각하고 있었어요

  5. 저도 사실 UL-LI를 사용한지 1달도 안됐어요. 웹표준이나 CSS에 관심을 가진 것도 이 hooney.net 블로그를 시작하기 얼마 전이었답니다. ^^;;;