CSS background - shorthand 속성

CSS background-shorthand 속성

코드를 단축하기 위해 단일 속성에 모든 배경 속성을 지정할 수도 있다. 이것을 shorthand 속성이라고 한다.

아래와 같이 작성하는 것 대신에:

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

background 속성을 활용하여 아래와 같이 간략히 작성할 수 있다.

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

shorthand 속성을 사용할 때 속성 값의 순서는 다음과 같다:

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

속성 값 중 하나가 누락되어도 다른 값이 이 순서에 있으면 상관 없다. 위의 예에서 백그라운드 첨부 속성은 값이 없으므로 사용하지 않는다.

 

아래 표는 background 속성에 대해 간략히 정리해보았다.

속성	설명
background	하나의 선언에 모든 배경 속성을 설정합니다
background-attachment	배경 이미지를 고정할지 또는 페이지의 나머지 부분과 함께 스크롤할지 여부를 설정합니다
background-clip	배경의 페인팅 영역을 지정합니다
background-color	요소의 배경색을 설정합니다
background-image	요소의 배경 이미지를 설정합니다
background-origin	배경 이미지의 위치를 지정합니다
background-position	배경 이미지의 시작 위치를 설정합니다
background-repeat	배경 이미지가 반복되는 방법을 설정합니다
background-size	배경 이미지의 크기를 지정합니다

 

지금까지 background 속성에 대해서 살펴보았다.

모두 화이팅입니다.!!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.