이미지를 넣는 방법 2가지

이미지를 넣는 방법

1. HTML에서 img태그 이용하기

<img alt="이미지가 뜨지 않을 때 대신 보여줄 텍스트"
     src="이미지 파일 경로 or 이미지 url 주소">

2. CSS의 background-image속성 이용하기

<!--html-->
<div class="bg-img">배경이미지</div>

/*css*/
.bg-img {
  background-image: url("이미지 파일 경로 or 이미지 url 주소")
}

---

차이점?

1. img 태그 이용

• 대체 텍스트와 제목 속성을 추가할 수 있는 기능이 있다.
• HTML이 구문분석 될 때 요청이 이루어지므로 성능이 더 좋다.
• 검색엔진에 노출된다.
  (img태그는 semantic tag로 태그자체로 의미를 갖고 있으며, alt속성에 넣은 텍스트를 검색엔진이 인식하기 때문)

2. background-image 속성 이용

• 대체 텍스트와 제목 속성을 추가할 수 있는 기능이 없다.
• CSS에 여러 개의 이미지가 선언되어 있는 경우, 브라우저는 CSS 구문 분석하고 이미지를 가져오는데 시간이 더 오래 걸리므로 전체 페이지의 로드가 지연되어 성능이 img태그에 비해 좋지 않다.
• 검색엔진에 노출되지 않는다.

어떤 경우에 사용하면 좋을까?

1. img 태그 이용

• 이미지가 콘텐츠와 관련이 있을 때
• 웹페이지 성능을 높이고 싶을 때
• 검색엔진에 노출시키고 싶을 때

2. background-image 속성 이용

• 디자인적인 요소로 이미지가 사용되었을 때

---

Semantic Web 이란?

정보의 의미를 쉽게 파악하고 처리할수 있도록 만들어진 웹

⭐️ HTML에는 웹페이지의 다른 부분을 정의할 수 있는 Semantic Tag가 있다.

Semantic Tag

브라우저와 개발자 모두에게 의미를 명확하게 설명함
태그명 자체만으로도 내용을 알 수 있는 태그

<form>, <article>, <nav>, <header>, <table>, <main>,
<nav>, <section>...

👉🏻 semantic web을 위해 구조적으로 보여주기 위해서는 이미지를 넣을 때
semantic 태그인 img태그를 사용하는 것이 좋다❗️