HTML - 이미지 : img

티스토리 뷰

방과후/HTML

잘생긴 이미남 2017. 9. 4. 09:35

이미지 태그에 대해서 알아보도록 합시다.

웹페이지에 이미지를 포함하는 방법을 말합니다. 초창기 HTML에는 이미지 태그를 사용하지 않았지만, HTML2 부터 포함되어서 사용되었습니다.

이미지 태그에는 <img>라는 태그를 사용합니다.

예제를 만들어 봅시다.

실습폴더에 img.html이라는 화일로 이름을 저장합니다.

이미지를 불러올 사이트 참조는 픽사베이라는 사이트를 이용합니다.

이미지 참조 사이트 : https://pixabay.com

산이라고 검색하여서 이미지를 [실습]이라는 폴더에 다운로드를 받고, img.jpg로 저장하여서 이미지 태그를 사용하여 이미지를 불러와 봅시다.

<html>

<body>

</body>

</html>

이미지 태그 사용시, 마지막에 다른 태그들처럼 꺽쇠로 닫고 다시 태그를 써 주는 것이 아니라 태그를 안 닫아도 됩니다.

높이(height)나 넓이(width)를 이용해서 이미지크기를 설정할 경우에 '비율대로 늘어날 수 있도록' 둘 중에 하나만 이용해서 설정합니다.

alt는 alternative(대안,대채제) text의 약자로 이미지를 불러올 수 없을 때, 그 위치에 alt에 적어논 내용이 보이도록 합니다.

title의 경우는 웹상에서 이미지에 마우스를 위로 올려놨을 때, 툴팁으로 내용이 표시되도록 하는 속성을 말합니다.

공유하기 링크

공지사항