-
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #4(배경 속성 - background)IT(Tip) 2020. 9. 26. 21:44반응형
■ 배경 속성 (background-image/size/repeat/attachment/position)
특정 태그의 배경 이미지 또는 배경 색상을 지정하는 스타일 속성
O background 속성
- 배경 관련 속성을 줄여서 표기
background: url('images/bg3.png') no-repeat fixed right bottom;O background-color
- 문서 배경색 또는 지정한 요소의 배경색 (배경색은 상속X)
O background-image 속성
- 배경 이미지 지정(이미지를 반복해서 채움)
- 이미지 속성에는 파일 경로(URL) 또는 그레이디언트 입력
- 형식
background-image: url('파일경로/파일명') | none<head> <style> body { background-image: url('backgroundFront.png'); } </style> </head>O background-size 속성
- 배경 이미지 크기 조절 : 단위(%) 또는 키워드 입력
- 형식
background-size: auto | cover | contain | <크기 값> | <백분율>
* auto : 원래 배경 크기만큼 표시(이미지 크기 유지)
* cover : 배경 이미지로 요소를 모두 덮도록 확대/축소(가로 세로 비율 유지)
* contain : 요소 안에 배경 이미지가 다 들어오도록 확대/축소(가로 세로 비율 유지)
* <크기 값> : 요소에 적용할 너비, 높이 지정하여 확대/축소(하나만 지정 시 비율 자동 계산)
* <백분율> : 원래 크기를 기준으로 확대/축소O background-repeat 속성
-이미지가 패턴을 이루어 여러 개 출력
- 형식
background-repeat: repeat | no-repeat | repeat-x | repeat-y | round | space
* repeat-x : X축 방향으로 이미지 반복
* repeat-y : Y축 방향으로 이미지 반복<head> <style> body { background-image: url('backgroundFront.png'); background-size: 100%; background-repeat: no-repeat; } </style> </head>
O background-attachment 속성
- 배경 이미지를 어떠한 방식으로 화면에 붙일지 지정
* 배경이미지는 놔두고 콘텐츠만 움직이게 하는 속성- 형식
backgrund-attachment: scroll | fixed
* scroll : 화면 스크롤과 함께 배경 이미지도 스크롤 (기본값)
* fixed : 화면이 스크롤되더라도 배경 이미지는 고정<head> <style> body { background-color: #e7e7e8; background-image: url('backgroundFront.png'); background-size: 100%; background-repeat: no-repeat; background-attachment: fixed; /* 배경 이미지 고정 - 스크롤 내려도 보임 */ } </style> </head>O background-position 속성
- 배경 이미지를 반복하지 않을 경우, 배경 이미지를 표시할 위치 지정
- 형식
background-position: <수평위치> <수직위치>;
* <수평위치> : left | center | right | <백분율> | <길이 값>
* <수직위치> : top | center | bottom | <백분율 > | <길이 값><head> <style> body { background-image: url('images/gb2.jpg'); background-repeat: no-repeat; background-position: left top; </style> </head>O background-clip 속성
- 배경색을 어디까지 적용할 지 지정 (박스 모델 기준)
- 형식
background-clip: border-box | padding-box | content-box
* border-box : 박스 모델의 가장 외곽 테두리까지 적용
* padding-box : 박스 모델의 테두리를 뺀 패딩 범위까지 적용
* content-box : 박스 모델에서 내용 부분에만 적용<head> <style> .bg1 { border: 1px solid #000000; padding: 5px; background-color: #009924; background-clip: content-box; } </style> </head> <body> <div class="bg1">Office 2010보다 2013에서 더 많은 동영상 코덱이 기본 지원됩니다. 따라서 2013에서만 제공되는 코덱으로 만들어진 동영상 파일이라면, 하위 버전에서 실행되지 않을 수 있습니다. </div> </body>
# 참고자료
Do it HTML5 + CSS3 웹 표준의 정석 2016
모던 웹 디자인을 위한 HTML5+CSS3 입문 2015반응형'IT(Tip)' 카테고리의 다른 글
