[필기] CSS 기초 (4)

`background` 서브속성 링크

 

chatGTP

 

`background` 속성은 CSS에서 요소의 배경을 설정하는 데 사용되는 속성으로, 요소의 배경 색상, 이미지, 반복 등을 지정할 수 있습니다. `background` 속성에는 다양한 서브 속성들이 포함되어 있습니다. 주요한 서브 속성들을 아래에 정리해드리겠습니다:

1. `background-color`:
   - 요소의 배경 색상을 지정합니다.
   - 예를 들어, `background-color: #f0f0f0;`은 요소의 배경 색상을 연한 회색으로 설정합니다.

2. `background-image`:
   - 요소의 배경으로 사용할 이미지의 경로를 지정합니다.
   - 이미지 파일의 URL을 사용하여 배경으로 사용할 수 있습니다.
   - 예를 들어, `background-image: url("image.jpg");`는 "image.jpg" 파일을 요소의 배경으로 사용합니다.

3. `background-repeat`:
   - 배경 이미지를 반복해서 표시할지를 설정합니다.
   - 기본값은 `repeat`으로, 가로와 세로 방향으로 이미지가 반복됩니다.
   - `no-repeat`은 이미지를 반복하지 않고 한 번만 표시합니다.

4. `background-position`:
   - 배경 이미지의 위치를 조정합니다.
   - `x축`과 `y축` 값을 사용하여 이미지를 원하는 위치로 이동시킬 수 있습니다.

5. `background-size`:
   - 배경 이미지의 크기를 조정합니다.
   - `contain`은 이미지가 요소에 맞게 조절되어 전체가 표시되도록 합니다.
   - `cover`는 이미지가 요소에 맞게 조절되어 전체가 채워지도록 합니다.

6. `background-attachment`:
   - 배경 이미지의 스크롤에 대한 동작을 설정합니다.
   - `scroll`은 이미지가 요소와 함께 스크롤됩니다.
   - `fixed`는 이미지가 요소에 고정되어 스크롤과 상관없이 고정됩니다.

이와 같은 서브 속성들을 조합하여 `background` 속성을 사용하면 요소의 배경을 다양하게 꾸밀 수 있습니다. 배경 색상, 이미지, 반복, 위치, 크기 등을 조정하여 웹 페이지의 디자인을 더욱 다채롭게 만들 수 있습니다.