이미지 태그란?
<img> 태그는 웹페이지에 이미지를 삽입할 때 사용하는 HTML 태그입니다.
이미지는 텍스트만 있는 페이지보다 시각적으로 더 매력적이고, 사용자 경험을 크게 향상시킵니다.<img> 태그는 닫는 태그가 없는 빈 요소(Voide element)입니다.
MDN: <img> 태그 자세히 보기
이미지 태그 사용 방법
이미지 파일을 준비한 후, 아래와 같이 <img> 태그를 사용합니다.
<img src="이미지.jpg" alt="월횽" height="500" width="100">- src: 이미지 파일의 경로(필수 속성, 예: "이미지.jpg")
- alt: 이미지가 보이지 않을 때 대체 텍스트(접근성 및 SEO에 중요)
- height: 이미지의 세로 크기(픽셀 단위)
- width: 이미지의 가로 크기(픽셀 단위)
예시 결과:
728x90
코드 해설 및 주요 속성
<img src="...">: 이미지를 불러올 경로를 지정합니다. 경로가 잘못되면 이미지가 보이지 않습니다.alt="...": 이미지를 설명하는 텍스트로, 이미지가 로드되지 않거나 시각장애인용 스크린리더에서 읽어줍니다.height="...",width="...": 이미지의 크기를 지정합니다. 지정하지 않으면 원본 크기로 표시됩니다.title="...": 마우스를 올렸을 때 툴팁 형태로 설명이 나타납니다.align="...": 이미지를 좌우 또는 상하로 정렬할 수 있습니다(HTML5에서는 CSS 사용 권장).border="...": 이미지에 테두리를 추가합니다(HTML5에서는 CSS 사용 권장).
이미지 파일 확장자 종류
- .JPG: 일반적인 이미지 파일, 배경색이 적용됨
- .PNG: 투명 배경 지원, 로고나 아이콘에 자주 사용
- .GIF: 움직이는 이미지(애니메이션) 지원
SMALL
이미지 크기 확인 방법
맥(Mac)에서 이미지 크기 확인
- 이미지를 마우스 오른쪽 버튼으로 클릭
- "정보 가져오기" 선택
- "규격" 항목에서 가로/세로 크기 확인
윈도우(Windows)에서 이미지 크기 확인
- 이미지를 마우스 오른쪽 버튼으로 클릭
- "속성" 선택
- "자세히" 탭에서 이미지 크기 확인
접근성과 SEO를 위한 alt 속성의 중요성
alt 속성은 이미지가 로드되지 않을 때 대체 텍스트로 표시되며, 시각장애인용 스크린리더가 읽어줍니다[2][3][4][5][6].
또한, 검색엔진이 이미지를 이해하는 데 중요한 역할을 하므로, alt 속성에는 이미지의 내용을 명확하게 작성하는 것이 좋습니다.
figure, figcaption 태그로 이미지 설명 추가하기
<figure>
<img src="logo.png" alt="월횽 로고">
<figcaption>월횽 공식 로고 이미지</figcaption>
</figure>
<figure>와 <figcaption> 태그를 함께 사용하면 이미지에 설명(캡션)을 추가할 수 있습니다[6][7][9].
정리 및 다음 강의 예고
오늘은 HTML 이미지 태그(img tag)의 사용법, 주요 속성, 파일 확장자, 접근성까지 예시와 함께 알아보았습니다.
추가로 궁금한 점이 있으면 댓글로 남겨주세요!
다음 강의에서는 더 유익한 HTML 태그와 활용법을 소개하겠습니다. 즐거운 하루 보내시길 바랍니다!
이전 강의 보기: [HTML 강의] 7강 - HTML 줄바꿈 태그 (br tag)
다음 강의 보기: [HTML 강의] 9강 - 리스트(list)를 나타내는 태그 (li, ul, ol tag)