🎨CSS | 이미지 배경 설정, box-shadow inset, 배경-border 설정, reset.css

이미지 배경 설정

• background-size: contain; : 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정, 여백 발생
  background-size: cover; : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정 + 이미지의 가로세로비 맞추기 위해 이미지를 잘라내어 여백 발생X

• 보통 이미지 반응형으로 집어넣을 때

div {
	background-image: url("img.png");
	background-position: center;
	background-size: cover
	background-repeat: no-repeat;
}
div {
	background: url("img.png") center/cover no-repeat;
}

---

box-shadow 속성 inset

• 그림자가 요소의 테두리 안, 배경색 위에 그려짐

예시

.box1 {
	box-shadow: inset 20px 20px #4a5568;
}
.box2 {
	box-shadow: inset 20px -20px #4a5568;
}
.box3 {
	box-shadow: inset -20px 20px #4a5568;
}
.box4 {
	box-shadow: inset -20px -20px #4a5568;
}

---

배경 적용

배경을 글자 모양대로 적용

.box {
	background-image: url('img.png');
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

배경을 border 안으로 적용

.box{
	background-clip : padding-box;
}

배경을 컨텐츠만 감싸게 적용

.box{
	background-clip: content-box;
}

참고사항

💡단축속성은 개별속성 위에 주어야 함

div {
	background-clip : padding-box;
	background: lightgoldenrodyellow;
}

위 순서로 주면 단축속성background에서 개별속성background-clip 속성 준 것이 사라짐
위 예시와 반대순서로 작성해야 함

---

reset.css

• 초기화하는 css (ex. body의 margin을 0으로 설정)
• 회사에 들어가면 회사에서 제공해주는 경우 많음
• 개인 프로젝트 할 때는 normalize.css + 자신만의 것 추가해 사용