CSS 배경 (background)
1. background-color
- background-color : 배경색 관련 스타일 속성
2. background-image
- background-image : 배경 이미지 관련 스타일 속성
- 속성값 : url 함수를 사용하여 이미지 파일의 URL 주소 설정
- 배경 이미지가 박스모델의 폭 또는 높이보다 작은 경우 가로 방향 또는 세로 방향으로 이미지 반복 출력
- 배경 이미지가 박스모델의 폭 또는 높이보다 큰 경우 박스모델을 벗어난 이미지는 잘라내어 출력
- 박스모델의 폭 또는 높이보다 작은 배경 이미지를 반복 출력하지 않은 경우 배경 이미지는 박스모델의 왼쪽 상단을 기준으로 출력
3. background-repeat
- background-repeat : 배경 이미지의 반복 관련 스타일 속성
- 속성값 : repeat (기본), repeat-x, repeat-y, no-repeat
4. background-position
- background-position : 배경 이미지의 출력 위치 관련 스타일 속성
- 속성값 : px, %, 키워드 (left, right, top, bottom, center)
- 기본값 : left top
- 배경 이미지의 출력 위치를 왼쪽 상단을 기준으로 가로와 세로 방향으로 이동
5. background-attachment
- background-attachment : 배경 이미지 고정 관련 스타일 속성
- 속성값 : scroll (기본), fixed (브라우저 고정)
6. background-size
- background-size : 배경 이미지의 크기 관련 스타일 속성
- 속성값 : auto (기본)
=> 배경 이미지를 그대로 출력
=> 여백 발생 또는 이미지 잘림
.bgsize1 {
background-size: auto;
}
- 속성값 : 배경 이미지의 폭을 px 단위로 변경
=> 이미지 비율에 맞게 높이 자동 변경
.bgsize2 {
background-size: 300px;
}
- 속성값 : 배경 이미지의 폭과 높이를 px 단위로 변경
.bgsize3 {
background-size: 500px 350px;
}
- 속성값 : 배경 이미지의 폭을 % 단위로 변경
=> 이미지 비율에 맞게 높이 자동 변경
.bgsize4 {
background-size: 90%;
}
- 속성값 : 배경 이미지의 폭과 높이를 % 단위로 변경
.bgsize5 {
background-size: 100% 100%;
}
- 속성값 : contain
=> 배경 이미지의 폭과 높이 중 차이가 작은 부분을 100%로 설정
=> 차이가 큰 부분은 여백 발생
.bgsize6 {
background-size: contain;
}
- 속성값 : cover
=> 배경 이미지의 폭과 높이 중 차이가 큰 부분을 100%로 설정
=> 차이가 작은 부분은 잘림 발생
.bgsize7 {
background-size: cover;
}
7. background-clip
- background-clip : 배경 이미지의 적용범위 관련 스타일 속성
- 속성값 : border-box (기본, 외곽선 바깥쪽), padding-box (외곽선 안쪽), content-box (내용 출력 영역)
8. linear-gradient
- background : 배경 관련 모든 스타일 속성값 설정
- background 속성값으로 linear-gradient 함수 사용
- linear-gradient : 엘리먼트에 선형 그라데이션 효과를 제공하는 함수
linear-gradient(진행방향, 시작색, 종료색)
- 진행방향 : 각도 (deg), 키워드 (to left, to right, to top, to bottom)
- 시작색 뒤에 중간색 표현 가능 (중간색에 백분율 사용)
=> 중간색에 백분율이 생략된 경우 50%로 자동 처리
9. radial-gradient
- background 속성값으로 radial-gradient 함수 사용
- radial-gradient : 엘리먼트에 원형 그라데이션 효과를 제공하는 함수
radial-gradient(모양, 시작색, 종료색)
- 모양 : circle, ellipse
=> 원의 중심위치는 박스모델의 가운데로 설정
=> 원의 중심위치 변경 가능 (특정 브라우저에서만 가능)
- CSS 표준규약에 정의되어 있지 않고 특정 웹브라우저에서만 사용 가능한 스타일 속성값 존재
=> -webkit- : 웹킷 방식의 웹브라우저 (크롬, 사파리, 엣지 등)
=> -moz- : 개코 방식의 웹브라우저 (파이어폭스, 모질라 등)
=> -o- : 오페라 방식의 웹브라우저 (오페라 등)
=> -ms- : 트라이던트 방식의 웹브라우저 (IE 등)
