배경 : background
★1. background-color : 배경색
2. background-image : 배경이미지
- 기본값 : none
- ★img 태그와의 차이점 : 해당요소 영역만큼만 이미지가 그려진다.
요소보다 원본 이미지 크기가 작으면 반복해서 그린다. - 배경이미지는 물리적인 px이 없기 때문에 해당 요소 자체가 사이즈를 가지고 있어야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{margin: 0;}
.box{
width: 300px;
height: 300px;
background-image: url('./img/1.jpg');
}
</style>
</head>
<body>
<div class="box">
<!-- <img src="./img/1.jpg" alt=""> -->
</div>
</body>
</html>★3. background-repeat : 배경이미지의 반복 여부 결정
- repeat : 기본값(반복)
- repeat-x, repeat-y : x, y축으로만 반복(가로, 세로)
★★no-repeat : 반복 안함
background-repeat: repeat;- background-attachment : 배경 이미지를 특정 위치에 고정
- fixed - 브라우저 왼쪽 상단 기준으로 위치를 고정. 움직이지 않음. 보이는 영역만 바뀜.
- ios에서는 적용 안됨. 에러는 안남. ios에서도 하고 싶으면 스크립트로 해야함.
- 스크롤에 따라 이미지가 움직이지 않는 다는 뜻임.
★5. background-position : 배경 이미지 위치
- 기본 값은 left top
- 값을 주지 않으면 센터. -> 그러므로 center만 적으면 상하좌우 다 센터에 놓아진다
- top, left, right, bottom, center (적을 때 순서 상관 없음)
- px, % (x축, y축 다 값을 준다. 순서대로 입력) -> 마이너스방향으로도 줄 수 있다.
background-position: top left;★6. background-size : 배경 이미지의 크기 결정
- cover : 해당 요소에 빈틈이 없도록 이미지를 키운다. (채움)
- contain : 해당 요소에 빈틈이 생기더라도 이미지를 다 보여준다.
- px, % 로 값 줄 수 있다.
background-size: cover;★ 한 방 코드(순서대로 적는것을 권장)
: background : color image repeat attachment position / size
size는 나중에 생긴 요소라서 앞에 position + 슬러시(/)를 쓰거나 밑 줄에 별도로 추가
size는 position이랑 무조건 같이 써야 한다.
position쓰기 싫으면 밑 줄에 별도로 추가하기
한방코드를 사용할 때 주의할 점, 쓰지 않은 부분은 기본값으로 인식함.
하위에서 한방코드를 사용함에 있어 주의할 것!
꼭 써야한다면 맨 위에 써둘것. 순서 중요!
background로 이미지를 올렸을 때 그 위에 글씨를 쓸 수 있다.
이미지가 들어있는 div라고 생각하면 됨
background-image넣을 때
- div에 background바로 적용
- 내부에 div를 따로 생성해서 background적용
- 1번방식을 하게 되면 transition으로 부드럽게 커지게 하는 효과가 적용이 안된다.
대신 꼭 부모 div에 overflow:hidden;을 입력해야 한다.
- 1번방식을 하게 되면 transition으로 부드럽게 커지게 하는 효과가 적용이 안된다.
- 내부에 div를 따로 생성해서 background적용
background 한방코드를 image 빼고 쓰고 밑에서 image를 넣으면 인식이 안된다.
- repeat, attachment, position, size들은 이미지나 color에 관련한 속성이므로 인식이 안된다. 컬러나 image는 꼭 넣고 밑에서 넣는 식으로 해야한다.
계속 나아가기
유익한 정보를 제공해주셔서 감사합니다.