한 줄 요약 — <a href="...">는 글의 한 지점에서 다른 페이지로 이어주는 링크, <img src="..." alt="...">는 문서에 그림을 끼워 넣는 태그입니다. 특히 alt는 그림을 눈으로 보지 못하는 상황을 위한 설명글이라, 접근성과 SEO, 이미지가 안 떴을 때까지 한꺼번에 책임집니다.

학습 목표#

  • <a>의 href로 같은 사이트 안 페이지와 바깥 사이트를 구분해 연결할 수 있다.
  • target="_blank"로 새 탭을 열 때 rel을 함께 붙여야 하는 이유를 안다.
  • <img>의 alt가 접근성·SEO·로딩 실패에서 각각 어떤 역할을 하는지 설명할 수 있다.
  • width·height를 적어 이미지 로딩 중 화면이 튀지 않게 만들 수 있다.

오늘의 비유 — 책 사이사이의 각주와 도판#

종이책을 펼치면 본문 말고도 두 가지가 더 보입니다. 하나는 각주입니다. 문장 끝에 작은 번호가 붙어 있고, "자세한 내용은 OO를 보라"며 다른 곳으로 안내합니다. 같은 책의 뒷장을 가리키기도 하고, 아예 다른 책을 가리키기도 합니다. 웹에서 이 각주가 링크(<a>)입니다.

다른 하나는 도판입니다. 본문 사이에 끼워진 사진이나 그림이고, 그 아래엔 보통 "사진: 1920년대 서울 거리" 같은 설명이 붙습니다. 이 그림이 이미지(<img>)이고, 아래 설명글이 alt입니다. 시각장애가 있는 독자가 듣는 오디오북에서는 그림을 펼쳐 보일 수 없으니, 낭독자가 이 설명글을 대신 읽어 줍니다. alt가 하는 일이 정확히 그것입니다.

핵심 개념#

가장 단순한 링크와 이미지는 이렇게 생겼습니다.

<a href="https://developer.mozilla.org">MDN 공식 문서</a>
<img src="seoul-1920.jpg" alt="1920년대 서울 거리 흑백 사진">

<a>의 href는 "이 각주가 가리키는 곳", <img>의 src는 "이 도판의 원본 파일 위치"입니다. <a>는 여는 태그와 닫는 태그 사이의 글자가 화면에 보이는 링크 문구가 되고, <img>는 닫는 태그가 없는 빈 요소라 속성만으로 끝납니다.

안쪽 페이지냐, 바깥 사이트냐#

같은 책의 다른 장을 가리키는 각주와 전혀 다른 책을 가리키는 각주가 다르듯, 링크도 두 갈래입니다.

<a href="/about.html">소개 페이지</a>
<a href="https://developer.mozilla.org">MDN</a>

/about.html처럼 /로 시작하면 "같은 사이트 안의 그 위치", https://로 시작하면 바깥 사이트의 전체 주소입니다. 내 사이트 안을 이동할 때는 굳이 전체 주소를 쓰지 않습니다. 책 안에서 "235쪽 참고"라고만 적지, 출판사 주소까지 적지 않는 것과 같습니다.

새 탭에서 열기 — 그리고 함께 붙이는 한 줄#

바깥 사이트로 가는 링크는 새 탭에서 열어, 읽던 페이지를 떠나지 않게 하는 경우가 많습니다. 책상에 원래 책을 펴 둔 채 참고할 책을 한 권 더 펼쳐 놓는 셈입니다.

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN (새 탭)
</a>

target="_blank"가 "새 탭에서 열어라"입니다. 그런데 이렇게 열린 새 탭은 기술적으로 원래 페이지를 되짚어 건드릴 수 있는 통로가 열립니다. rel="noopener noreferrer"는 그 통로를 막는 잠금장치라, target="_blank"와 거의 항상 한 쌍으로 같이 적습니다.

alt — 그림을 글로 옮겨 둔 설명#

