Shorthand property

약식 속성 ( background )

똑같은 한 코드에 여러가지 속성이 붙었을 경우 코드의 길이를 줄이고 가독성을 높이기 위해서 약식 속성을 사용

ex 1
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

이러한 코드를 통합하여 사용할 경우

ex 2
body {
background : #ffffff url("img_tree.png no-repear right top")
}
ex1과 같은 결과가 나오게 된다

background의 속성 순서

color - image - repeat - attachment - position

중간에 속성이 빠져 그 속성의 값을 쓰지 않으면 그 속성은 빠지고 결과가 나오게 된다

약식 속성 ( border )

파랑색 5px의 단선의 테두리가 생성

p {
border : 5px solid blue;
}

border 다음에 -top 등과 같이 방향(top, bottom, right, left)을 적고 속성을 주면 그 한쪽에는 지정한 속성이 모두 들어간다

p {
border-left : 5px solid red;
}

border의 속성 순서

width - style(필수) - color