링크 a

링크(link)는 누르면 다른 페이지로 옮겨 가는 글자로, HTML에서는 a 요소로 만듭니다. 갈 곳의 주소는 여는 태그의 href 속성에 적습니다.

웹 페이지 한 장에 모든 것을 담을 수는 없습니다. 레시피 목록 페이지와 김치볶음밥 페이지처럼 페이지를 나누면, 링크로 이어야 오갈 수 있습니다. 이 레슨에서는 링크를 누르면 브라우저가 무엇을 하는지, 링크 글자를 어떻게 쓰는지, 새 탭으로 여는 링크는 무엇이 다른지 봅니다. 이 단원을 마치면 레시피 목록 페이지와 김치볶음밥 페이지를 링크로 잇고 그림을 넣을 수 있습니다. 이 단원(링크와 그림)을 이미 안다면 단원 연습 문제부터 풀고 틀린 레슨만 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다.

1href에 갈 곳을 적는다

<p>
  <a href="kimchi.html">
    김치볶음밥 레시피
  </a>
</p>
<p>
  <a href="https://example.com">
    예시 사이트
  </a>
</p>

a 요소의 내용이 링크 글자입니다. 크롬은 링크 글자를 파란 밑줄 글로 그립니다(브라우저의 기본 스타일). href에는 갈 곳을 두 가지로 적습니다.

• 다른 사이트로 가는 링크는 https://부터 주소 전체를 적습니다.
• 내 사이트의 다른 파일로 가는 링크는 파일 이름을 적습니다. 지금 페이지와 같은 폴더에 있는 kimchi.html이면 href="kimchi.html"입니다. 다른 폴더에 있는 파일은 다음 레슨 경로 읽기에서 봅니다.

링크를 누르면 브라우저는 href의 주소로 그 페이지를 받아, 지금 탭에 있던 페이지를 새 페이지로 바꿉니다(브라우저 규칙 1). 앞 페이지는 뒤로 가기를 눌러 돌아옵니다. 결과 화면 안의 링크는 눌러도 옮겨 가지 않게 막아 두었습니다. 누른 뒤의 일은 위 흐름 그림이 보여 줍니다.

주소 앞의 https://를 빠뜨리면 어떻게 될까요? href="www.example.com"⁠이라고 적으면 브라우저는 그 글자를 내 파일의 이름으로 읽습니다. 지금 페이지가 있는 폴더에서 www.example.com이라는 파일을 찾고, 그런 파일이 없으니 크롬은 '파일에 액세스할 수 없음' 페이지를 보입니다(ERR_FILE_NOT_FOUND).

2링크 글자는 갈 곳을 말한다

화면 읽기 프로그램(화면의 글을 소리로 읽어 주는 프로그램)은 페이지의 링크만 모아 목록으로 읽어 줄 수 있습니다. 이때 들리는 것은 링크 글자뿐입니다. 링크 글자가 곧 그 링크의 이름이기 때문입니다(브라우저 규칙 3). 그래서 링크 글자는 앞뒤 문장 없이 그것만 읽어도 어디로 가는지 알 수 있게 씁니다.

<ul>
  <li>
    <a href="kimchi.html">
      김치볶음밥 레시피
    </a>
  </li>
</ul>

잰 값 칸의 읽는 이름은 화면 읽기 프로그램이 이 링크를 부르는 이름입니다. 링크 글자와 같습니다.

3target="_blank"는 새 탭에서 연다

<p>
  <a
    href="https://example.com"
    target="_blank"
  >
    예시 사이트
  </a>
</p>

target="_blank"를 적은 링크는 새 탭을 열어 그 탭에 페이지를 엽니다. 브라우저 설정에 따라 새 창으로 열리기도 합니다. 원래 탭의 페이지는 그대로 남습니다. 새 탭은 처음 연 탭이라 뒤로 가기로 돌아갈 페이지가 없습니다. 링크를 누르기 전의 페이지는 원래 탭에 있습니다.

예제

레시피 목록 index.html과 김치볶음밥 kimchi.html은 같은 폴더에 있습니다. 아래는 목록 페이지의 body 안입니다.

<h1>레시피 노트</h1>
<ul>
  <li>
    <a href="kimchi.html">
      김치볶음밥 레시피
    </a>
  </li>
</ul>

김치볶음밥 페이지의 body 안입니다.

