-
HTML 이미지 삽입 태그 (<img>)와 대체 텍스트
IT창고/HTML 2023. 7. 19. 10:18반응형HTML 이미지 삽입 태그 (
<img>
)와 대체 텍스트HTML에서 이미지를 웹 페이지에 삽입하기 위해
<img>
태그를 사용합니다.<img>
태그는 이미지의 소스(src)와 대체 텍스트(alt)를 지정하여 웹 페이지에 이미지를 표시합니다. 이번 글에서는<img>
태그의 역할과 사용법, 그리고 대체 텍스트에 대해 자세히 알아보겠습니다.<img>
태그<img>
태그는 이미지를 웹 페이지에 삽입하는 데 사용됩니다.<img>
태그는 시작 태그(<img>
)와 종료 태그가 없는 빈 요소(empty element)로 구성됩니다. 이미지의 소스(src)와 대체 텍스트(alt)는src
와alt
속성을 통해 지정됩니다.아래는
<img>
태그의 사용 예시입니다:<img src="이미지 소스 URL" alt="대체 텍스트">
위의 예시에서는
<img>
태그를 사용하여 이미지 소스 URL과 대체 텍스트를 지정했습니다.이미지 소스 (src)
src 속성은
<img>
태그에서 사용되는 필수 속성으로, 이미지 파일의 소스 URL을 지정합니다. src 속성은 상대 경로 또는 절대 경로를 사용하여 이미지 파일의 위치를 지정할 수 있습니다.올바른 이미지 소스 URL을 지정하여 원하는 이미지를
<img>
태그에 삽입할 수 있습니다.대체 텍스트 (alt)
alt 속성은 이미지가 로드되지 못했을 때 텍스트로 대체되는 대체 텍스트를 지정합니다. alt 속성은 이미지에 대한 설명이나 대체 텍스트로 사용되며, 시각적으로 이미지를 볼 수 없는 사용자들을 위해 중요한 역할을 합니다.
적절한 대체 텍스트를 제공하여 웹 페이지의 접근성을 향상시키고, 이미지가 로드되지 않았을 때에도 적절한 정보를 제공할 수 있습니다.
마무리
HTML의
<img>
태그를 활용하여 이미지를 웹 페이지에 삽입할 수 있습니다. 이미지 소스 URL을 src 속성으로 지정하고, 대체 텍스트를 alt 속성으로 지정하여 이미지를 표시하고 접근성을 개선할 수 있습니다. 적절한 이미지 소스와 대체 텍스트를 사용하여 웹 페이지에 풍부한 콘텐츠를 제공해보세요. 다음 글에서는 HTML의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!반응형