CSS 축약 지침

개요

이 축약 강좌는 일상적인 작업에서 접할 수 있는 다양한 CSS 축약들에 대해 다룬다.

경계 (border)

border 는 이 한 속성으로 경계의 폭, 스타일, 색상 모두를 설정한다. 예를 들어:

border: 1px solid black;

다음 세 가지 규칙과 동일하다:

border-width: 1px;
border-style: solid;
border-color: black;

이것들은 더 구체적인 규칙으로 나눌 수 있다. 이 규칙이 적용되는 요소의 단 하나의 경계에 적용할 수 있다. 다음과 같다:

border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;

또는 동일한:

border-left-width: 2px;
border-left-style: solid;
border-left-color: black;

당신은 거의 이렇게 세분화하려고 하지 않을 것이다; 대부분의 경우에 간단하게 border 또는 border-left/right-top-bottom 을 사용할 것이다. 이전의 경계 선언을 무시하려는 경우에만, 더 세분화된 옵션이 사용될 것이다.

마진, 패딩, 테두리 (Margin, padding, outline)

margin, padding, outline 의 축약은 모두 같은 방식으로 작성된다. 다음의 margin 규칙을 고려해보자:

div.foo {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 2em;
  margin-left: 2.5em;
}

이 규칙은 다음과 같이 작성될 수도 있다:

div.foo {
  margin: 1em 1.5em 2em 2.5em;
}

이런 유형의 속성은 값이 4개 이하이다. 다음과 같다:

  1. 같은 값이 네 면 모두에 적용된다 — margin: 2px;
  2. 첫 번째 값은 위와 아래, 두 번째 값은 왼쪽과 오른쪽에 적용된다 — margin: 2px 5px;.
  3. 첫 번째와 세 번째 값은 각각 위와 아래에 적용되고, 두 번째 값은 왼쪽과 오른쪽에 적용된다 — margin: 2px 5px 1px;.

글꼴 (Font)

축약형 한 줄로 글꼴 크기, 굵기 여부, 폰트 스타일, 글꼴, 행 높이를 지정할 수 있다. 다음 CSS를 살펴보자:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1.5em;
line-height: 200%;
font-family: Georgia, "Times New Roman", serif;

다음과 같이 한 줄로 이 모든 속성을 지정할 수 있다:

font: bold italic small-caps 1.5em/200% Georgia, "Times New Roman", serif;

참고: 이 많은 것의 순서는 문제가 되지 않는다. 하지만 font-size/line-heightfont-family 는 보여지는 위치에 있어야 한다. 또한 font-sizefont-family 지정되어야만 한다. 지정되지 않으면, 이 축약 선언은 일부 브라우저에서 작동하지 않을 수도 있다.

참고 #2: font-weight, font-style 또는 font-variant 는 지정되지 않는다면, 이 값은 기본으로 normal 이 설정된다.

배경 (Background)

CSS 2에서, CSS 한 줄로 배경 색상, 배경 이미지, 이미지 반복과 이미지 위치를 지정할 수 있다. 다음을 보자:

background-color: #000;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;

이 모든 것들이 다음의 축약형을 사용하여 표시될 수 있다:

background: #000 url(image.gif) no-repeat top left fixed;

참고: 값 중 하나라도 생략하는 경우, 다음의 기본값으로 가정된다:

background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;

CSS3에서 개선된 점 (Enhancements in CSS3)

CSS3에서 세 가지 새로운 속성을 도입하고 있다: background-size, background-origin, background-clip. 이것들을 background 축약형에서 다음과 같이 포함할 수 있다:

background: #000 url(image.gif); no-repeat top left / 50% 20% border-box content-box;

top left50% 20% 사이의 슬래시에 주의하자; 이것은 background-positionbackground-size 의 값을 구분한다. 이 두 속성은 일부 값의 단위를 공유하기 때문에 (lengths and percentage); 슬래시가 없으면 어떤 것의 값인지 구분할 수 없다.

축약형 구문에 background-size 값을 포함하려면, 필요한 것은:

  • 이 값이 기본 값과 같을 경우에도 (위 참고), background-position 값을 분명하게 포함한다.
  • background-size앞에 background-position 값을 작성한다.
  • 이 두 값 사이에 슬래시를 넣는다.

비슷하게, background-originbackground-clip 은 값으로 같은 키워드를 공유한다. 이 둘도 순서대로 작성되어야 한다: background-origin 이 처음에 오고, background-clip 두 번째로 온다.

하나의 box 값(border-box, padding-box, 또는 content-box)만 지정하는 경우에 , 그 값이 code>background-origin 와 background-clip에 적용된다.

참고: CSS3 기울기 값(gradients)은 background-image 의 특별한 고급의 값이다 — 구문상의 차이 외에, 기울기 값은 다른 background-image와 축약형에 있는 위치와 똑같은 위치에 나타나고 같은 방식으로 작동한다. CSS3 기울기에 대한 더 자세한 내용은 dev.opera.com의 CSS3 linear gradientsCSS3 radial gradients 참조.

목록 (List)

목록의 글머리 기호 유형, 위치, 이미지를 한 줄로 지정할 수 있다. 다음 CSS를 살펴보자:

list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);

이것은 다음과 동일하다:

list-style: circle inside url(bullet.gif);

값 중 하나라도 생략되는 경우, 다음 기본 값이 가정된다는 사실을 주목하자:

list-style-type: circle;
list-style-position: outside;
list-style-image: none;

색 (Color)

16 진수 색상 값을 지정할 때, 두 개의 헥스 값이 각각의 색상 채널에서 같다면 축약형을 사용할 수 있다. 예를 들어, #000#000000 와 같다. 더 복잡한 예제를 살펴보자: #6c9#66cc99 와 같다.

Leave a comment