CSS : Background 배경

 

CSS : Background

---

background

• 콘텐츠의 배경을 의미한다.
• 단축 속성으로서 색상, 이미지, 반복 등 다양한 하위 속성을 지정할 수 있다

 

 

 

 

---

 

background-color

• 색상은 키워드, RGB 색상 코드 혹은 RGB함수를 이용하여 지정할 수 있다.

/* color : 키워드*/
p {
    color: red;
}

/* color : RGB 색상 코드 */
p {
    color: #ff0000;
}

/* color : RGB 함수 */
p {
    color: rgb(255, 0, 0);
}

 

 

 

---

 

background-image

• url() 함수를 사용하여 이미지 경로를 넣어준다.
• 이미지가 바둑판 형태로 반복되어 나오는데, 사용하는 이미지의 크기가 콘텐츠에 비해 작기 때문에 반복해서 나온다 (기본값임)
  반복 형태는 background-repeat를 통해서 바꿀 수 있다.

div {
    box-sizing: border-box;
    width: 500px;
    height: 500px;
    border: 1px solid red;
    background-image: url(/Reshur_logo150px*.png);
}

 

 

---

 

 

background-size

• background-image의 사이즈를 조정할 때 사용
• 너비와 높이를 지정할 수 있으며 키워드 값으로도 지정가능
  • 100% : 콘텐츠와 동일한 크기로 배경 이미지를 보여줌 (이미지가 왜곡될수있음)
  • cover: 이미지의 비율이 깨지지않는 선에서 최대 사이즈로 지정
                콘텐츠에 이미지를 최대한 크게 보여줌 (이미지가 잘릴 수 있음)
  • contain : 이미지가 찌그러지거나 잘리지 않는 한도 내에서 최대 사이즈로 지정됨
                   콘텐츠에 이미지를 최대한 크게 보여주되 잘리는 부분이 없고 동일한 비율을 유지

/*너비와 높이순*/
background-size: 500px 200px;

 

 

 

---

 

 

background-position

• background-image의 위치를 지정할 수 있으며 기본위치는 left-top이다.
• 위치에 대한 키워드 : left, right, top, bottom, center

 /*오른쪽*/
background-position:right; 

/*오른쪽 바닥*/
background-position:right-bottom

 

 

 

---

background-repeat

• background-image를 반복할 때 사용한다. 
  반복하지 않을 경우, no-repeat를 사용한다

/*반복*/
background-repeat:repeat;

/*반복하지않음*/
backgroud-repeat:no-repeat;

 

 

 

이 외에도 다양한 하위 속성이 있기 때문에 틈틈이 MDN을 보는 것이 좋다.

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

background - CSS: Cascading Style Sheets | MDN