이미지를 삽입해주는 태그 <img />

이미지를 넣어주는 <img />태그

<img src="경로" alt="대체 텍스트" />

 

src (source) - 이미지와 파일 경로 지정하기 (필수)

html 문서에서 이미지 파일까지 찾아가기 위한 경로를 지정해야 한다.

<!-- 절대 경로 -->
<img src="http://https://lightixxx.tistory.com/html.jpg" alt="라이틱스의 html 공부" />

<!-- 상대 경로 -->
<img src="../images/html.jpg" alt="라이틱스의 html 공부" />

 

alt (alternative text) - 이미지를 설명해 주는 대체 텍스트 (필수)

이미지가 불러들여지지 않을 때, 이미지를 설명해주는 대체 텍스트.

혹은 시각 장애인을 위한 화면 리더기가 이미지에 대해 설명해줘야 하기 때문에 반드시 입력해야 한다.

 

title - 툴팁 표시하기

<a>태그와 마찬가지로 마우스 호버시 툴팁이 노출되게 할 수 있다.

 

srcset - 다른 환경에서 사용될 이미지 소스를 명시

<img srcset="../images/image1.jpg 1x,
	     ../images/image2.jpg 2x" alt="예시 이미지"/>

width - 이미지의 가로 너비

height - 이미지의 세로 너비

 

프론트엔드 지망생이 강의를 들으며 공부용으로 작성된 포스트이기 때문에 내용이 빈약할 수 있습니다 :)

잘못된 정보가 있으면 댓글 남겨주시면 감사하겠습니다.