박스 모델의 배경 설정에 대해 알아보자.
박스 모델의 배경에는 색상뿐 아니라 이미지 등 다양한 요소를 넣을 수 있다.
여러가지 속성이 있으며 아래와 같이 이루어져 있다.
- "background"(모두 동일하게 들어가므로 제외)-color : 요소의 배경 색상
- -clip : 요소의 배경 적용 범위
- -image : 요소의 배경 이미지 지정
- -origin : 요소 내 배경 시작 위치
- -size : 배경 이미지의 크기
- -position : 배경 이미지의 위치
- repeat : 배경 이미지의 반복 패턴
사용 코드 예시
<style>
div{
background-color: red;
background-clip: border-box(테두리 끝까지) / padding-box(여백 제외한 내부) / content-box(컨텐츠 영역만)
background-image: url(images/cat.jpeg);
background-size(백그라운드에 들어간 이미지 크기 제어): 380px 380px;
background-repeat: repeat(바둑판처럼 이미지 반복) / no-repeat(이미지 반복 x) / repeat-x, y(가로,세로로만 반복)
background-origin: border-box, padding-box, content-box;
(테두리에서 시작할지, 여백에서부터 시작할지, 콘텐츠에서 부터 시작할지 정할 수 있다.)
background-position: top, center, bottom, right, left, left top(과 같이 좌상단으로도 사용할 수 있다.), 100px 50px와 같이 디테일하게 조정할 수도 있다.)
</stlye>
hyohyo