728x90
CSS의 background 속성은 요소의 배경을 설정하는 데 사용되며, 색상, 이미지, 반복, 위치 등을 지정할 수 있습니다. background 속성은 여러 개의 세부 속성을 축약하여 사용할 수 있으며, 복잡한 배경을 효과적으로 관리할 수 있는 도구입니다.
주요 속성들:
1. background-color
배경의 색상을 지정하는 속성입니다.
background-color: green;2. background-image
배경 이미지(요소 뒤에 나타나는 이미지)를 지정하는 속성입니다.
background-image: url('example.jpg');3. background-repeat
배경 이미지의 반복 방식을 설정하는 속성입니다.
- 기본값: repeat (이미지가 수평과 수직으로 반복)
- 옵션:
- no-repeat: 이미지를 반복하지 않음
- repeat-x: 가로 방향으로만 반복
- repeat-y: 세로 방향으로만 반복
background-repeat: no-repeat;4. background-position
배경 이미지의 위치를 설정하는 속성입니다. 기본값은 왼쪽 상단(0% 0%)입니다.
background-position: center 20%;5. background-size
배경 이미지의 크기를 설정하는 속성입니다. 이미지를 원하는 크기로 조정하거나 컨테이너에 맞춰 조정할 수 있습니다.
- 옵션:
- auto: 원래 이미지 크기 유지
- cover: 이미지가 요소의 너비와 높이에 맞춰서 비율을 유지하며 확장
- contain: 이미지가 요소 내에 완전히 포함되도록 비율을 유지하며 축소 또는 확대
background-size: cover;6. background-attachment
배경 이미지의 스크롤 방식을 설정하는 속성입니다.
- 옵션:
- scroll: 콘텐츠가 스크롤될 때 배경 이미지도 스크롤 (기본값)
- fixed: 배경 이미지가 고정되어 스크롤되지 않음
- local: 배경이 요소 내부 스크롤에 따라 움직임
background-attachment: fixed;7. background-clip
배경이 어디까지 확장되는지를 정의하는 속성입니다.
- 옵션:
- border-box: 배경이 보더까지 확장 (기본값)
- padding-box: 배경이 패딩까지만 확장
- content-box: 배경이 콘텐츠 영역까지만 확장
background-clip: padding-box;8. background-origin
배경 이미지의 시작 지점을 설정하는 속성입니다.
- 옵션:
- border-box: 보더부터 시작 (기본값)
- padding-box: 패딩부터 시작
- content-box: 콘텐츠 영역부터 시작
background-origin: content-box;
축약형 문법:
여러 개의 background 속성을 한 번에 설정할 수 있습니다. 각 속성을 한 줄로 결합하여 사용합니다.
background: [background-color] [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin];예시:
background: url('example.jpg') no-repeat center center / cover;위 예시는 이미지를 가운데 배치하고, 크기를 요소에 맞게 조절하며 반복하지 않도록 설정한 것입니다.
728x90