내용 이미지와 장식 이미지를 구분하기

이번 단계에서 배울 내용

모든 이미지가 같은 역할을 하지는 않습니다. 사진처럼 정보를 전달하는 이미지는 의미 있는 alt가 필요합니다. 반대로 구분선처럼 꾸미기만 하는 이미지는 alt=""로 비워 두어 화면 읽기 도구가 불필요하게 읽지 않도록 합니다.

alt를 생략하는 것과 빈 값으로 작성하는 것은 다릅니다. 장식 이미지에도 속성은 작성하되 값만 비웁니다.

예시

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

<img src="team.jpg" alt="회의실에서 발표를 듣는 세 명의 팀원">
<img src="dots.svg" alt="">

해야 할 일

제주 사진에는 장면을 설명하는 대체 텍스트를 작성하고, 파란 물결 구분선은 장식 이미지로 표시하세요.

완성 조건

• 문서에 이미지 두 개가 있습니다.
• photo 이미지의 alt는 성산일출봉 정상에서 바라본 제주 바다입니다.
• divider 이미지의 alt는 빈 문자열 ""입니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.
• 두 이미지 모두 alt 속성을 가집니다.

작업 방법

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

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

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

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

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

도움말: 내용 이미지는 alt="장면 설명", 장식 이미지는 alt=""로 구분합니다.