HTML로 이미지를 출력하는 다양한 방법이 있다.

링크로 출력하는 방법.

1. background, background-image css속성 사용하기

   background: url("<https://picsum.photos/id/1049/240/320>");
   background-image: url("<https://picsum.photos/id/1049/240/320>");
   

   background는 인라인으로 background-color, repeat, no-repeat 등 속성을 지정할 수 있다.

   https://stackoverflow.com/questions/39607999/css-difference-between-background-and-background-image

2. <img/> HTML 태그 사용하기

   <img src={imageUrl} alt="" />
   

   alt(대체 텍스트 설명)는 필수인거 아시죵?

차이점은?

• 이미지 로드가 실패할 때 background는 아무일도 일어나지 않는다. img는 broken image 와 alt 텍스트가 보일 것이다.

  ⇒ 이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 img 태그를 쓰자.

• img가 SEO, 성능 등 많은 면에서 효율적인게 사실이다.

이미지 크기

• cover 현재 Box에 꽉 채운다 (짤림)

• contain 이미지 전체가 출력되게 맞춘다 (공백 생김)

  background-size: cover;
  

이미지 위치

background-position: center;

TMI