본문 바로가기

Coding/Html

Html img 태그 알아보기

반응형

Html img 태그 알아보기

 

웹사이트에 이미지를 표시하는 img 태그와 관련한 속성을 알아봅시다.

 

이미지 태그에 src 속성에 이미지의 주소를 입력합니다.

 

alt 속성에는 이미지의 대체 텍스트를 입력해주세요. 이미지가 로드되지 못했을때나 스크린리더(음성 출력 장치)등에 사용됩니다. 그리고 구글이나 네이버같은 검색엔진 등에서, 대체 텍스트를 사용해야 검색결과 노출 확률이 높아져요. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="https://dummyimage.com/500x200/000/fff" alt="대체 텍스트" />
  </body>
</html>

Html img 태그 알아보기(2)

 


웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요.

 

https://zabefofoon.github.io/mm-guide/


로또 번호 생성기도 만들었습니다. 한번 구경해보세요.

 

https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea


 

 

관련글: 주요 Html 태그 알아보기

반응형

'Coding > Html' 카테고리의 다른 글

Html iframe 태그 알아보기(Youtube)  (82) 2023.12.25
Html video 태그 알아보기  (81) 2023.12.25
Html div 태그 알아보기  (84) 2023.12.25
Html a 태그 알아보기  (78) 2023.12.25
Html span 태그 알아보기  (2) 2023.12.25