[css] background 속성 축약 순서 (shorthand property)

 

 

 

 

background : color image repeat position / size attachment

 

실무에서 가장 많이 쓰이는 아래의 네가지 속성을

background-image: url(../img/img.jpg);
background-repeat:no-repeat;
background-position:center top;
background-size: 100%;

 

한 줄로 축약하면 이렇게 된다.

background: url(../img/img.jpg) no-repeat center top / 100%;

 

position과 size 는 일부 값의 단위를 공유하므로 꼭 슬래시로 구분해야 하고,

size만 사용할 경우(축약형에서)에도 position 값을 꼭 명시해주어야 한다.

 

 

 

 

 

참고사이트:

lifea.co.kr/css-%EC%B6%95%EC%95%BD-%EC%A7%80%EC%B9%A8/

CSS 축약 지침