HTML 이미지 삽입하기, <img> 속성 (width, height, src, alt, title)

html에서 이미지를 삽입하는 태그인 <img>에 대해 알아보겠습니다.

 

<img> 태그는 웹페이지에 이미지를 삽입할 때 사용합니다.

 

 

예를 들어

 

 <img src="banner01.jpg">

 

코드를 입력하면

 

이미지가 삽입되는 것을 볼 수 있습니다.

 

<img src="banner01.jpg"> 에서

 

src 속성은 source를 의미하며, 이미지 파일의 이름과 경로를 알려줍니다.

 

 

 

만약 이미지 파일이 img 라는 폴더 안에 있다고 가정하면

 

<img src="img/banner01.jpg">

 

현재폴더/경로/이미지파일이름.확장자

./img/banner01.jpg

 

이렇게 입력하셔야 합니다.

 

.(점)은 현재 폴더를 의미하며 /(슬래시)는 폴더를 구분해주는 기호입니다.

./ 은 생략하여 "img/banner01.jpg" 로 입력하셔도 됩니다.

 

 

 

<img> 태그 속성

 

1. width, height 속성

 

이미지의 너비와 높이를 지정해주는 width와 height 속성에 대해 알아보겠습니다.

 

    <img src="img/banner01.jpg">
    <img src="img/banner01.jpg" width="400">
    <img src="img/banner01.jpg" width="600" height="600">

 

<img src="img/banner01.jpg"> 는 src 속성만 있기 때문에 원본 이미지 파일의 크기가 화면에 나타납니다.

 

<img src="img/banner01.jpg" width="400"> 는 width 속성(너비)만 입력하였습니다.

width 속성만 입력하면 웹 브라우저가 원본 이미지의 가로세로 비율을 고려하여 주어진 이미지의 너비(width속성에 입력된 값)에 맞추어 자동으로 이미지의 높이가 설정됩니다.

 

<img src="img/banner01.jpg" width="600" height="600"> 는 width, height 속성을 둘 다 입력하였습니다.

가로 600, 세로 600 으로 설정하였기때문에 화면과 같이 나타납니다.

 

 

2. alt 속성

 

alt 속성은 이미지에 대한 설명을 의미하며

<img src="" alt=""> 로 img 태그 안에 쓰입니다.

 

<img src="img/banner01.jpg" alt="물감으로 칠한 그림">

 

alt 속성은 꼭 사용해야하는 이유에 대해 알아보겠습니다.

 

먼저 alt 속성을 지우고 <img src="imgg/banner01.jpg"> 로 img폴더가 아닌 imgg폴더로 잘못된 경로를 입력하고

실행한 결과입니다.

 

만약 이미지가 손상되었거나 경로가 잘못되었다거나, 서버에 이상이 생겼을 경우 저런 식으로 엑박표시가 뜹니다.

그러면 웹 브라우저를 사용하는 사용자들은 이 이미지가 무슨 이미지인지 알 수 없게 됩니다.

 

이럴 경우를 대비해서 바로 alt 속성을 꼭 사용하셔야 합니다.

 

다음 사진은 alt="물감으로 칠한 그림" 을 입력한 결과입니다.

마찬가지로 경로가 잘못되어 이미지가 엑박표시 뜨지만 alt 속성에 입력한 물감으로 칠한 그림이 화면에 표시됩니다.

그러면 사용자는 이 이미지가 물감으로 칠한 그림이라는 것을 알 수 있게 됩니다.

 

 

 

3. title 속성

 

title 은 마우스를 이미지 위에 올렸을 때 표시되는 설명 글을 지정하는 속성입니다.

 

<img src="img/banner01.jpg" title="물감 작품" alt="물감으로 칠한 그림">

이미지에 마우스를 갖다대면 그림과 같이 title 속성에 입력한 물감 작품 이 나타나는 것을 알 수 있습니다.

이처럼 title 속성은 이미지 위에 마우스를 올렸을 때 보여주고 싶은 메시지 혹은 설명을 지정하는데에 사용됩니다.