HTML - <img> 이미지를 삽이하는 태그
웹언어/HTML
2018. 11. 5. 21:00
HTML - <img> 이미지를 삽이하는 태그 알아보기
HTML에서는 이미지를 삽입할 때 img 태그를 사용합니다
이번에는 포스팅에서는 웹페이지에서 이미지를 포함하기 위해 사용되는 img 태그에 대해서 알아보도록 하겠습니다
HTML - 이미지 삽입과 속성 알아보기 |
HTML에서 이미지를 사용할 때 사용하는 태그는 img를 사용하는데 img 태그에서는 속성이 있습니다
1) src 속성
- src는 source의 약어로 이미지 파일의 위치를 정하는 속성
<html> <body> <img src="html_img.jpg"> </body> </html>
위 내용을 보시면 이미지가 삽입된것을 확인하실 수 있습니다
2) width, height 속성
- width, height는 이미지의 너비와 높이를 정하는 속성
<html> <body> <img src="html_img.jpg" width="400" height="400"> </body> </html>
위 그림을 보시면 이미지의 사이즈가 변경된것을 확인하실 수 있습니다
3) alt 속성
- alt는 이미지가 없을때 텍스트로 대체하는 속성
이미지가 없을 경우에 위 그림과 같이 이미지를 표시할 수 없게 됩니다 이러한 경우 이미지의 대한 정보를 알 수가 없습니다
<html> <body> <img src="html_img-1.jpg" width="200" height="300" alt="Page Not Found"> </body> </html>
이때, alt 속성을 이용하여 대체 텍스트를 이용하면 이미지가 표시할 수 없게 되었을 때 이미지를 설명하는 텍스트가 들어가도록 설정할 수 있습니다
4) title 속성
- 이미지의 말풍선의 속성을 표시해주는 속성입니다
<html> <body> <img src="html_img.jpg" width="200" height="300" alt="Page Not Found" title="HTML_IMG!!"> </body> </html>
위 그림을 보시면 해당 이미지의 마우스를 올려놓게 되면 말풍선이 표시되는것을 확인하실 수 있습니다
'웹언어/HTML' 관련 글
more
