2021-07-03 (82일차) background-image에 대하여 (복습)

 

- background-image

  : img태그를 사용하지 않고 이미지를 넣는 css값

 

※ 이미지 태그 주요 콘텐츠는 img태그 사용, 배경역할로 꾸밈요소로 쓰인다면 background-image 사용

 

img 태그 : scale를 줄였을 때, 정비율로 줄어들고 비율이 달라지만 이미지가 찌그러짐

background-image : 옵션을 잘 맞춰주면 더 편하게 보여줄 수 있음

 

- background-size : contain;

  : 이미지 고유비율로 들어가고,나머지 공간은 이미지가 반복됨

  ※ no-repeat 사용하면 나머지는 흰여백으로 표시됨

     ㄴ background-color로 색상갑을 줄 수 있음

 

- background-size : cover;

  : 어떻게든 이미지가 반복되지 않고, 꽉 차게 나옴