1. background-clip 속성
: 배경색이 칠해지는 범위조절
- background-clip: border-box; (테두리 영역까지, 기본값이다. = 아무것도 안적으면 border-box 적용됨.)
- background-clip: padding-box; ( 패딩 역역까지 )
- background-clip: content-box; ( content 영역까지 )
.desc {
width: 100px;
height: 100px;
border: 5px dotted black;
padding: 20px;
color: #fff;
}
#clip-border {
background-color: red;
background-clip: border-box;
}
#clip-padding {
background-color: red;
background-clip:padding-box;
}
#clip-content {
background-color: red;
background-clip: content-box;
}
<body>
<div class="desc" id="clip-border">border-box</div>
<div class="desc" id="clip-padding">padding-box</div>
<div class="desc" id="clip-content">content-box</div>
</body>[ 결과화면 ]
2. background-image 속성 : 배경 이미지 넣기
- background-image: url('');
- background-image: url("image4/bg2.png");
3. background-repeat 속성 : 배경 이미지 반복해서 표시하는 것을 조절.
- background-repeat: repeat; /* 기본값: 반복해서 표시*/
- background-repeat: repeat-x; /* 가로방향만 반복 */
- background-repeat: repeat-y;/* 세로방향만 반복 */
- background-repeat: no-repeat; /* 반복안함. 위치 옮기고 사이즈 크기 변경도 가능. */
4. background-size 속성 : 이미지 크기 변경
- background-size: 150px 150px; /* 배경이미지 크기변경: background-size:가로 세로 */
5. background-position 속성 : 배경 이미지 위치 조정
- background-position 속성 : 수평위치 수직위치
수평위치 : left, center, right, 백분율(%), 값(px)
수직위치 : top, center, bottom, 백분율(%), 값(px)
background-position: center top; /* 키워드로 저장 */
background-position: center; /* 수평위치와 수직위치가 동일하여 1번만*/
background-position: 50px 50px;
/* background-position: 50px; /* 숫자로 지정할 때는 동일한 값이어도 2번 지정해야 올바른 결과가 나온다. */
background-position: 50% 100%; /* 백분율(%)로 지정 */
6. background 속성으로 한꺼번에 속성값 나열
background: url("image4/bg3.png") no-repeat right top fixed; /* 한번에 나열 가능! */
'자바스프링웹공부(2024) > HTML, CSS' 카테고리의 다른 글
| 2024.09.06.CSS - 박스모델 (0) | 2024.09.07 |
|---|---|
| 2024.08.30.CSS - 박스모델(블럭요소,인라인요소,그림자효과) (0) | 2024.09.01 |
| 2024.08.23. CSS - 목록 스타일 (0) | 2024.08.25 |
| 2024.08.23. CSS - 바깥쪽 여백(margin)과 안쪽(padding) 여백 (0) | 2024.08.25 |
| 2024.08.23. CSS - 텍스트 관련 스타일 (0) | 2024.08.25 |