alt는 도판 아래 설명글입니다. 세 가지 상황에서 한꺼번에 일합니다. 첫째, 화면을 읽어 주는 보조기기(오디오북의 낭독자)가 이 글을 대신 읽습니다. 둘째, 검색 엔진은 그림을 눈으로 보지 못하므로 alt 글로 그림 내용을 파악합니다(여기서 SEO와 만납니다). 셋째, 파일을 못 불러오면 깨진 그림 아이콘 대신 이 글이 그 자리에 나타납니다.

자리를 미리 잡아 두기#

책을 짤 때 도판이 들어갈 자리를 미리 네모로 비워 두면, 그림이 나중에 들어와도 주변 글이 밀리지 않습니다. 웹에서도 같습니다.

<img src="seoul-1920.jpg" alt="1920년대 서울 거리 흑백 사진"
     width="800" height="600">

width·height를 적어 두면 브라우저가 그림이 차지할 자리를 미리 확보해, 이미지가 늦게 떠도 본문이 갑자기 아래로 밀리는 현상이 사라집니다. 화면 아래쪽에 있어 당장 안 보이는 그림이라면 loading="lazy"를 더해, 독자가 그 페이지까지 스크롤해 내려올 때 불러오게 미룰 수도 있습니다.

함께 따라하기 — 링크와 그림이 섞인 페이지#

지난 회에 만든 폴더에 day-07 폴더와 index.html을 두고, <body> 안을 이렇게 채웁니다. 그림 파일이 없으면 아무 jpg나 같은 폴더에 두고 이름만 맞춰도 됩니다.

<h1>오늘 본 것 메모</h1>

<p>
  HTML 태그가 헷갈릴 때는
  <a href="https://developer.mozilla.org/ko/docs/Web/HTML"
     target="_blank" rel="noopener noreferrer">MDN HTML 문서</a>를
  찾아봅니다.
</p>

<img src="note.jpg" alt="손으로 쓴 HTML 태그 정리 메모"
     width="640" height="480">

<p><a href="/index.html">첫 페이지로 돌아가기</a></p>

저장하고 브라우저로 열어보면, 파란 밑줄 글자(링크)를 누르면 새 탭에서 MDN이 뜨고 원래 페이지는 그대로 남아 있습니다. 그 아래엔 메모 사진이 자리하고, 사진 파일 이름을 일부러 틀리게 바꿔 새로고침하면 그 자리에 "손으로 쓴 HTML 태그 정리 메모"라는 글자가 대신 나타납니다. alt에 적어 둔 글이 바로 이 글자입니다.

흔한 실수 3가지#

1. alt를 빼거나 "image"라고만 적어 접근성·SEO를 잃는다#

그림은 보이니까 괜찮다고 생각해 alt를 비워 두거나 형식적으로 채우는 경우입니다.

<img src="seoul-1920.jpg">
<img src="seoul-1920.jpg" alt="image">

(이 코드는 눈에는 멀쩡해 보이지만 절반의 독자를 놓칩니다.) alt가 없으면 오디오북 낭독자는 읽을 게 없어 파일 이름을 그대로 읽거나 침묵하고, 검색 엔진도 그림이 무엇인지 알 수 없습니다. "image"는 "그림: 그림"이라고 말하는 셈이라 없는 것과 같습니다.

<img src="seoul-1920.jpg" alt="1920년대 서울 거리 흑백 사진">

그림을 못 보는 사람에게 그 그림을 한 문장으로 설명한다면 뭐라고 할지를 적습니다. 단, 곁들임 장식처럼 의미가 없는 그림은 alt=""로 비워 두는 게 맞습니다. 빈 칸이 "이건 읽고 넘어가도 되는 장식"이라는 신호이기 때문입니다.

2. target="_blank"에 rel="noopener noreferrer"를 안 붙인다#

새 탭으로 여는 것만 신경 쓰고 보안 한 줄을 빠뜨리는 경우입니다.

<a href="https://example.com" target="_blank">바깥 사이트</a>

