background css 축약, 한번에 쓰는 방법, 줄여서 써보자

background css 축약, 한번에 쓰는 방법, 줄여서 써보자.

background css를 적용할 때 많은 속성들이 있다.

이것을 한번에 줄여서 써보자.

 

background css

.wrap 
{
background-color:#CCC;
background-image:url("image/photo1.png");
background-position:left center;
background-size:20%;
background-repeat:no-repeat;
background-attachment:fixed;
}

 

백그라운드 색 bacground-color:  #ccc이고,
bacground-image: url('image/photo1.png') 이미지가 추가되어 있다.

그리고 background-image 위치는 왼쪽 정가운데  background-position: left center;

사이즈는 bacground-size: 20% 이다.
background-size는 %말고도 cover, contain 이 있다.
bacground-size: cover
bacground-size: contain

반복되지 않도록 no-repeat 속성을 적용했다.

bacground-repeat : no-repeat

그리고 background의 스크롤 여부를 정하는 속성은 배경이미지가 움직이지 않게 background-attachment : fixed로 설정했다.
bacground-attachment: fixed

이것을 축약해서 써보자.

 

background css 축약

.wrap {background:#ccc url("image/photo1.jpg") left center/20% no-repeat fixed}

총칭의 의미로 bacground 를 쓴다.

백그라운드 배경색 => 이미지 경로 url => 백그라운드 위치(가로, 세로) => / => 사이즈 =>  반복여부 =>  스크롤 효과

background 배경색 #ccc

background 이미지 경로 url('image/photo1.jpg')

background 가로위치 세로위치 left center

background 사이즈를 넣으려면 꼭 '/'를 써준다. /20%
백그라운드 사이즈는 %나 px, cover 또는 contain 중 하나를 이용한다.

background 이미지 반복여부 no-repeat

background 이미지 스크롤 여부까지 설정한다.(백그라운드를 고정한다면)  fixed

 

이 순서대로 속성을 넣어주면 되는데 설정하고 싶지 않은 것은 그 다음 속성으로 넘어가서 써주면 된다.

 

 

hr 태그 css 100% 활용하기(색상, 두께, 점선)

white-space css(div 줄바꿈 방지 css)

40