코딩 공부/HTML

<7> 배경

hg_96 2021. 3. 9. 17:28

 

 

background-clip :

border-box - 박스 모델의 가장 외곽

padding-box - 박스 모델의 테두리를 뺀 범위

content-box - 박스 모델의 내용 부분

 

 

background-repeat :

repeat - 화면 끝까지 이미지를 가로, 세로 반복 배치

repeat-x - 화면 끝까지 이미지를 가로로 반복

repeat-y - 화면 끝까지 이미지를 세로로 반복

no-repeat - 이미지를 한 번만

 

 

 

background-size :

auto - 원래 배경 이미지만큼

contain - 요소 안에 맞춤

cover - 요소를 덮도록 맞춤

크기 값, 백분율 - 가로와 세로를 지정

 

 

background-origin :

border-box - 가장 외곽의 테두리 

padding-box - 테두리를 뺀 안쪽 테두리

content-box - 내용의 부분이 기준