img 태그와 속성(src, width, height, alt, title) - html 기초 배우기

html에서 이미지를 삽입할 때에는 img태그를 사용해줍니다. 기본 작성은 아래와 같습니다.

<img src="파일이름.png" width="너비값" height="높이값" alt="사진설명" title="사진설명"/>

 

img태그 속성 종류

• src : 파일 경로와 이름 작성.
• width : 이미지 사이즈의 너비 값.
• height : 이미지 사이즈의 높이값.
• alt : 대체 텍스트로 이미지 누락 시 텍스트로 설명을 해 줄 수 있음.
• title : 이미지 위에 마우스를 올리면 툴팁(말풍선)으로 작성한 내용이 나타남.

이미지 태그의 alt속성 설명 그림

 

이미지 태그의 title속성 설명 그림

 

간단하게 html에서 사용되는 img태그에서 속성(src, width, height, alt, title) 5가지를 설명해 드렸습니다. 

tip을 드리자면 속성중에 alt는 시각장애인을 위해 스크린리더에 읽히는 텍스트로 자세히 적어주실수록 좋습니다!