목차
- 배경 이미지 관련 속성
background-color: 배경색 지정background-clip: 배경색이나 이미지를 어디까지 적용할지 지정background-image: 배경 이미지를 지정background-repeat: 배경 이미지의 반복 방법 지정background-position: 배경 이미지 위치 지정background-origin: 배경 이미지를 배치할 기준 지정background-attachment: 배경 이미지를 문서에 고정background: 하나의 속성으로 배경 스타일을 한꺼번에 지정background-size: 배경 이미지의 크기 조절
배경 이미지 관련 속성
-
background-color: 배경색 지정background-color: 색상;- 색상은 rgb(R, G, B), #16진수, 색상 이름으로 지정 가능
배경 이미지는 상속 안된다.
글꼴이나 글자 크기 등은<body>태그 선택자에서 지정하면 문서 전체에 상속되어 하위 요소에서 스타일을 수정하지 않는 한 문서 전체에 똑같이 적용된다.
하지만 예외로background-color속성은 상속되지 않는다.
<body>태그 선택자에서 배경색 스타일을 넣으면, 그 안에 있는 하위 요소들에게도 그 색상으로 보이지만, 웹 요소들의 배경은 투명해서 그렇게 보이는 것일 뿐 배경 색상 속성이 상속된 것이 아니다. -
background-clip: 배경 적용 범위 지정background-clip: border-box | padding-box | contennt-box;- border-box(기본값) : 박스 모델의 가장 외각인 테두리까지 적용
- padding-box : 박스 모델의 테두리를 뺀 패딩 범위까지 적용
- content-box : 박스 모델에서 내용(콘텐츠 영역)부분에만 적용
-
background-image: 웹 요소에 배경 이미지 지정background-image: url('이미지 파일 경로');- 이미지 파일은 *.jpg, *.gif, *.png 형식
- 파일 경로는 작은 따옴표나 큰 따옴표로 묶음
- 파일 경로는 현재 웹 문서 기준 상대 경로로 지정하거나, http://로 시작하는 절대경로로 지정
- 요소보다 이미지 크기가 작으면 가로와 세로로 반복되면서 요소의 배경을 가득 채움
-
background-repeat: 배경 이미지 반복 방법 지정background-repeat: repeat | repeat-x | repeat-y | no-repeat;- repeat(기본값) : 브라우저 화면에 가득 찰 때까지 가로와 세로로 반복
- repeat-x : 브라우저 화면 너비에 가득 찰 때까지 가로로 반복
- repeat-y : 브라우저 화면 높이에 가득 찰 때까지 세로로 반복
- no-repeat : 한 번만 표시하고 반복하지 않음
-
background-position: 배경 이미지 위치 조절background-position: 수평위치 수직위치;- 수평위치 : left | center | right | 백분율 | 길이값
- 수직위치 : top | center | bottom | 백분율 | 길이값
- 속성값을 2개로 지정하면 수평위치와 수직위치로 인식
- 속성값을 1개로 지정하면 수평위치로 간주하고, 수직위치는 50%나 center로 간주
- 백분율로 지정하면, 해당 요소의 왼쪽 모서리로부터 가로 백분율, 세로 백분율의 위치에 배경이미지를 지정
- 위치를 길이값(단위)로 직접 지정하면 가로 픽셀, 세로 픽셀 위치에 배경 이미지의 왼쪽 상단 모서리에 맞춤
-
background-origin: 배경 이미지의 적용 범위 조절background-origin: content-box | padding-box | border-box;- content-box(기본값) : 박스 모델에서 내용 부분에만 배경 이미지 표시
- padding-box : 박스 모델에서 패딩까지 배경 이미지 표시
- border-box : 박스 모델에서 테두리까지 배경 이미지 표시
background-clip과의 차이점
background-clip은 배경색 적용 범위를 지정하고,
background-origin은 배경이미지를 어느 부분의 좌측 상단부터 이미지크기만큼 표시할 것인지 지정하는 것이다. -
background-attachment: 배경 이미지 고정background-attachment: scroll | fixed;- scroll(기본값) : 화면을 스크롤하면 배경 이미지도 함께 스크롤
- fixed : 화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤
-
background: 속성 하나로 배경 이미지 제어하기background: 위의 여러 속성값들;- 속성값들의 입력 순서는 상관 없고, 속성값들을 공백으로 분리
// 예시 background-img: url('images/bg4.png'); background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; // 한 줄로 속성 지정하기 background: url('images/bg4.png') no-repeat center bottom fixed; -
background-size: 배경 이미지 크기 조절background-size: auto | contain | cover | 크기 | 백분율;- auto(기본값) : 원래 배경 이미지 크기만큼 표시
- contain : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대,축소
- cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대,축소
- 크기 : 이미지의 너비와 높이 지정
- 값이 하나이면 너비값으로 인식하며, 이미지의 너비와 너비값에 맞춘 높이값도 자동 계산
- 백분율 : 배경 이미지가 들어갈 요소 크기를 기준으로 값을 백분율로 지정하여 그 크기에 맞도록 이미지를 확대,축소
개발, 분석 배운 내용 정리하기!