HTML
링크와 이미지 넣기
링크는 목적지를, 이미지는 출처와 대체 설명을 지정합니다.
이럴 때 필요해요
공연 소개에서 상세 페이지로 이동하고 포스터의 의미를 전달합니다.
어떻게 동작하나요?
a 요소의 href는 이동할 주소입니다. 사용자가 링크만 읽어도 목적지를 알 수 있도록 링크 텍스트를 적습니다. 동작 실행은 나중에 배울 button을 사용합니다.
img의 src는 이미지 주소이고 alt는 이미지가 전달하는 내용을 대신 설명합니다. 주변 글과 의미가 완전히 겹치는 장식용 이미지에는 빈 alt를 사용할 수 있습니다.
아래 poster.png는 문서와 같은 폴더에 준비해야 합니다. alt는 파일이 없어도 이미지를 만들어 주는 기능이 아니라 이미지 정보를 대신 전달하는 텍스트입니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
<a href="/concerts">공연 목록 보기</a>
<img src="poster.png" alt="11월 14일 오후 7시 재즈 공연 안내">링크는 /concerts로 이동하며 포스터 파일은 별도로 필요합니다.
자주 헷갈리는 포인트
- 어떤 링크인지 알 수 없는 여기 클릭만 반복하지 않습니다.
- alt에는 파일명만 적기보다 이미지의 역할을 설명합니다.
내 말로 설명해 보기
이미지 파일이 없어도 alt만 적으면 포스터가 표시될까요?
생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.
예시 답변 확인
설명에 들어갈 핵심
- 링크는 목적지를, 이미지는 출처와 대체 설명을 지정합니다.
- 링크는 /concerts로 이동하며 포스터 파일은 별도로 필요합니다.
예시 답변
아닙니다. 실제 이미지는 src의 파일이 필요합니다. alt는 이미지를 볼 수 없거나 보조 기술을 사용하는 상황에서 의미를 전달합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.