background-color
<aside> 💡 선택자 { background-color : 색상명| rgb | rdba | hsl | hsla | 16진수; }
</aside>
body{
background-color:aqua;
background-color: rgb(50, 150, 250);
background-color: rgba(50, 150, 250,0.5);
background-color: hsl(180, 100%, 70%);
background-color: hsla(180, 100%, 70%, 0.5);
background-color: #10aaff;
}
background-clip
| 구분 | 내용 |
|---|---|
| border-box | 박스 모델의 가장 외과인 테두리까지 적용 |
| padding-box | 테두리 제외한 패딩범위까지 적용 |
| content-box | 내용부문만 적용 |
background-repeat
| 구분 | 내용 |
|---|---|
| repeat | 브라우저에 가득 찰 때까지 가로/세로 반복 |
| repeat-x | 넓이만큼 반복(가로) |
| repeat-y | 높이 만큼 반복(세로) |
| no-repeat | 이미지 한번만 출력 |
background-size
| 구분 | 내용 |
|---|---|
| auto | 원래 배경이미지 크기만큼 표시 |
| contain | 요소안으로 이미지가 들어올 수 있게 확대 및 축소함 |
| cover | 요소의 범위를 이미지가 덮을 수 있도록 확대 및 축소 |
| 크기값(px) / 백분율 | 수치화된 값으로 표현(가로,세로) |
background-position