HTML 링크와 이미지 — 강좌 소개 페이지를 조각씩 쌓으며 익히는 a와 img

작성자:

웹이 웹인 이유는 문서끼리 연결되기 때문입니다. 이 글에서는 빈 파일에서 출발해 강좌 소개 페이지 하나를 다섯 조각으로 나누어 쌓아 올립니다. 각 단계의 코드를 그대로 이어 붙이면 마지막에 완성된 페이지가 됩니다.

1단계 — a 태그로 문서를 잇습니다

링크는 <a> 요소로 만듭니다. 목적지는 href 속성에 적고, 사용자가 누를 글자는 태그 사이에 넣습니다.

<h1>HTML 기초 5강</h1>
<p>
  아직 준비가 안 됐다면
  <a href="/html-intro/">HTML이란 무엇인가</a>부터 읽어 보십시오.
</p>

여기서 자주 나오는 실수가 링크 글자를 “여기”, “클릭”으로 적는 것입니다. 화면 낭독기 사용자는 링크 목록만 따로 뽑아 듣는 경우가 많은데, “여기”만 열 개 나오면 아무 정보가 없습니다. 링크 글자만 읽어도 어디로 가는지 알 수 있게 적는 것이 원칙입니다.

2단계 — 절대 경로와 상대 경로를 구분합니다

href에 적는 주소는 크게 세 가지 형태가 있습니다.

형태 예시 의미
절대 경로 https://cardnewsnote.com/html-text/ 주소 전체를 적습니다. 사이트 밖으로 나갈 때 씁니다.
루트 상대 경로 /html-text/ 사이트 최상단에서 출발합니다. 현재 위치와 무관하게 같은 곳으로 갑니다.
문서 상대 경로 images/cover.png 지금 파일이 있는 폴더를 기준으로 찾습니다. 
<a href="lesson/02.html">하위 폴더의 파일</a>
<a href="../index.html">한 단계 위 폴더의 파일</a>
<a href="/html-table-form/">사이트 최상단 기준 경로</a>

../는 상위 폴더로 한 칸 올라가라는 뜻입니다. 폴더를 옮기면 문서 상대 경로는 전부 깨지므로, 사이트 안의 이동에는 루트 상대 경로가 안전합니다.

3단계 — 새 탭 열기와 페이지 안 이동

<nav>
  <a href="#curriculum">커리큘럼</a>
  <a href="#reference">참고 자료</a>
</nav>

<h2 id="curriculum">커리큘럼</h2>
<p>다섯 편으로 구성돼 있습니다.</p>

<h2 id="reference">참고 자료</h2>
<p>
  <a href="/jquery-selector/" target="_blank" rel="noopener noreferrer">
    jQuery 선택자 정리
  </a>
</p>

같은 페이지 안에서 특정 위치로 뛰어가려면 목적지 요소에 id를 붙이고 href에 #아이디를 적습니다. 이것을 앵커 이동이라고 합니다. id 값은 한 문서 안에서 중복되면 안 됩니다.

target="_blank"는 새 탭에서 열라는 지시입니다. 이때 rel="noopener noreferrer"를 함께 적는 것이 관례인데, 새로 열린 페이지가 원래 페이지를 조작하지 못하게 막고 어디서 왔는지 정보를 넘기지 않기 위해서입니다.

4단계 — img로 이미지를 넣고 alt를 반드시 씁니다

<img src="/images/html-cover.png"
     alt="HTML 태그 구조를 그림으로 정리한 표지"
     width="800" height="450">

<img>는 닫는 태그가 없는 빈 요소입니다. src는 이미지 파일의 경로이고, alt는 이미지를 볼 수 없는 상황에서 대신 읽히는 설명입니다.

alt 생략은 입문자가 가장 많이 저지르는 실수입니다. 파일 경로가 틀렸을 때, 통신이 느릴 때, 화면 낭독기를 쓸 때 이 문장이 이미지를 대신합니다. “이미지”, “사진1” 같은 값은 없는 것과 같으니 무엇이 담겼는지 적습니다. 다만 순수한 장식용 이미지라면 alt=""처럼 빈 값을 줘서 낭독기가 건너뛰게 하는 것이 맞습니다.

width와 height를 적어 두면 이미지가 도착하기 전에도 브라우저가 자리를 미리 비워 둬서, 사진이 뜨는 순간 글이 아래로 밀리는 현상을 막을 수 있습니다. 화면 폭에 맞춰 줄어들게 하려면 CSS에서 max-width: 100%와 height: auto를 함께 주면 됩니다.

5단계 — figure로 묶고, 소리와 영상을 얹습니다

<figure>
  <img src="/images/dom-tree.png"
       alt="head와 body가 갈라지는 DOM 나무 구조 그림">
  <figcaption>그림 1. 브라우저가 만든 DOM 나무 구조</figcaption>
</figure>

<video src="/media/lesson01.mp4" controls width="640">
  이 브라우저는 video 태그를 지원하지 않습니다.
</video>

<audio src="/media/intro.mp3" controls>
  이 브라우저는 audio 태그를 지원하지 않습니다.
</audio>

<figure>는 본문에서 떼어 내도 되는 그림·도표·코드 조각을 감싸는 상자이고, <figcaption>은 그 설명글입니다. alt가 이미지 자체를 대신하는 문장이라면 figcaption은 모두에게 보이는 캡션이라는 점이 다릅니다.

<video>와 <audio>에 controls를 붙이면 재생 버튼과 볼륨 조절기가 나타납니다. 태그 사이에 적은 문장은 재생이 불가능한 환경에서만 보입니다. 여기까지 만든 페이지에 표와 입력 양식을 더하는 방법은 HTML 표와 폼에서 이어집니다.

핵심 정리

  • href — 링크 글자만 읽어도 목적지를 알 수 있게 적습니다.
  • 경로 — 사이트 안 이동은 /슬러그/ 형태의 루트 상대 경로가 폴더 이동에도 안전합니다.
  • 앵커와 target — id와 #아이디로 페이지 안을 이동하고, 새 탭은 rel="noopener noreferrer"와 함께 씁니다.
  • alt — 이미지를 대신할 문장이며 생략하지 않습니다. 장식용은 빈 값으로 둡니다.
  • figure — 그림과 캡션을 한 덩어리로 묶어 본문과 구분합니다.