내용 이미지에 대체 텍스트 제공하기

이번 단계에서 배울 내용

<img>는 이미지를 보여 주는 요소입니다. src에는 이미지 파일의 위치를, alt에는 이미지를 볼 수 없을 때 대신 전달할 설명을 적습니다.

작품 사진처럼 내용 전달에 필요한 이미지라면 alt만 읽어도 이미지의 핵심을 알 수 있게 구체적으로 설명합니다.

예시

아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다.

<img src="forest.jpg" alt="안개가 낀 숲길을 걷는 두 사람">

해야 할 일

전시 작품 이미지의 파일 위치를 artwork.jpg로 지정하고, 이미지가 보여 주는 장면을 푸른 바다 위를 항해하는 흰 돛단배라고 설명하세요.

완성 조건

• artwork라는 id를 가진 <img>를 한 개 사용합니다.
• 이미지의 src 값은 artwork.jpg입니다.
• 이미지의 alt 값은 푸른 바다 위를 항해하는 흰 돛단배입니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.
• 문서의 모든 이미지에 alt 속성이 있습니다.

작업 방법

1. 에디터에서 index.html을 엽니다.
2. TODO 주석이 있는 부분을 중심으로 코드를 수정합니다.
3. 미리보기에서 결과를 확인한 뒤 제출합니다.

별도의 입력값은 없습니다.

에디터에 준비된 index.html을 열고, 문제에서 안내하는 HTML 요소와 속성을 추가하거나 수정하세요. 브라우저 미리보기로 작성한 결과를 확인할 수 있습니다.

별도의 출력값은 없습니다.

수정한 index.html이 브라우저에서 정상적으로 열리고, 아래의 완성 조건을 모두 만족하면 됩니다.

도움말: src와 alt는 모두 <img>의 여는 태그 안에 나란히 작성합니다.