<h1>김치볶음밥</h1>
<p>
  <a href="index.html">
    레시피 목록으로
  </a>
</p>
<p>
  <a
    href="https://example.com"
    target="_blank"
  >
    예시 사이트
  </a>
</p>

목록 페이지에서 '김치볶음밥 레시피'를 누르고, 이어서 '예시 사이트'를 누른 뒤, 지금 보고 있는 탭에서 뒤로 가기를 누르면 어떻게 될까요? 탭은 모두 몇 개일까요?

자주 틀리는 곳

틀린 생각: 링크 글자는 '여기'처럼 짧게 써도 앞뒤 문장이 뜻을 알려 준다.

화면에서는 앞뒤 문장을 함께 읽으니 그렇게 여기게 됩니다. 링크만 모아 읽으면 링크 글자만 들립니다.

<p>
  다른 레시피는
  <a href="index.html">여기</a>를
  누르세요.
</p>

이 링크의 이름은 '여기'뿐입니다. 이런 링크가 한 페이지에 셋이면 링크 목록은 '여기, 여기, 여기'가 됩니다.

맞는 규칙: 링크 글자는 그것만 읽어도 갈 곳을 알 수 있게 씁니다. 링크 글자가 그 링크의 이름입니다(브라우저 규칙 3). '여기' 대신 '레시피 목록'처럼 갈 곳을 링크 글자로 씁니다.

틀린 생각: 같은 사이트 안의 링크도 새 탭으로 열면 원래 페이지가 남아 편하다.

<p>
  <a
    href="index.html"
    target="_blank"
  >
    레시피 목록으로
  </a>
</p>

이 링크를 누를 때마다 탭이 하나씩 늘고, 새 탭에서는 뒤로 가기로 앞 페이지에 돌아가지 못합니다. 목록과 레시피를 오가다 보면 같은 페이지가 여러 탭에 열립니다.

맞는 규칙: 같은 사이트 안을 오가는 링크에는 target을 적지 않습니다. 지금 탭에서 열리고, 뒤로 가기로 앞 페이지에 돌아옵니다.

틀린 생각: 링크 글자에 주소를 그대로 쓰면 가장 정확하다.

<p>
  <a href="https://example.com">
    https://example.com
  </a>
</p>

화면 읽기 프로그램은 이 주소를 글자 그대로 읽습니다. 주소가 길수록 오래 듣고도 어떤 곳인지 알기 어렵습니다.

맞는 규칙: 주소는 href에만 적고, 링크 글자에는 갈 곳의 이름('예시 사이트')을 씁니다.

확인 문제

1. 예제의 김치볶음밥 페이지에서 '예시 사이트' 링크의 target="_blank"를 지웠습니다. 목록 페이지에서 '김치볶음밥 레시피' → '예시 사이트' 차례로 누른 뒤 뒤로 가기를 한 번 누르면 어느 페이지가 보일까요?

• ① 레시피 목록
• ② 김치볶음밥 페이지
• ③ 예시 사이트 그대로 — 돌아갈 페이지가 없다

2. 같은 폴더에 있는 doenjang.html(된장찌개 레시피)로 가는 링크입니다. ____ 자리에 들어갈 것을 쓰세요.

<a ____>
  된장찌개 레시피
</a>

<a href="doenjang.html">
  된장찌개 레시피
</a>

3. 여행 일정 페이지의 '제주 지도 보기'는 지도 사이트 example.com으로 가는 링크입니다. 그런데 누르면 '파일에 액세스할 수 없음'이 뜹니다. 몇 번 줄을 어떻게 고쳐야 할까요? 고친 줄을 쓰세요.

<h2>둘째 날</h2>
<a href="example.com">
  제주 지도 보기
</a>

<h2>둘째 날</h2>
<a
  href="https://example.com"
>
  제주 지도 보기
</a>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제의 두 페이지를 html-css-study 폴더에 index.html · kimchi.html로 저장하고(문서 뼈대의 body 안에 예제 코드를 넣습니다), 링크를 눌러 오가 봅니다. recipe-note 폴더의 레시피 노트와 이름이 같지만 따로 두는 연습 파일입니다. 그다음 '예시 사이트' 링크에서 https://를 지우고 저장한 뒤 누르면 무엇이 뜰지 먼저 적고, 눌러서 맞춰 봅니다.