css background 단축 속성

css background 단축 속성을 알아봅시다.

 

---

1. css background 단축 속성

div{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/images/background.jpg')    
}

css background 속성

일단 background 속성을

하나씩 적어보았습니다.

 

더 많은 속성이 있긴 한데

일단 위에 적은 4개의 속성을 적용한다고 가정해봅시다.

 

물론 이 상태로도 css가 잘 적용됩니다.

그러나 코드가 너무 길어지고

한눈에 들어오지 않습니다.

 

이 코드를 한 줄로 줄여주는 방법이

css background 단축 속성입니다.

 

-

 

div{
   background: no-repeat center/cover url('/images/background.jpg');
}

css background 단축 속성

css background 단축 속성은 위와 같이 적어주시면 됩니다.

속성의 순서는 상관없습니다.

 

단 두 가지만 빼면요.

 

 

-

 

---

2. 순서를 꼭 지켜야 하는 속성 두 가지

div{
   background: center/cover;
}

css background 단축 속성 - position/size

헷갈리지 않기 위해

position과 size만 남겨보았습니다.

 

css background 단축 속성에서는

position/size 형태가

항상 유지되어야 합니다.

 

position의 경우는 혼자만 사용이 가능하나

size 속성을 넣고 싶다면

꼭 position 뒤에 넣어주셔야 합니다.

 

-

 

div{
   background: no-repeat center/cover url('/images/background.jpg') white;
}

css background 단축 속성 - color

두 번째로 순서가 중요한

css background 단축 속성은 color입니다.

 

color는 꼭 맨 마지막에 적어주셔야지만

background가 정상적으로 작동합니다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/background

background - CSS: Cascading Style Sheets | MDN

좀 더 자세한 설명이 궁금하신 분들은

위의 링크를 통해

MDN 사이트에 확인해주세요.

---

이상으로 css background 단축 속성에 대해 알아봤습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[coding/html + css] - text-indent CSS 들여쓰기 내어쓰기

text-indent CSS 들여쓰기 내어쓰기

[coding/html + css] - css 테두리 둥글게

css 테두리 둥글게

 

그럼 이만.

총총.