CSS 축약 지침

개요

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

경계 (border)

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

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

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

또는 동일한:

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

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

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

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

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

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

글꼴 (Font)

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

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

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

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

배경 (Background)

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

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

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

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

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

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를 살펴보자:

이것은 다음과 동일하다:

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

색 (Color)

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

답글 남기기