html img태그

🎃 img태그

<img src="그림파일경로" alt="대체텍스트" width="너비" height="높이">

이미지를 넣을 수 있는 태그다

💡 src = " "

그림의 경로를 넣어준다.
내 컴퓨터의 파일경로를 넣을수도 있고 인터넷의 이미지 주소를 넣을 수도 있다.
움직이는 그림파일(.gif)도 지원한다.

💡 alt = " "

대체 텍스트란 그림이 어떠한 이유로 출력되지 않았을 때, 이를 대신하여 글자로 나타내주는 텍스트다.

<!--예시-->
<img src="잘못된경로.jpg" alt="벨로그 쓰는중 !">

💡 이미지의 너비, 높이 설정

width와 height를 지정하여 각각 너비와 높이를 변경할 수 있다.
이 때 주의해야 할점은 둘중 하나만 설정하면 나머지는 그 비율에 맞게 변하지만,
둘 다 변경했을 경우에 비율이 깨져서 이미지가 원본과 달라질 수 있다.

    <p>
        <img src="짱구/수지.png" width="100px">
        <img src="짱구/훈이.png" height="100px">
      <!--너비와 높이 둘 중 하나만 변경했을 경우 (원본 비율 유지)-->
    </p>
   
    <p>
        <img src="짱구/수지.png" width="100px" height="80px">
        <img src="짱구/훈이.png" width="50px" height="100px">
      <!--너비와 높이 모두 병경했을 경우 (원본 비율 깨짐)-->
    </p>

💡 title = " "

img태그의 title속성으로 마우스를 올렸을 때 툴팁을 설정할 수 있다.

<img src="짱구/흰둥이.png" title="귀여운 흰둥쓰">

사진처럼 마우스를 올려두니 title에 설정한 글자가 뜬다!