[css] background 속성 축약 순서 (shorthand property)
2021. 4. 21. 10:42ㆍ퍼블리싱/CSS
반응형
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' 카테고리의 다른 글
[css] margin과 padding 적재적소에 사용하는 법 (feat. margin-collapsing 마진병합현상/마진상쇄현상) (0) | 2021.07.20 |
---|---|
[css] transition 이해하기 (0) | 2021.04.28 |
[css] flex 이해하기 (0) | 2021.04.16 |
css 반응형 (0) | 2020.12.18 |
css: flex (0) | 2020.12.18 |