단축 속성

정의

단축(shorthand) 속성은 동시에 여러 다른 CSS 속성값을 설정하게 하는 CSS 속성입니다. 단축 속성을 사용하여, 웹 개발자는 시간과 에너지를 절약하는 더 간결하고 종종 더 읽기 쉬운 스타일시트를 작성할 수 있습니다.

CSS 스펙은 같은 주제(theme) 상에서 동작하는 공통 속성의 정의를 분류하는 단축 속성을 정의합니다. 가령 CSS background 속성은 background-color, background-image, background-repeat 및 background-position 값을 정의할 수 있는 단축 속성입니다. 비슷하게, 가장 일반적인 글꼴(font) 관련 속성은 단축 font로, 박스 주위의 다른 마진은 margin 단축으로 정의될 수 있습니다.

까다로운 가장자리 경우

단축 속성은 사용하기 매우 편리할지라도, 쓸 때 염두에 둘 가장자리(edge) 사례가 조금 있습니다:

지정되지 않은 값은 그 초기값으로 설정됩니다. 흥미롭게 들리지만, 사실 이전 설정값을 재정의(override)함을 뜻합니다. 그러므로 다음은:
```
background-color: red;
background: url(images/bg.gif) no-repeat top right;
```
배경색을 red 가 아니라 두 번째 규칙이 우선(precedence)하기에 background-color의 기본값(default)인 투명(transparent)으로 설정합니다.
개별 속성값만 상속할 수 있습니다. 빠진 값은 초기값으로 대체되므로, 생략해서 개별 속성의 상속은 불가능합니다. 키워드 inherit 은 한 두 값이 아닌 전체 속성에만 적용될 수 있습니다. 이는 일부 특정 값을 상속되게 하는 방법은 inherit 키워드를 본디(longhand) 속성에 사용하는 것뿐임을 뜻합니다.

단축 속성은 대체하는 속성값을 위한 특정 순서를 강제하지 않습니다. 이는 이러한 속성이 다른 형태의 값을 사용할 때는 그 순서가 중요하지 않기에 잘 작동합니다. 하지만 몇몇 속성이 동일한 값을 가질 수 있을 때는 잘 작동하지 않습니다. 이런 경우의 처리는 여러 분류로 나뉩니다:

border-style, margin 또는 padding 같은 박스의 변(edge)과 관련된 속성을 다루는 단축은, 항상 그 변을 나타내는 일관된(consistent) 1-4 값 구문을 사용합니다:

	1값 구문: `border-width: 1em` — 유일한 값은 모든 변을 나타냅니다.
	2값 구문: `border-width: 1em 2em` — 첫 번째 값은 세로(즉 상하) 변을, 두 번째는 가로(즉 좌우) 변을 나타냅니다.
	3값 구문: `border-width: 1em 2em 3em` — 첫 번째 값은 상변을, 두 번째는 가로(즉 좌우) 변, 세 번째는 하변을 나타냅니다.
	4값 구문: `border-width: 1em 2em 3em 4em` — 네 값은 각각 상, 우, 하, 좌변을 나타내고, 항상 그 순서로, 즉 상변에서 시작하여 시계 방향입니다(상Top-우Right-하Bottom-좌Left의 영문 첫 글자가 단어 trouble의 자음 순서와 일치: TRBL).

비슷하게, border-radius 같은 박스의 귀(corner)와 관련된 속성을 다루는 단축은, 항상 그 귀를 나타내는 일관된 1-4값 구문을 사용합니다:

	1값 구문: `border-radius: 1em` — 유일한 값은 모든 귀를 나타냅니다.
	2값 구문: `border-radius: 1em 2em` — 첫 번째 값은 좌상 및 우하귀, 두 번째는 우상 및 좌하귀를 나타냅니다.
	3값 구문: `border-radius: 1em 2em 3em` — 첫 번째 값은 좌상귀, 두 번째는 우상 및 좌하귀, 세 번째 값은 우하귀를 나타냅니다.
	4값 구문: `border-radius: 1em 2em 3em 4em` — 네 값은 각각 좌상, 우상, 우하 및 좌하귀를 나타내고 항상 그 순서로, 즉 좌상귀에서 시작하여 시계 방향입니다.

background 속성

다음 속성이 있는 background 는:

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

딱 선언 하나로 줄 수 있습니다:

background: #000 url(images/bg.gif) no-repeat top right;

(단축 형은 실제로 background-attachment: scroll 및 CSS3의 일부 부가 속성이 더해진 위 본디(longhand) 속성과 같습니다.)

font 속성

다음 선언은:

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

아래로 줄 수 있습니다:

font: italic bold .8em/1.2 Arial, sans-serif;

이 단축 선언은 실제로 font-variant: normal 및 font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3)이 더해진 위 본디(longhand) 선언과 같습니다.

border 속성

border에, width, color 및 style은 한 선언으로 단순화될 수 있습니다. 예를 들어,

border-width: 1px;
border-style: solid;
border-color: #000;

위 선언은 다음과 같이 쓸 수 있습니다

border: 1px solid #000;

margin 및 padding 속성

margin 및 padding 값의 단축 버전은 같은 방식으로 동작합니다. 아래 CSS 선언은:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

다음 선언과 같습니다 (그 값은 상에서부터 시계 방향 순: top, right, bottom 다음 left (TRBL, "trouble"의 자음)임을 주의).

margin: 10px 5px 10px 5px;

참조

CSS Reference
단축 속성: background, font, margin, border, border-top, border-right, border-bottom, border-left, border-width, border-color, border-style, transition, animation, transform, padding, list-style, border-radius.