(이 코드는 잘 동작하는 듯 보이지만 보안 구멍을 남깁니다.) 이렇게 열린 새 탭의 페이지는 원래 내 페이지를 가로채 가짜 페이지로 바꿔치기할 수 있는 통로를 갖게 됩니다. 내가 통제하지 못하는 바깥 사이트일수록 위험합니다.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  바깥 사이트
</a>

rel="noopener noreferrer"가 그 통로를 끊습니다. 외워 두기 어렵다면 "target="_blank"를 칠 때마다 rel도 같이"라고 손에 붙여 둡니다.

3. width/height를 빼서 이미지 로딩 시 레이아웃이 튄다#

크기는 CSS로 정하니 HTML엔 안 적어도 된다고 생각하는 경우입니다.

<p>제목 아래 사진입니다.</p>
<img src="big-photo.jpg" alt="행사 단체 사진">
<p>사진 아래 설명입니다.</p>

(이 코드는 사진이 늦게 뜨는 순간 화면이 출렁입니다.) 그림이 도착하기 전에는 높이가 0이라, 사진이 뜨는 순간 아래 문단이 갑자기 밀려 내려갑니다. 막 글을 읽으려던 사람이 줄을 놓치는 그 현상입니다.

<p>제목 아래 사진입니다.</p>
<img src="big-photo.jpg" alt="행사 단체 사진" width="800" height="450">
<p>사진 아래 설명입니다.</p>

원본 그림의 가로·세로 비율에 맞는 값을 적어 두면, 브라우저가 자리를 미리 비워 둬 화면이 튀지 않습니다. 실제 표시 크기는 나중에 CSS로 조절해도 이 비율 정보는 그대로 쓰입니다.

오늘 배운 것 체크리스트#

  • /로 시작하는 안쪽 링크와 https://로 시작하는 바깥 링크를 구분한다.
  • target="_blank"에는 rel="noopener noreferrer"를 함께 적는다.
  • alt가 접근성·SEO·로딩 실패에서 각각 무슨 일을 하는지 댈 수 있다.
  • 의미 없는 장식 이미지는 alt=""로 비워 둔다.
  • <img>에 width·height를 적어 화면 튐을 막는다.

자주 묻는 질문#

Q. 링크를 새 탭에서 열고 싶은데 target="_blank"에 보안 문제가 있다고 들었습니다. 어떻게 해야 안전한가요?

A. target="_blank"와 함께 rel="noopener noreferrer"를 적으면 됩니다. noopener는 새 탭이 원래 페이지를 되짚어 조작하는 통로를 끊고, noreferrer는 어디서 왔는지 정보를 넘기지 않습니다. 최신 브라우저가 일부를 자동으로 막아 주기도 하지만, 직접 적어 두는 편이 확실합니다.

Q. 이미지가 깨져서 안 뜰 때 X 아이콘 말고 다른 게 보이게 할 수 있나요?

A. alt에 적어 둔 글이 깨진 이미지 자리에 대신 나타납니다. 그래서 alt는 "이미지가 안 떴을 때를 위한 예비 문구"이기도 합니다. 파일 경로가 맞는지, 확장자 대소문자가 같은지부터 확인하면 깨짐 자체를 줄일 수 있습니다.

Q. 모든 이미지에 alt를 꼭 채워야 하나요? 단순 장식 그림도요?

A. 의미를 담은 그림은 반드시 채우고, 순수 장식은 alt=""로 비워 둡니다. 빈 alt는 "읽지 않고 건너뛰어도 되는 그림"이라는 분명한 신호라, 속성을 통째로 빼는 것과는 다릅니다. 빼면 보조기기가 파일 이름을 대신 읽어 버릴 수 있습니다.

다음 시간 예고#

내일은 시맨틱 태그 7개 — header, nav, main, section, article, aside, footer를 다룹니다. 오늘까지 글·목록·링크·이미지로 본문을 채웠으니, 다음은 그 덩어리들을 의미 있는 구역으로 나누는 법으로 들어갑니다.

더 알아보기#