1. CSS 속성 : 배경 (Background)
ㅇ 배경 관련 속성들 : 색상,이미지 지정,반복 여부,고정 여부,위치,크기 등
ㅇ 단축형 지정 例) { background : #ffbc53 url(test.gif) no-repeat fixed left top }
- 속성 순서 : 통상, color,image,repeat,attachement,position
2. 배경 속성 구분
ㅇ background-color : 배경색
ㅇ background-image : 배경 이미지 지정
- 보이는 위치 : 배경색이 주어지면 그 위에 나타남
- 이미지 포멧 : PNG, JPEG, GIF
- 형식 : url(이미지 파일이 있는 url 주소)
. 例) body { background-image: url(/img/pattern.gif); }
* 이미지 크기가 작으면 기본적으로 반복됨
ㅇ 만일, 배경 이미지로 gradient를 지정 적용하려면,
- linear-gradient(방향, 색1, 색2, ...)
. 방향 : to top (0deg), to bottom (180deg) (기본), to left (270deg), to right (90deg)
to top right (45deg) 등
- radial-gradient()
- repeating-linear-gradient(방향, 색1, 색2, ...)
- repeating-radial-gradient
* [참고] 그라디엔트의 다양한 예시 ☞ MDN web docs (Using CSS gradients)
ㅇ background-repeat : 배경 이미지 반복 형태 지정
- 웹브라우저 화면이 커지면 기본적으로 반복됨 (마치 타일 처럼 보임, 좌->우,상->하)
. repeat : (기본값) 가로세로 반복 배치
. no-repeat : 반복 금지 (배경 이미지가 1회 만 좌측상단에 나타남)
. repeat-x : 수평 반복 만
. repeat-y : 수직 반복 만
. space : 반복 이미지가 잘리지 않도록, 이미지 사이가 벌어짐
. round : 반복 이미지가 잘리지 않도록, 이미지가 납작하게 찌그러짐
ㅇ background-attachment : 요소와 함께 스크롤 또는 고정 여부 (scroll, fixed)
ㅇ background-position : 배경 이미지 시작 위치를 기본 위치(좌측상단)가 아닌 원하는 위치로 옮김
- 형식 : { background-position : 수평위치 수직위치 }
. 수평 위치 : left (기본값), right, center, px, % 등
. 수직 위치 : top (기본값), bottom, center, px, % 등
- 값 지정 방식
. 키워드 지정 방식
.. left top (디폴트), left bottom, right top, right center, right bottom,
center top, center center 등
. 수치 지정 방식
.. 기준 : 좌측 상단으로부터 배경 이미지 좌상 모서리까지 (px 값 등)
.. 단위 : px 또는 em 또는 %
- 단, % 지정 방식의 경우
. 배경 이미지의 % 지점을 상위 요소의 % 지점에 배치하라는 것임
. 例) { background-position : 100% 100% } => { background-position : right bottom }
ㅇ background-size : 배경 이미지 크기 조절
- 형식 : { background-size : 가로크기값 세로크기값 }
- 단위 : px 또는 %
- 키워드 cover : 배경 이미지 너비를 웹브라우저 화면 가득하게 표시
※ [참고] ☞ w3schools.com (CSS Backgrounds)