[css] All about Background

tobo·2022년 7월 15일

CSS CSS Tip animation background 단축속성

CSS

목록 보기

7/8

1. Background 단축 속성 활용

🔆 background: color, image, repeat, position / size;

🎨 background 의 일반 속성명:
-attachment, -clip, -color, -image, -origin, -position, -repeat, -size

참고. [ MDN css background ], [ MDN. css 단축속성 ]

얼마나 단순화가 가능한지 아래 예시를 보자.

background-color: orange;
background: orange; 👍👍👍

# Before.
background-image: url('img.png');
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
background-position-y: bottom;
background-color: #ffffff;

# After.
background: #fff url('img.png') no-repeat, center bottom / cover;

아래와 같은 경우, '반복' 되는 부분은 일반 속성으로 적용하면 더 좋다.

# Before.
background: url('img1.png') no-repeat top right / 2em 2em, 
            url('img2.png') no-repeat bottom right / 2em 2em, 
            url('img3.png') no-repeat bottom left / 2em 2em;

# After.
background: url('img1.png') top right, 
            url('img2.png') bottom right, 
            url('img3.png') bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;

/* 개인적으로 변경 전이 더 괜찮아보인다.ㅎㅎ */

2. 단축 속성을 활용한 Hover Animation

:hover 했을때, 이미지가 커지는 애니메이션은 어떨까? 🏄‍♀️

예시.1

.profile {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: url("profile.jpg") no-repeat center / 100%;
    transition: background 1s;
}
.profile:hover {
	background: url("profile.jpg") no-repeat center / 120%;
}

예시.2 (반복은 우리의 🤾🏻‍♂️ )

.profile {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: url("profile.jpg") no-repeat center;
    background-size: 100%;
    transition: background-size 1s;
}
.profile:hover {
	background-size: 120%;
}

💯 애니메이션이 필요한 속성은 별도의 일반 속성으로 지정해서 사용하는 것이 간결하다.

3. Background 이미지 사이즈

background-size: cover;
cover 속성은 엘리먼트가 갖는 사이즈에 꽉 차게 이미지 사이즈를 조정해 준다.👍 + 100%와 동일하다.
background-size: contain;
contain 을 사용하면 이미지 전체가 모두 보이도록 사이즈를 조정한다.
cover 혹은 contain를 사용할때도 position 지정이 필요하다. -> center, 50% 50% 😃
background size가 100%보다 작을시 (배경에 빈곳이 있을 경우) background-color 가 빈곳에 나타난다.