💚 UIUX 웹퍼블리셔 과정(6개월)
2021-07-03 (82일차) background-image에 대하여 (복습)
widely design
2021. 7. 4. 19:24
- background-image
: img태그를 사용하지 않고 이미지를 넣는 css값
※ 이미지 태그 주요 콘텐츠는 img태그 사용, 배경역할로 꾸밈요소로 쓰인다면 background-image 사용
img 태그 : scale를 줄였을 때, 정비율로 줄어들고 비율이 달라지만 이미지가 찌그러짐
background-image : 옵션을 잘 맞춰주면 더 편하게 보여줄 수 있음
- background-size : contain;
: 이미지 고유비율로 들어가고,나머지 공간은 이미지가 반복됨
※ no-repeat 사용하면 나머지는 흰여백으로 표시됨
ㄴ background-color로 색상갑을 줄 수 있음
- background-size : cover;
: 어떻게든 이미지가 반복되지 않고, 꽉 차게 나옴