728x90
- 배경색
- 배경 이미지
1. 배경색
배경색 지정 (background-color)
- 16진수, rgb, 색상 이름 등을 사용해서 지정
- 하위 요소에 상속x
적용 범위 (background-clip)
- border-box: 기본값. 테두리까지 적용
- padding-box: 테두리를 뺀 패딩 범위까지 적용
- content-box: 내용(content) 부분에만 적용
- 활용 코드
<style>
div {
box-sizing: border-box;
width: 100%;
margin: 20px 0px;
padding: 20px;
border: 10px dotted #dadada;
background-color: #eeeeee;
}
.a {
background-clip: border-box;
}
.b {
background-clip: padding-box;
}
.c {
background-clip: content-box;
}
</style>
<body>
<p><code>background-clip: border-box;</code></p>
<div class="a">border-box</div>
<p><code>background-clip: padding-box;</code></p>
<div class="b">padding-box</div>
<p><code>background-clip: content-box;</code></p>
<div class="c">content-box</div>
</body>
- 실행 결과
background-clip: border-box;
border-box
background-clip: padding-box;
padding-box
background-clip: content-box;
content-box
2. 배경 이미지
이미지 삽입 (background-image)
- 파일 경로에 작은따옴표(' ')나 큰따옴표(" ") 사용
- 요소보다 이미지 크기가 작으면, 이미지가 가로와 세로로 반복되며 배경을 가득 채운다.
background-image: url('이미지 파일 경로')
이미지 반복 (background-repeat)
- repeat: 기본값. 화면에 가득 찰 때까지 가로와 세로로 반복
- repeat-x: 화면 너비에 가득 찰 때까지 가로로 반복
- repeat-y: 화면 높이에 가득 찰 때까지 세로로 반복
- no-repeat: 한 번만 표시하고 반복x
이미지 위치 (background-position)
- 속성값 1개: 지정한 값을 수평 위칫값으로 간주하고, 수직 위치값은 50%나 center로 간주
- 속성값 2개: 첫 번째 값은 수평 위치의 값, 두 번째 값은 수직 위치의 값
background-position: <수평 위치> <수직 위치>
수평 위치: left | center | right | <백분율> | <길이 값>
수직 위치: top | center | bottom | <백분율> | <길이 값>
이미지 적용 범위 (background-origin)
- content-box: 기본값. 내용(content) 부분에만 배경 이미지 표시
- border-box: 테두리까지 배경 이미지 표시
- padding-box: 패딩 범위까지 배경 이미지 표시
이미지 고정 (background-attachment)
- 스크롤을 했을 때 이미지 위치도 같이 바뀌는지를 결정한다.
- scroll: 기본값. 화면을 스크롤하면 배경 이미지도 이동한다.
- fixed: 화면을 스크롤하면 배경 이미지는 고정되고 내용만 이동한다.
- 활용 코드
/* background: color, image, repeat, position */
background: yellowgreen url(/html/img/dessert.jpg) no-repeat right 20px top 50px;
background-attachment: scroll;
이미지 크기 (background-size)
- 속성값 1개: 지정한 값을 너비로 인식하고, 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산
- auto: 기본값. 원래 배경 이미지 크기만큼 표시
- contatin: 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대, 축소
- cover: 배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소
728x90
'Frontend > CSS' 카테고리의 다른 글
| 13. 속성 선택자 (0) | 2024.07.05 |
|---|---|
| 12. 연결 선택자 (0) | 2024.07.05 |
| 10. 위치 지정 (position, display, float, clear) (0) | 2024.07.05 |
| 9. CSS 박스 모델 (0) | 2024.07.05 |
| 8. 마우스 커서 (0) | 2024.07.04 |
