[HTML] 이미지 태그 <img>

<img> 태그를 사용하여 이미지 표시(src 속성에 표시할 이미지 지정)

 

✍입력

<img src="dog.png"><br> <!-- 이미지 정상적으로 출력 --!>
<img src="../dog.png"><br> <!-- 경로가 잘못 지정 되어서 이미지가 출력되지 않음 --!>
<img src="../dog.png" alt="이미지를 불러올 수 없습니다"><br>

💻출력

alt는 해당 이미지가 존재하지 않을 경우 표시할 메세지를 지정한다.

 

---

이미지의 크기 변경

이미지의 크기는 width(가로)와 height(세로) 속성을 사용하여 직접 조절할 수 있다. 

✍입력

<img src="dog.png" width="400" height="350"><br>
<img src="../images/mov12.jpg" width="300" height="400">

💻출력

크기를 조절하여 커진 것을 확인할 수 있다. 

 

---

내 pc에 있는 이미지파일 뿐만 아니라, 이미지 주소를 활용하여 외부에 있는 이미지 지정도 가능하다. 

 

✍입력

<img src="https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.4-s.png">

구글의 검색창의 이미지 주소를 복사 하였다

💻출력

외부 이미지가 출력되는 걸 확인할 수 있다.