[HTML] 7강 이미지 관련 태그

이미지 태그에 대하여

 웹 문서에서 작성 할 때 가장 많이 쓰이는 태그 중 하나가 이미지 태그입니다. 이러한 이미지 태그에 사용되는 이미지들은 JPG, GIF, PNG 3가지 파일 형식으로만 구성될 수 있습니다.

---

이미지 삽입하기

 웹 문서에서 이미지를 삽입할 때는 보통 <img>태그를 사용합니다. <img>태그는 경로 지정을 통해 이미지를 불러오며, 이미지의 사이즈, 설명 등을 속성으로 추가하여 사용할 수 있습니다. 경로를 불러오는 속성은 src로 [src="경로"] 형식으로 작성합니다. 이미지를 설명해주는 속성은 alt 속성으로 [alt="설명"]형식으로 작성하며, 사이즈는 width, height 속성을 통하여 [width="가로" height="세로"]형식으로 작성합니다.

ex)

<img src="https://t1.daumcdn.net/cfile/tistory/998FA1425A5421970F" alt="소울예제이미지" width="250" height="250">

---

이미지의 다양한 경로 형태

 이미지의 경로를 가져올 때 src 속성을 쓴다고 앞서 알려드렸었습니다. 하지만 이 경로의 형태도 사용하고자하는 형식에 따라 굉장히 다양해집니다. 우선 같은 경로에 존재하는 경우에는 아래와 같이 사용합니다.

ex) 

<img src="예제.jpg">

 그리고 같은 경로의 하위폴더에 존재하는 경우에는 아래와 같이 사용합니다.

ex) 

<img src="하위폴더/예제.jpg">

다음은 상위폴더에 존재하는 경우 사용법입니다.

ex) 

<img src="../예제.jpg">

다음은 상위폴더의 다른 하위폴더에 존재하는 경우 사용법입니다.

ex) 

<img src="../상위폴더의하위폴더/예제.jpg">

마지막으로 인터넷 상에 타 이미지 주소(URL)을 통해 사용하는 방법입니다.

ex) 

<img src="http://이미지주소">

---

이미지에 설명 삽입하기

 이미지도 표처럼 하단에 이미지에 대한 설명이나 출처를 입력하는 경우가 굉장히 빈번합니다. 이럴때는 표 관련 태그 강의에서 배웠던 <figure>태그와<figcaption>태그를 사용합니다. (<figure>태그와<figcaption>태그는 한 셋트입니다) 앞서 설명했던데로, <figure>태그는 <img>태그 밖에서 감싼 뒤 <figcaption>태그를 <img>태그 전후에 선언하여 사용합니다.

ex)

figcaption이미지예제

이미지예제입니다

<figure>

<img src="https://t1.daumcdn.net/cfile/tistory/998FA1425A5421970F" alt="소울예제이미지" width="250" height="250">

<figcaption>

<b>figcaption이미지예제</b>

<p>이미지예제입니다</p>

</figcaption>

<figure>

---

지금까지 이미지 관련 태그에 대해 알아봤습니다. 다음 강의에서는 링크 관련 태그에 대해 알아보겠습니다.