HTML image 를 불러오는 <img>태그

HTML-1 <IMG>태그

img 태그는 html 중에 많이사용하는 태그중 하나입니다.

<a> 태그로 감싸 이미지를 눌렀을때 다른 링크로 이동하거나

아님 화면에 이미지를 출력할때 주로 사용하게 됩니다.

위코드는 <img>태그를 사용하여 사진을 불러오고있습니다.

그런데 보통 html 태그는 <시작태그> </닫는태그> 로 이루어져있는데

<img>태그는 조금다르게 보입니다.

이는 <br /> 태그와 <hr /> 태그와 같이 무언가 내용을 감싸지않는 태그일경우

위와같이 사용합니다. 

속성에는 기본적으로는 src 와 alt 가 있는데

src 는 source 즉 이미지가 들어가있는 경로 및 파일명을 적어주면 됩니다.

많은 초보분들이 경로에서 많이 해매는걸 봤는데

경로의 출발은 현재 html 파일이 있는곳부터 시작한다고 생각하면됩니다.

즉 위에 경로는 현재 작성하고 있는 html 파일과 동일한 경로에 images 라는 폴더가 

있고 그안에 image1.jpg 라는 이미지 파일이있는걸로 생각할수 있습니다.

파일이름을 적을때 .뒤에 확장자를 꼭 붙여야합니다.

만약 현재 위치에서 이전 단계의 폴더에 image 파일이 있을 경우 

와 같이 ../ 을 붙이면 현재 폴더에서 한단계 위로 올라가라는 뜻입니다.

또한가지 속성 alt 는 

시각장애인의 경우 화면의 그림을 이해하지못하니 스크린리더기를 통해서 현재 화면

의 이해를 돕도록 하기위해 적습니다.

그림을 이해할수있는 현재 image 는 치타 라는 동물이 보이는 이미지 이기때문에

alt = "치타" 라고 적어주었습니다.

이외에도 title(말풍선) width(넓이) height(높이) 등이 있으며

이를 적절하게 사용해 주면 됩니다.