📌 HTML에서 이미지 표시하기
img 태그는 HTML에서 이미지를 표시하는 데 사용됩니다. 이 태그는 단일 태그로, 닫는 태그가 필요하지 않으며, 이미지에 대한 정보를 속성으로 지정해 주어야 합니다.
🔹 img 태그 기본 구조
- src 속성: 이미지 파일의 위치(URL)를 지정합니다. 이미지가 저장된 경로를 입력하여 웹 페이지에 이미지를 표시합니다.
- alt 속성: 이미지가 로딩되지 않거나, 사용자가 이미지를 볼 수 없을 때 대체할 텍스트를 제공하는 역할을 합니다. 이 속성은 웹 접근성을 높이는 데 매우 중요합니다.
✅ 예시
<img src="image.jpg" alt="설명 텍스트">- src: 이미지 파일의 URL을 지정
- alt: 이미지가 로드되지 않을 때 보여줄 텍스트
🖼️ 이미지 크기 설정: width와 height
img 태그에서는 이미지를 표시할 크기를 지정할 수 있습니다. 크기를 지정하는 두 가지 주요 속성은 **width**와 **height**입니다.
- width: 이미지의 너비를 지정
- height: 이미지의 높이를 지정
이 속성들은 픽셀(px) 단위로 크기를 설정합니다. 예를 들어, 이미지를 200px 너비로, 150px 높이로 표시하려면 다음과 같이 설정할 수 있습니다.
✅ 예시
<img src="image.jpg" alt="설명 텍스트" width="200" height="150">- 이 코드는 이미지를 200px 너비, 150px 높이로 표시합니다.
🌍 웹 접근성을 고려한 alt 속성
alt 속성은 웹 접근성을 고려하여 중요한 역할을 합니다. 시각적으로 이미지를 볼 수 없는 사용자에게 대체 텍스트를 제공하여, 웹 페이지에서 음성인식기나 스크린 리더가 이 텍스트를 읽어 사용자에게 이미지를 설명해줍니다.
- 예를 들어, 이미지가 로딩되지 않거나, 화면을 읽는 소프트웨어를 사용하는 시각 장애인이 웹 페이지를 이용할 때 유용합니다.
📈 이미지 사용 시 유의사항
- 이미지 경로 확인: src 속성에 지정된 이미지 파일 경로가 올바른지 항상 확인해야 합니다.
- 이미지 크기 설정: width와 height 속성으로 이미지를 크기에 맞게 조정해야 합니다. 그러나, 이 방법을 사용하면 이미지 비율이 왜곡될 수 있으므로, 원본 비율을 유지하려면 CSS로 제어하는 것이 좋습니다.
- 웹 접근성: alt 속성을 사용하여 이미지를 설명할 수 있도록 하세요.
🎨 시각화: img 태그와 속성 예시
🔹 이미지 표시와 크기 설정
<img src="cat.jpg" alt="귀여운 고양이" width="300" height="200">- src: cat.jpg라는 이미지 파일을 웹 페이지에 표시합니다.
- alt: 이미지를 볼 수 없는 사용자에게 **"귀여운 고양이"**라는 텍스트가 대신 표시됩니다.
- width와 height: 이미지를 300px 너비, 200px 높이로 크기 조정합니다.
🔹 이미지에 대체 텍스트 제공 (웹 접근성)
<img src="flower.jpg" alt="붉은 장미 꽃" width="400" height="300">- alt 속성은 이미지가 표시되지 않거나 사용자가 이미지를 볼 수 없을 때 중요한 대체 텍스트 역할을 합니다.
🚩 결론
- img 태그는 HTML에서 이미지를 표시하는 핵심 요소입니다.
- 이미지를 표시할 때는 src, alt, width, height 속성을 잘 활용해야 합니다.
- 웹 접근성을 고려하여 항상 alt 속성을 사용하는 것이 좋습니다.
- 이미지 크기는 width와 height 속성으로 설정할 수 있습니다.
이렇게 HTML 이미지 태그를 사용하여 웹 페이지에서 이미지를 표시하고, 웹 접근성을 고려하는 방법을 익혔습니다. HTML에서 이미지를 적절하게 활용하면 웹 페이지의 시각적 요소를 강화하고, 더 나은 사용자 경험을 제공할 수 있습니다!