[HTML/CSS] 이미지를 추가하는 2가지 방법

🌠 이미지를 추가하는 2가지 방법은 아래와 같습니다.
1. HTML의 img 태그로 이미지를 추가하거나
2. 태그는 아무거나 사용하고, CSS의 background-image 속성을 하용하거나!

1. img 태그로 이미지 넣기

• 태그 학습할 때 <img>를 다루었기 때문에 넘어갑니다.

  <img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

• <img> 태그를 사용하는 경우
  • 구글, 네이버 등 이미지 검색에도 노출이 필요한 경우
  • 페이지에서 중요한 역할을 하는 경우
  • 프린트 했을 때 출력이 되어야 하는 경우
• Ghost Game에서 배경이미지는 실제로 배경의 역할을 하기 때문에 img 태그를 사용하지 않고, css의 배경 속성을 활용하여 이미지를 추가합니다.
  • 초보자라면 연습 겸, <img> 태그로 배경을 추가하셔도 괜찮습니다.

2. css의 background-image를 활용하여 이미지 넣기

• 이번에는 어떤 태그를 사용하든 css로 배경 이미지를 추가하는 방법입니다.
  • 이렇게 두 가지 방법이 있듯, 사이트에 추가된 이미지만 보고 어떤 것이 <img> 태그인지? 어떤것이 css의 background-image 속성으로 이미지를 추가했는지 알기 어렵습니다. 개발자 도구를 통해 확인할 수 있습니다.
• jsfiddle에서 함께 배경이미지를 추가해보겠습니다! - jsfiddle 링크에서 연습해보세요.

  <div class="bg-img">
  </div>

  .bg-img {
  	height: 500px;
    background-image: url("https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/landing/bootcamp/boot_1.jpg");
  }

  • <div>에 아무 내용도 없기 때문에 영역이 확보되지 않아 높이가 0입니다. 높이를 부여하고 배경을 추가합니다.
  • 배경 이미지가 일부만 표시됩니다. 배경 이미지 설정을 위해 배경 이미지와 관련된 다양한 프로퍼티가 필요합니다.