[CSS] Background 속성 작성 순서: The Order of the Background Shorthand Property

Background 속성 작성 순서

background의 속성 중 여러 속성을 모두 사용하는 도중에, background만을 사용하여 한 줄로 합치고 싶었다.

• background-image
• background-size
• background-position
• background-color
• background-repeat
• ...

다섯 가지를 섞어서 background의 값으로 넣었는데 잘 안되어서 "The Order of the Background Shorthand Property" 검색어로 찾아보게 되었다.

 

결론적으로,

When using the shorthand property the order of the property values is:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

It does not matter if one of the property values is missing, as long as the other ones are in this order. 

다음 순서대로 작성하고, 만약 한 중간에 지정하고 싶지 않은 속성이 있으면 건너뛰고 작성하면 된다.

또한 background shorthand 작성에는 'background-size'가 없으므로, background-size는 아래에 따로 작성해주어야 한다.

 

Recap

  background: {color} {image} {repeat} {attachment} {position};
  background-size: cover;