[css] All about Background

tobo·2022년 7월 15일
0

CSS

목록 보기
7/8
post-thumbnail

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 가 빈곳에 나타난다.


4. Gradient Background

참고. [ MDN. css gradient ]
이건 개별 포스팅을 만들어 볼까 합니다.✌️

profile
"Think Now, Design Later"

0개의 댓글