🖼 Background

🎨 background-color

    - 배경에 색상을 바꿀때 사용합니다.

    - hex | rgb | rgba 로 색상이 표현됩니다.

.box{
    background-color : #0066ff;
}

🖼 background-image

    - url()을 사용하여 경로를 지정합니다.

    - 본인의 로컬 경로를 넣거나 웹상의 인터넷 주소를 넣습니다.

.box{
    background-image : url('./assets/image/image.jpg');
}

🎭 background-repeat

    - 이미지 반복사용을 지정 가능합니다.

    - repeat | no-repeat

    - 반복 | 반복하지않음

.box{
    background-image : url('./assets/image/image.jpg');
    background-repeat : no-repeat;
    /* default background-repeat : repeat; */
}

📏 background-size

    - 배경의 사이즈를 지정합니다.

    - contain | cover | custom

    - 비율 & 세로길이에 맞춰서 | 비율 & 가로길이에 맞춰서 | auto & custom

.box{
    background-image : url('./assets/image/image.jpg');
    background-repeat : no-repeat;
    /* default background-repeat : repeat; */
}

📐background-position

    - x, y축 기준의 위치를 명시합니다.

    - bottom | top | left | right | 00% | 00px...

.box {
    background-image : url('./assets/image/image.jpg');
    background-repeat : no-repeat;
    /* default background-repeat : repeat; */
    background-size : contain;
    background-position : center center;
}

💡 background shorthand

    - background property 를 한번에 사용하는 방법

    - background : color | image | repeat | position/size

.box {
    background : #eee url("./assets/images/img.jpg") 
                 no-repeat center/cover;
}

 

*

background gradient

    - background의 color에 gradient를 적용합니다.

.background {
  width : 500px;
  height : 500px;
  margin : 0 auto;
  background: linear-gradient(#e66465, #9198e5);
}

 

https://developer.mozilla.org/ko/docs/Web/CSS/linear-gradient

linear-gradient