HTML

[HTML] img(Image) 태그

katia 2023. 3. 3. 16:21

img

  • img(Image)태그는 이미지를 삽입하고자 할때 사용한다.
  • 자동으로 닫는 태그 : o
  • 속성
    • src : (필수)삽입할 이미지의 주소 혹은 절대/상대 경로이다.
    • alt : (필수)모종의 사유로 이미지가 정상표기되지 않거아 스크린 리더가 있을때 대신 표시 하는 텍스트이다. 이미지에 대한 간략한 설명을 문자열로 작성해야 하며 없을 때에는 빈문자열로 대체한다.

예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>img 태그</title>
</head>
<body>
    <a href="https://www.naver.com" target="_blank"><img height="100" src="https://blog.kakaocdn.net/dn/CNxUY/btqw7dnElRU/HuVZgvpT6J8n4aEYFathEk/img.jpg" alt="네이버 로고"></a>

    <a href="https://www.daum.net" target="_blank"><img height="100" src="https://blog.kakaocdn.net/dn/yElzG/btqw7QZODLs/iA6TBn80hto4lndolDKB00/img.jpg" alt="다음"></a>

    <a href="https://www.google.com" target="_blank"><img height="100" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png" alt="구글"></a>
</body>
</html>
  • 이 예제문을 사용시 붙여쓰지않고 개행을 하여 정리한 경우 사진사이에 _가 생성될 수 있다, 그 이유는 a태그가 개행(띄워쓰기 포함) 또한 하나의 글자로 취급하기 때문이다.