[HTML] img 태그 사용

img 태그(Tag) 사용

 

"<img> 태그는 이미지를 삽입하는 태그"

 

 

<img> 태그는 html을 사용해서 웹페이지에 이미지를 삽입할 수 있게 도와주는 태그입니다.

 

속성으로는 src(경로), width(이미지의 넓이), height(이미지의 높이), alt, title로 5가지를 사용한다.

 

• src : 이미지의 경로 설정
• width : 이미지의 가로 크기 설정(넓이)
• height : 이미지의 세로 크기 설정(높이)
• alt : 이미지가 표시되지 않거나 잘못된 경로일 때 출력되는 메시지
• title : 이미지 소개를 위한 말풍선 표시

각 속성들은 다음과 같은 기능을 담당하고 있습니다.

 

간단하게 일단 이미지 하나를 'test'라는 제목으로 변경해서 프로젝트 폴더 안으로 옮겨보겠습니다.

 

 

"<img> 태그 예시"

 

<img src="test111.jpg" alt="no search image">

 

다음과 같이 이미지 파일의 경로와 파일명을 똑바로 입력하지 않고 저장을 한 뒤 웹페이지를 열어 보게되면 이미지 파일을 찾지 못해 alt 속성 안에 있는 'no search image' 라는 문구가 출력되는 것을 볼 수 있습니다.

 

그렇다면 이미지 파일의 경로와 이름을 제대로 입력하는 경우에는 어떻게 되는지 다음 코드를 입력해서 확인해보겠습니다.

 

<img src="test.jpg" alt="no search image">

 

 

다음 코드를 실행시키면 이미지가 자동 출력 되는 것을 확인할 수 있습니다.

 

그렇지만 실제 사이즈가 큰 이미지 파일을 넣어서인지 원하는 사이즈로 나타나지 않고 본래 이미지 크기로 웹페이지에 나타나는 것을 확인할 수 있습니다.

 

그럼 여기서 width 와 height 속성을 추가해서 원하는 크기로 이미지를 변경해보겠습니다.

 

<img src="test.jpg" width="350" height="260" alt="no search image">

 

 

코드를 다음처럼 수정하게 되면 가로 350, 세로 260의 이미지로 고정이 되어서 웹페에지에 출력이 되는 것을 확인할 수 있습니다.

 

마지막으로 여기서 title 속성을 추가로 입력해보겠습니다.

 

<img src="test.jpg" width="350" height="260" alt="no search image" title="SMILE!">

 

해당 코드를 입력하고 파일을 저장한 뒤 웹페이지를 연 다음, 사진 위에 마우스 커서를 두게 되면 다음과 같이 입력한 문장이 나타나게 됩니다.

 

이미지는 닫는 태그 없이 하나의 태그로 내가 원하는 이미지를 출력할 수 있는 태그입니다.