<img>는 왜 닫는 태그가 없을까?

<img>는 왜 닫는 태그가 없을까?

개요

<img>는 왜 닫는 태그가 없을까요?

<h1></h1>, <p></p>, <ul></ul>, <ol></ol>, <a></a>, <button></button> 이런 요소들은 모두 짝으로 이루어져 있습니다. 짝으로 이루어진 요소와 <img>처럼 그렇지 않은 요소의 차이점이 무엇인지 살펴봅니다. 

---

0. 목차 안내

1. 짝을 이루는 요소 관찰해 보기
2. 이미지 요소 관찰해 보기
3. 짝을 이루는 요소와 그렇지 않은 요소

---

1. 짝을 이루는 요소 관찰해 보기

    1.1. <h1></h1>, <p></p>, <ul></ul>, <ol></ol>, <a></a>, <button></button> 이 요소들 모두 텍스트를 담는다고 생각해 보자!

<h1>문서 내에서 가장 큰 제목을 의미합니다.</h1>
<p>일반적인 글을 의미합니다.</p>
<ul>
  <li>순서가 없는 목록을 의미합니다.</li>
</ul>
<ol>
  <li>순서가 있는 목록을 의미합니다.</li>
</ol>
<a href="">링크를 의미합니다.</a>
<button>특정 기능이 있는 버튼을 의미합니다.</button>

 

위 코드를 실행하면 웹 브라우저에서는 각 텍스트들이 구분되어 보일 것이다. 

 

1.2. 위에서 언급한 6가지 요소 없이 그냥 6개의 텍스트만 입력하고 실행하면 어떻게 될까?

웹 브라우저는 아무것도 구분하지 못하고 텍스트를 모두 연달아 나오게 보여줄 것이다.

 

1.3. 위에서 언급한 각 요소를 필터 또는 역할을 구분해 주는 장치라고 생각해 보자! <h1></h1>을 통과한 텍스트는 문서 내에서 가장 큰 제목이라는 역할을 맡게 될 것이고, 웹 브라우저는 사용자에게 시각적으로 가장 큰 제목처럼 보이게 만들어 줄 것이다. 

---

2. 이미지 요소 관찰해 보기

    2.1. 이미지 요소를 관찰해 보자!

<img src="여기에 이미지 경로를 넣으면 됩니다.">

   
    2.2. src는 Source를 의미한다. 그래서 src=""에서, 따옴표 안에 이미지가 살고 있는 집 주소, 이미지의 경로를 넣어준다. 그러면 웹 브라우저는 그 경로에 있는 이미지를 불러와서 브라우저 화면에 사용자가 볼 수 있도록 표시해 준다.

---

3. 짝을 이루는 요소와 그렇지 않은 요소

    3.1. 짝을 이루는 요소 특징 - 무언가 담는 형태로 이루어진다. 그릇이나 상자로 생각해도 좋다. 

    3.2. 짝을 이루지 않는 요소 특징 - 무언가 담는 형태가 아니다. 그래서 닫는 태그가 필요하지 않다.

+ Empty element
이미지처럼 짝을 이루지 않는 요소를 "빈 요소"라고 지칭한다. 무언가 담는 형태가 아니기 때문에 Content를 가지고 있지 않다. 그래서 "빈 요소"라고 말한다. 그렇기 때문에 자식 요소를 가질 수 없는 것이 특징이다. 

---

커피 한 잔으로 후원하기

2016년부터 오프라인에서 입문자를 위한 웹 퍼블리싱 교육을 하고 있습니다. 강의하면서 누적된 지식과 노하우를 온라인으로 공유합니다. 후원은 양질의 콘텐츠를 제작하는 데 아주 큰 힘이 됩니다. 감사합니다. 

---

사이트 모음

→ 마이온스터디 YouTube

→ 마이온스터디 코딩하는시간(YouTube)

---

 

최고의 가치는 "실력을 갖추는 것"이다.

 

---

 

가장 이상적인 학습

배운 내용을 자유롭게 가지고 노는 것.