img 태그와 src 속성

img 태그의 특징

<img> 태그는 <h1> 이나 <a> 태그와 다른 점이 하나 있다. 바로 닫힘태그가 따로 없다는 것이다.

<h1></h1>
<a href="https://www.google.com/" target="_">Go to google.com</a>

위와 같이 <h1> 태그나 <a> 태그의 경우 </h1> 및 </a>로 닫히는 태그를 표시해주고 있다. 하지만 <img> 태그의 경우 다음과 같이 닫힘 태그가 없다.

<img>

그 이유는 바로 img 태그가 "self-closing tag" 이기 때문이다. self-closing tag란 "자체 닫기 태그"를 뜻한다. a 태그나 h1 태그와 달리 img 태그에는 사이에 들어가는 content가 없다. 들어가야할 text가 없이 img 태그는 그 자체로 이미지를 나타내기 때문이다. 

 

src 속성

img 태그 역시 a 태그의 href나 target 속성과 마찬가지로 속성을 가지고 있다. 그 중 src 속성은 img 태그에 집어넣을 이미지의 경로를 값으로 가진다. 

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

위의 img 태그의 src 속성의 값에는 구글 로고 이미지 경로를 넣은 것이다. 이렇게 이미지의 경로를 복사해서 넣으면 해당 이미지를 화면에 표시할 수 있다. 

 

이러한 src 속성은 h1과 같은 태그에서는 아무런 반응도 일어나지않는다. 

 

폴더 속 img 경로

위와 같은 형태로 logo2.jpg 파일과 logo.jpg 파일이 존재할 때 해당 파일들을 img 태그로 불러오는 방법은 뭘까? 

<img src="logo.jpg">
<img src="/img/logo2.jpg">

이처럼 src 속성에 값으로 해당 파일을 적어주면 된다. 이 때 주의할 것은 해당 파일이 있는 경로를 제대로 명시해주어야 한다는 것이다. logo.jpg의 경우 home.html 파일과 같은 폴더 상에 있다. 이럴 경우 home.html 파일에서 img 태그를 사용하여 logo.jpg 파일을 불러온다면 그대로 logo.jpg를 src 속성의 값으로 넣어주면 된다. home.html 파일에 logo2.jpg를 img 태그에 넣고자 한다면 해당 파일이 들어있는 폴더인 img 폴더를 명시해주고 logo2.jpg를 가리키면 된다.