3-2. html img 태그

웹 문서에 이미지를 추가하고 싶을때는 <img>태그를 사용한다. 

 

1. src 속성 

<img> 태그의 src 속성은 이미지 파일의 경로를 지정하는 속성으로 반드시 지정해줘야한다. 

이미지나 음악, 동영상 등을 웹 문서에 저장할 때는 경로를 주의해서 지정해줘야한다. 

경로가 정확하지 않으면 웹 브라우저 화면에 이미지가 나타나지 않는다. 

이미지 경로는 웹 문서의 위치를 기준으로 정한다. 

 

2. alt 속성 

<alt>는 이미지를 대신해서 읽어 줄 텍스트를 입력하는 것이다. 

 

3. width, height 속성 

<img> 태그에 별다른 속성을 지정해주지 않으면 원본 이미지 크기 그대로 나타나게 된다. 

width와 height 속성은 각각 이미지의 너비와 높이를 지정해주는 속성이다. 

단위는 %와 px인데 기본이 px이라 px 단위는 작성하지 않아도 된다.

ex) width ="50%", height = "150"

 

예제

실행 결과