CSS 초보자를 위한 팁 CSS Shorthand (줄여쓰기, 속기)

퍼블리싱을 학원에서 배우거나 책으로 공부할때 CSS를 기본속성 값 그대로 표현하는 법은 많이 가르치고 책에도 나와 있지만, CSS Shorthand 대해선 사용하는 방법만 나와있지 정확한 순서나 원리 원칙에 대해 나와있는 것은 보기 힘듭니다. 그래서 CSS Shorthand에 대하여 정리하고 합니다.
CSS Shorthand, -우리말로 "줄여쓰기, 속기"- 는 스타일시트의 파일을 줄여줄 뿐만 아니라 가독성을 높여주고 수정할때에도 빠르게 할 수 있습니다.

1. Font

font 속성을 속기로 사용할때 선언하지 않은 값은 기본 값이됩니다. font의 기본 속성은 아래와 같습니다.

• - font-style
• - font-variant
• - font-weight
• - font-size
• - line-height
• - font-family

줄여쓰지 않고 속성 적용

1 2 3 4 5 6 7 8

.element {     font-style:normal;     font-variant:normal;     font-weight:normal;     font-size:inherit;     line-height:normal;     font-family:inherit; }

CSS Shorthand 적용

1	.element {font:normal normal normal inhert/normal inherit;}

2. Background

배경화면은 단색, 이미지등으로 적용할 수 있습니다. 속성은 아래와 같습니다.

• - background-color
• - background-image
• - background-repeat
• - background-position
• - background-attachment

줄여쓰지 않고 속성 적용

1 2 3 4 5 6 7

.element {     background-color:transparent;     background-image:none;     background-repeat:repeat;     background-position:top left;     background-attachment:scroll; }

CSS Shorthand 적용

1	.element {background:transparent url(image.png) repeat top left scroll;}

3. List

목록속성은 단 3가지만 있습니다. 속성은 아래와 같습니다.

• - list-style-type
• - list-style-position
• - list-image

줄여쓰지 않고 속성 적용

1 2 3 4 5

.element {     list-style-type:square;     list-style-position:inside;     list-style-image:url(image.png); }

CSS Shorthand 적용

1	.element {list-style:square inside url(image.png);}

4. border

Border는 상하좌우의 속성을 지닙니다. 속성은 아래와 같습니다.

• - border-width
• - border-top
• - border-top-color
• - border-top-style
• - border-top-width
• - border-style
• - border-right
• - border-right-color
• - border-right-style
• - border-right-width
• - 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 속성은 위와같이 많습니다. 하지만 많이 사용하는 것은 파란색으로 쓰여진 글자부분입니다. 위3가지 속성을 줄여서 사용하시면 되고 사용방법은 간답합니다.

줄여쓰지 않고 속성 적용

1 2 3 4 5

.element {     border-width:5px;     border-style:dotted;     border-color:#000; }

CSS Shorthand 적용

1	.element {border:5px solid #000;}

5. Margin과 Padding

Margin과 Padding은 각각 4가지 입니다. 속성은 아래와 같습니다. (padding 줄여쓰기 또한 아래와 동일합니다.)

• - margin-top
• - margin-right
• - margin-bottom
• - margin-left
• - padding-top
• - padding-right
• - padding-bottom
• - padding-left

줄여쓰지 않고 속성 적용

1 2 3 4 5 6

.element {     margin-top:5px;     margin-right:7px;     margin-bottom:5px;     margin-left:7px; }

CSS Shorthand 적용 (순서는 위 > 오른쪽 > 아래 > 왼쪽 순서로 작성합니다.)

1	.element {margin:5px 7px 5px 7px;}

CSS Shorthand 적용 (margin의 상하 속성이 같고, 좌우 속성이 같을경우)

1	.element {margin:5px 7px;}

CSS Shorthand 적용 (margin의 상하 좌우 속성이 같을경우)

1	.element {margin:5px;}

6. outline

outline은 element 요소 주변의 구분할 때 사용합니다. 속성은 아래와 같습니다.

• - outline-width
• - outline-style
• - outline-color

줄여쓰지 않고 속성 적용

1 2 3 4 5

.element {     outline-width:3px;     outline-style:dotted;     outline-color:#000; }

CSS Shorthand 적용

1	.element {outline:3px dotted #000;}

7. Transition

Transition은 CSS LEVEL3 으로 마우스 이벤트에 의한 동적인 요소를 표현하고자 할 때 주로 사용됩니다. 속성은 아래와 같습니다.

• - transition-property
• - transition-timing-function
• - transition-delay

줄여쓰지 않고 속성 적용

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

transition-property:all; transition-duration:3s; transition-timing-function:ease-in; transition-delay:2s;   /* 파폭 4 */ -moz-transition-property:all; -moz-transition-duration:3s; -moz-transition-timing-function:ease-in; -moz-transition-delay:2s;   /* 크롬과 사파리 */ -webkit-transition-property:all; -webkit-transition-duration:3s; -webkit-transition-timing-function:ease-in; -webkit-transition-delay:2s;   /* 오페라 */ -o-transition-property:all; -o-transition-duration:3s; -o-transition-timing-function:ease-in; -o-transition-delay:2s;

CSS Shorthand 적용

1 2 3 4 5 6 7 8 9 10

transition:all 3s ease-in 2s;   /* 파폭 4 */ -moz-transition:all 3s ease-in 2s;   /* 크롬과 사파리 */ -webkit-transition:all 3s ease-in 2s;   /* 오페라 */ -o-transition:all 3s ease-in 2s;

마치며

CSS 줄여쓰기는 문법적으로 강제성을 가지지는 않습니다. 그러나 작성시 시간절약과 CSS크기를 줄일 수 있습니다.
또한 저 같은 경우는 줄여쓰기를 자주 사용하는 편입니다. 그래서 위와 같이 정리하였으니 CSS작성하실 때 많은 도움이 되었으면 합니다.

원문 : http://biew.co.kr/19