백그라운드 설정을 할때 빠르게 코딩하는 방법.
아래 두개의 코드는 모두 동일한 결과를 출력하지만 두번째가 훨씬 짧다.
.box1 {
background-image: url("https://media.swncdn.com/cms/BST/67912-gettyimages-817147678-kieferpix.1200w.tn.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.box2 {
background: center/cover no-repeat
url("https://media.swncdn.com/cms/BST/67912-gettyimages-817147678-kieferpix.1200w.tn.webp");
}
background의 position과 size를 /를 이용해 같이 사용해주면 된다.
그리고 띄어쓰기 후 repeat 여부도 작성.
url도
background-image: ~~~ 없이
바로 url : (주소) 로 바로 작성가능.
훨씬 빠르고 짧다.