01 HTML 개요, 기본 구문 및 구조_4. 이미지 작업

  ● img 요소를 사용하여 페이지에 이미지를 추가하는 방법

HTML을 사용하여 웹 페이지에 이미지를 추가하려면 <img> 요소를 사용할 수 있습니다. 사용 방법의 예는 다음과 같습니다.

<img src="image.jpg" alt="Description of image">

src 속성은 표시하려는 이미지의 URL 또는 파일 경로를 지정합니다. 'alt' 속성은 이미지에 대한 설명을 제공하며, 이는 화면 판독기에 유용하거나 이미지 로드에 실패한 경우에 유용합니다.
또한 <img> 요소에 추가 속성을 추가하여 width, height 및 style과 같은 이미지 표시 방식을 맞춤설정할 수 있습니다.

<img src="image.jpg" alt="Description of image" width="500" height="300" style="border: 1px solid black;">

이 예에서 width 및 height 속성은 이미지의 크기를 설정하고 style 속성은 이미지 주위에 테두리를 추가합니다.
src 속성이 유효한 이미지 파일을 가리켜야 한다는 점에 유의하는 것이 중요합니다. 웹 페이지에서 사용할 수 있는 일반적인 이미지 형식에는 JPEG, PNG 및 GIF가 있습니다. 또한 더 빠른 페이지 로드 시간을 보장하기 위해 웹용으로 이미지를 최적화하는 것이 좋습니다.

 

  ● 접근성을 설명하는 대체 텍스트 제공의 중요성

이미지에 대한 대체 텍스트를 제공하는 것은 이미지를 볼 수 없는 사용자(예: 시각 장애가 있는 사용자 또는 브라우저에서 이미지를 끈 사용자)가 이미지의 내용을 이해할 수 있도록 하기 때문에 접근성에 중요합니다.
'대체 텍스트'라고도 하는 대체 텍스트는 <img> 요소의 alt 속성을 사용하여 이미지에 추가됩니다. 'alt' 속성은 이미지 대신 간략하고 설명적인 텍스트를 제공해야 합니다.
예를 들어 이미지에 창턱에 앉아 있는 고양이가 표시되면 대체 텍스트는 "창턱에 앉아 있는 회색과 흰색 고양이"가 될 수 있습니다. 이 설명은 정안 사용자가 이미지에서 얻을 수 있는 것과 동일한 정보를 사용자에게 제공합니다.
접근성을 개선하는 것 외에도 이미지에 대한 대체 텍스트를 제공하면 검색 엔진이 페이지의 내용을 이해하도록 도와서 SEO(검색 엔진 최적화)를 개선할 수 있습니다.
페이지에 콘텐츠를 추가하지 않는 장식용 이미지에는 'alt' 속성을 사용하면 안 된다는 점에 유의해야 합니다. 이러한 경우 빈 alt 속성(예: alt="")을 사용하여 이미지가 순전히 장식용임을 나타내야 합니다.