배경 속성
종류별 속성 | 설명 | 사용값 |
background-color | 배경색 지정. 웹표준 컬러코드, 또는 반투명 배경색 지정 가능. background-color: #f8f8f8; background-color: rgba(244,196,196,0.3); | 웹표준 컬러코드(#a8a8a8) RGB컬러(rgb(255,255,255)) RGBA컬러(rgba(255,255,255,1)) |
background-image | 배경 이미지 URL 지정 background-image: url("./bg-img.png"); | URL |
background-position | 배경 이미지의 요소 내 시작 위치 지정 %, 픽셀 값으로 임의의 고정 위치를 지정하거나 가로, 세로 정렬 값으로 정렬 위치 지정 가능. background-position: 100px 100px; background-position: center; background-position: left top; background-position: 50% 50%; | %, 픽셀, 가로위치정렬(left, center, right) 세로위치정렬(top, center, bottom) |
background-size | 배경 이미지 크기 지정 % 값으로 전체 배경을 비율로 채울 수 있음. 100%를 주면 전체 영역을 채움. background-size: 100px 100px; background-size:100%; background-size:cover; | auto - 배경 이미지 크기 1:1로 출력 cover - 배경을 다 채우도록 배경 이미지 크기 조절. 배경 이미지 크기가 요소보다 크거나 같음. HTML 문서 상단이나 전체 배경으로 많이 사용됨. contain - 배경 이미지가 다 보이도록 배경 이미지 크기 조절. 배경 이미지 크기가 요소보다 작거나 같음. 픽셀 - 이미지 크기를 고정된 픽셀 크기값으로 고정 % - 요소 크기를 기준으로 % 비율로 크기 가변 지정. 요소 크기값에 따라 자동 변경됨. |
background-repeat | 배경 이미지 반복 여부 지정. 가로, 세로, 가로/세로 모두로 구분해 반복 설정 가능 background-repeat: no-repeat; background-repeat: repeat-y; | repeat - 가로/세로 반복 no-repeat - 반복 없음 repeat-x - 가로 방향 반복 repeat-y - 세로 방향 반복 space - 가로/세로 방향으로 반복하지만 이미지가 잘리지 않는 갯수까지만 반복하고 남는 공간은 여백으로 분배해서 배경 이미지들사이를 띄움. round - 가로/세로 방향으로 반복하지만 이미지가 잘리지 않는 갯수까지만 반복하고 남는 공간은 배경 이미지들을 키워서 채움 |
background-origin | 배경 이미지가 표시되는 왼쪽 위 끝 원점 위치를 지정. background-position 으로 지정하는 위치값의 (0,0) 원점이 됨. background-origin: content-box; | padding-box - 안쪽 여백(패딩) 영역 왼쪽 위 모서리가 원점이 됨. border-box - 테두리선 영역 왼쪽 위 모서리가 원점이 됨. content-box - 내용 표시영역 왼쪽 위 모서리가 원점이 됨. |
background-clip | 배경색이나 배경 이미지가 표시될 수 있는 요소 안의 최대 영역 한계를 지정합니다. background-origin 과 같은 속성 값을 사용합니다. | padding-box - 안쪽 여백(패딩) 영역까지만 배경 이미지가 표시됨. border-box - 테두리선 영역 까지만 배경 이미지가 표시됨. content-box - 내용 표시영역 안쪽에만 배경 이미지가 표시됨. |
background-attachment | 배경 이미지 위치를 고정할지 화면 스크롤에 따라 스크롤할지를 지정. 화면 스크롤에 따라 큰 배경 이미지가 스크롤되도록 해 동적인 효과를 줄 때 사용. | scroll - 페이지 스크롤에 따라 배경 이미지가 함께 스크롤 됨. fixed - 배경 이미지 위치 고정. local - 컨텐츠 내용을 스크롤바로 스크롤할 수 있는 경우 내용과 함께 배경 이미지가 스크롤 됨. |
배경색
'HTML&CSS' 카테고리의 다른 글
HTML+CSS 기초 강의 - 28. CSS 선택자 기초 5 - 가상클래스 (0) | 2018.12.21 |
---|---|
HTML+CSS 기초 강의 - 29. CSS 속성 기초 1 - 텍스트 속성 (1) | 2018.12.21 |
HTML+CSS 기초 강의 - 30. CSS 속성 기초 2 - 여백과 테두리 속성 (0) | 2018.12.21 |
HTML+CSS 기초 강의 - 31. CSS 속성 기초 3 - 요소의 크기와 영역 속성 (0) | 2018.12.21 |
HTML+CSS 기초 강의 - 32. CSS 속성 기초 4 - 배경 속성 (0) | 2018.12.21 |
HTML+CSS 기초 강의 - 33. HTML5 에서 추가된 폼 요소 (3) | 2018.12.21 |