background-color: 배경 색상
- hex, rgb, rgba 사용 가능.
background-image: url();
- 배경 이미지
background-repeat: no-repeat;
- 반복 x
background-size
contain;: 요소 안에 공간을 남기고 이미지의 모든 면이 들어가도록. 잘리는 면 없음.cover;: 요소 안에 빈 공간을 남기지 않도록 사진이 조정. 잘리는 면 있음.- custom:
100px;,100% auto;등...
background-position: 백그라운드 위치를 어떻게 위치시킬 것인가.
- x, y축 명시해야함. e.g.,
background-position: center center; left, top, center, 50%, 30px...
<img> 대신 왜 background image를 쓰는가?
- 칸의 크기는 결정돼있지만, 어떤 사진을 받을 지 모른다. 가로가 긴 것, 세로가 긴 것, 정사각형...
- 정보값이 없는 경우. 중요한 건 평점 값인데 별표 아이콘이 들어가는 경우.
