18. HTML 링크 – 이제 웹을 만듭니다!

소개

이 글에서는 웹의 역사에서 가장 진보적이었던 발명들 중의 하나 – 링크에 대해 배우게 될 것입니다. 링크는 문서의 독자가 그것을 따라서 다른 문서로 이동하고, 연결을 끊었다가 다시 연결하는 작업 없이 서버에서 서버로 움직일 수 있게 해줍니다. 링크가 개발된 이후로 실로 많은 일들이 있었지만, 한가지는 변하지 않았습니다: 링크는 웹 경험에서 매우 중요한 부분이며, 당신이 그것을 어떻게 다루느냐에 따라 사이트의 방문자가 쉽게 이용할 수 있을 수도, 어렵게 만들 수도 있습니다.

이 글을 다 읽으면 링크를 어떻게 만드는지 알게 될 것입니다. 이것은 이해하기 매우 쉬우며, 어떠한 환경에서도 잘 동작합니다. 그 뒤에 링크가 검색 엔진 선호도에 어떠한 영향을 미치는지 배울 것이고, 링크 텍스트를 작성하는 팁에 대해서도 다룰 것입니다. 늘 하던대로, 이 글에서 사용한 파일들을 압축한 것 이 있습니다. 이 글의 구조는 다음과 같습니다.

  • 링크는 무엇인가?
  • 앵커 링크의 해부학
  • 링크? 타겟? id 속성과 href 속성
  • 무엇에 링크하고 있는지 모호하게 하지 마십시오
    • title 속성으로 추가적인 정보 제공
    • HTML이 아닌 자원으로의 연결 – 사람들이 의문을 갖게 하지 마십시오.
    • 외부 링크 vs 내부 링크
  • 프레임과 팝업 – 쓰지 마세요
  • 나가는 링크와 들어오는 링크의 혜택
  • 링크 텍스트
  • 링크 스타일
  • 요약
  • 연습문제

링크란 무엇인가?

링크란 다른 자원 – 다른 HTML 문서, 텍스트 파일, PDF, 기타 – 를 가리키는, 웹 사이트의 일부분입니다. link 요소를 통해 만들어지고, 자동적으로 브라우저에 의해 따라가지는 링크들이 있습니다. 사실 이러한 것들을 이미 많이 마주쳤을텐데, CSS 파일을 HTML 문서 내부로 가져오기 위해 이러한 것을 사용합니다. 사용자들이 직접 따라가는 링크가 있습니다. 그런 링크를 앵커 라고 하며, a 요소를 이용해서 만들 수 있습니다.

앵커 링크의 해부학

모든 인라인 요소들을 a 요소로 감싸서 앵커 링크로 만들 수 있습니다. 예를 들어, 다음의 HTML 문서에 들어 있는 “Yahoo Developer Network” 는 링크로 바뀝니다. (linkexample.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Link Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>A link to the YDN</h1>
  <p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p>
</body>
</html>

이 링크를 따라가는(마우스로 클릭하거나, 키보드 또는 음성으로 활성화시키는) 사용자는 현재의 사이트를 떠나서 YDN으로 가게 될 것입니다. 링크 자체에서는 더 많은 일들이 일어나는데, 그것에 관해서는 스타일에 대해 이야기하면서 살펴 볼 것입니다.

링크에는 몇가지 속성들이 있습니다:

  • href – 링크가 가리키는 자원. 외부 파일이거나 앵커 ID가 될 수 있습니다.
  • id – 앵커의 ID. 앵커가 링크가 아니라 대상인 경우입니다.
  • title – 외부 자원에 대한 추가적인 정보.

가장 중요한 속성들을 먼저 살펴보고, 방문자들이 쉽게 사용할 수 있도록 할 수 있는 것들에 대해 이야기해 보겠습니다.

링크? 타겟? id 속성과 href 속성

a 요소는 설정되어 있는 속성들에 따라 여러가지 역할을 할 수 있습니다. 가장 흔히 사용되는 속성은 href 인데, 이 링크가 무엇을 가리키느냐, 하는 것을 정의합니다. 이 속성은 몇가지 값을 가질 수 있습니다:

  • 동일한 폴더에 있는 URL – help.html, 현재 폴더와 상대적인 위치에 있는 URL – ../../help/help.html 여기에서 .. 는 상위 폴더를 말합니다. 서버 루트로부터 내려오는 절대적인 URL – /help/help.html 여기에서 맨 앞에 / 를 두면 이 주소가 현재 위치의 루트로부터 시작한다는 뜻입니다.
  • 완전히 다른 서버에 있는 URLhttp://wait-till-i-com
  • 조각 식별자, 혹은 해시(#) 뒤에 따라오는 id 이름. 이것은 같은 문서에 있는 대상을 가리킵니다.
  • URL과 조각 식별자의 조합 – href 속성의 값에, URL 뒤에 조각 식별자를 붙임으로서 다른 문서에 있는 특정한 섹션으로 바로 링크할 수 있습니다. 예를 들어 http://developer.yahoo.com/yui/#cheatsheets 이런 것입니다.

이러한 모든 것들이 다른 어떤 것을 가리키게 만듭니다. 반면에 id 속성은 페이지에 포함된 앵커 – 다른 링크에서 가리킬 대상 – 으로 만듭니다. 둘 모두가 동일한 요소 (a) 를 사용하므로 이러한 것은 약간 혼란스러울 수 있긴 합니다. 기억하기 쉽게 하려면 다음과 같이 생각해 보십시오: id 속성은 링크를 앵커로 만들며, 문서에서 특정한 지점을 가리키는 용도로 사용할 수 있습니다. 다음의 HTML은 모든 링크 종류를 전부 포함하고 있습니다. (linkexamples.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Different Link Example</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Different Link examples</h1>

  <h2>Example of in-page navigation with fragment identifiers, links and anchors</h2>
  <div id="nav">
    <ul id="toc">
      <li><a href="#sec1">Section One</a></li>
      <li><a href="#sec2">Section Two</a></li>
      <li><a href="#sec3">Section Three</a></li>
      <li><a href="#sec4">Section Four</a></li>
      <li><a href="#sec5">Section Five</a></li>
    </ul>
  </div>  
    
  <div id="content">
    <div>
      <h2><a id="sec1">Section #1</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec2">Section #2</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec3">Section #3</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec4">Section #4</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec5">Section #5</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
  </div>

  <h2>Some other link examples</h2>
  <ul>
    <li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
    <li><a href="http://dev.opera.com/articles/view/the-freelancing-business-part-1-pricing/#marketing">Tips on marketing yourself</a></li>
    <li><a href="ftp://get.opera.com/pub/opera/win/">Download different Opera versions</a></li>
    <li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book</a></li>
  </ul>

</body>
</html>

선호하는 브라우저에서 이 파일을 열고 실험해 보십시오. 첫번째 목록의 링크 중 무엇을 누르더라도 같은 문서의 해당 섹션으로 이동할 것입니다. 이것은 동일한 조각 식별자에 의해 연결되어 있기 때문입니다. 예를 들어 목록의 첫번째 링크의 href 속성은 #sec1 을 가리키는데, 이것은 첫번째 h2 요소 내부에 있는 링크의 id 값입니다. 하나의 문서에서 두개의 앵커 요소들을 연결하려면 이것으로 충분합니다. href 속성에서 이용할 것이라면, 같은 값 앞에 해시(#)를 붙여서 쓰면 됩니다. 브라우저의 주소 표시줄에 있는 URL도 바뀌어서 그 끝에 조각 식별자를 보여주고 있는데, 이렇게 되면 방문자들이 이 섹션(문서가 아니라)에 직접 북마크를 하거나, 이메일로 보낼 수 있게 됩니다.

“메뉴로 돌아가기” 링크들 중 어떤 것을 눌러도 동일한 일이 일어납니다. 어떻게 이런 것이 가능할까요? 조각 식별자는 id를 가진 어떤 요소라도 가능합니다.

  • 앵커 링크는 href 속성의 값으로 조각 식별자를 가질 수 있습니다. 이러한 것은 #으로 시작해야 합니다.
  • 활성화되면, 그 값을 id로 갖는 HTML 요소로 이동할 것입니다. 각각의 페이지에서 ID 값은 유일해야 합니다.
  • ID 명명에는 규칙이 있습니다. 가장 중요한 것은 영문자 혹은 숫자로 시작해야 하며, 중간에 공백문자를 사용할 수 없다는 것입니다.

이러한 설명은 예제에 있는 메뉴와 서로 다른 섹션들에 적용됩니다. 하지만 다른 링크들은? 다른 링크들을 눌러 보면, 그것들이 다른 대상을 가리키고 있다는 것을 알게 될 것입니다 – 어떤 것은 다른 사이트로 이동하고, 다른 것은 사진을 보여주고, 또 다른 것은 다른 웹 페이지의 특정한 섹션으로 이동합니다. 하지만 만약 당신, 혹은 당신의 브라우저가 그러한 자원 중 일부를 이해할 수 없다면 어떻게 해야 할까요?

무엇에 링크하고 있는지 모호하게 하지 마십시오

링크에 대해서 기억해야 할 것 중 가장 중요한 것은, 그것이 방문자의 신뢰도에서 큰 부분을 차지한다는 것입니다. 그들은 당신이 제공하는 링크를 믿고, 따라가서, 관련 있으며 도움이 되는 경험을 가질 수 있습니다. 링크된 자원이 동작하지 않거나, 방문자가 이용할 수 없는 형태로 되어 있다면, 당신은 그들의 신뢰를 배반한 것이고 믿음을 잃게 될 것입니다. 그런 일이 일어나게 하지 마십시오.

title 속성으로 추가적인 정보 제공

거의 모든 다른 HTML 요소들과 마찬가지로, a 요소에도 title 속성을 이용해서 추가적인 정보를 제공할 수 있습니다. 브라우저들은 소위 툴팁이라고 하는 방식으로 이것을 보여 줄 것입니다. 그러면 툴팁은 방문자에게 이 링크가 무엇에 관한 것인지 알려주게 될 것입니다. 예를 들어서 연결된 문서에 대한 짧은 소개와 함께 그 위치를 제공할 수 있을 것입니다. (titleexample.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding extra information with a title attribute</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Adding extra information with a title attribute</h1>
  <ul>
    <li>Find more information on the <a title="The Yahoo Developer Network is the main hub for all the developer tools Yahoo offers, including the Yahoo User Interface Library (YUI) and the Design Patterns repository" href="http://developer.yahoo.com">Yahoo Developer Network</a>.</li>
  </ul>

  </body>
</html>

그림 1. title 속성을 추가하면 사용자가 링크 위로 마우스를 올릴 때 툴팁으로 보여줍니다.

하지만, 모든 사용자가 이러한 것을 볼 것이라고 기대할 수는 없으므로, 중요한 정보를 여기에 담아서는 결코 안됩니다. 시각 장애인들은 이러한 정보를 볼 가능성이 매우 낮습니다. 물론 스크린 리더에 title 속성을 읽도록 하는 옵션이 있지만, 대개 기본적으로 꺼져 있습니다. 링크에 대한 중요한 정보를 title 속성에 담아서는 안됩니다. 중요한 정보라고 하면,

  • HTML이 아닌 자원으로 연결한다는 내용
  • 이 사이트를 떠나서 다른 서버로 연결된다는 내용
  • 다른 프레임이나 팝업에서 열린다는 내용

HTML이 아닌 자원으로의 연결 – 사람들이 의문을 갖게 하지 마십시오.

링크를 클릭했는데, 브라우저가 어쩔줄을 모른다는 상황은 아주 짜증나는 일이 될 수 있습니다. 하지만 이미지, PDF 문서, 비디오 따위에 링크하면서도 사용자에게 아무런 힌트도 주지 않는 웹 사이트가 너무 많습니다. 비디오 들은 브라우저 다운의 아주 흔한 이유 중 하나입니다. 이에 더해, 매우 큰 자원(20MB 짜리 PDF를 보실 분?)이라면 사용자들은 보통 다운로드를 선택할 것입니다 – 브라우저에서 바로 열어서 그러잖아도 헤픈 메모리 사용에 짐을 더 지우려고 하지는 않을 것입니다. 어쩌면, 아예 안 보려고 할 수도 있겠지요.

웹에서 성공적인 결과를 이끌어 낼 수 있는 인자들 중 가장 큰 것은, 사용자가 자신이 뭔가 동작을 취한 후에 무슨 일이 일어날 지 알 수 있도록 하는 것입니다. 링크의 경우라면 사용자에게 링크된 자원이 무엇인지 알려주어서, 좌절스러운 상황이 생기지 않도록 예방하는 것입니다. 여기 몇가지 예제가 있습니다. (linkingnonhtml.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Linking non-HTML resources</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Linking non-HTML resources</h1>

  <ul>
    <li>Find more information on the <a href="http://developer.yahoo.com">Yahoo Developer Network site (external)</a></li>
    <li>Download the <a href="http://www.wait-till-i.com/stuff/JavaScript-DOM-Cheatsheet.pdf">Dom Cheatsheet (PDF, 85KB)</a></li>
    <li>Pick and <a href="ftp://get.opera.com/pub/opera/win/">download different Opera versions from their FTP (external)</a></li>
    <li>Check out a <a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book (JPG, 200KB)</a></li>
  </ul>

  </body>
</html>

링크된 파일에 대한 정보와 그 크기를 제공함으로서, 사용자가 어떤 브라우저를 사용하고 어떤 플러그인들이 설치되어있는지를 짐작하려고 애쓸 필요 없이, 그 결정을 사용자에게 위임할 수 있습니다. 적절한 스타일링을 함께 사용한다면, 직관적이면서도 보기 좋게 만들 수도 있을 것입니다. 도움말 섹션을 제공해서 파일 포맷에 대한 설명과 함께 그러한 파일을 다룰 수 있는 소프트웨어를 어디에서 얻을 수 있는지 역시 알려준다면, 책임 질 일이 없어질 것입니다.

외부 링크 vs 내부 링크

웹 사이트로 비즈니스를 수행하면서 가장 골치아픈 일은 사용자들이 너무 일찍 떠나 버린다는 것입니다. 심지어는 이런 이유 때문에 써드파티 링크를 전혀 제공하지 않는 회사들조차 있습니다(그 써드파티에서 자신들에게 돌려진 트래픽에 대해 요금을 제공하지 않는다면 말이지요). 이러한 잘못된 결정에 대해서는 나중에 다시 살펴 보기로 하고, 지금은 사용자들이 사이트를 너무 일찍 떠나버리지 않도록 하는 방법, 그리고 그러한 것이 사이트의 성공에 어떤 영향을 끼치는 지를 살펴보도록 하겠습니다.

프레임과 팝업 – 쓰지 마세요

다른 사이트에 사용자를 뺐길거라는 공포, 하지만 그래도 링크는 제공해야 되는데. 이러한 딜레마에서 출발한 웹의 발명품이 사용하기 쉬웠던 사이트에서 가시가 된 지가 벌써 몇 년이나 되었습니다 – 프레임과 팝업 말입니다.

HTML 프레임을 사용한다는 것은, 브라우저에 보여지는 페이지를 여러개의 문서로 분할한다는 의미를 갖습니다. 이렇게 하는 것의 혜택은, 그중 일부에서 다른 페이지 – 당신의 서버에 있는 것이든, 다른 서버에 있는 것이든 – 를 열어도 그 문서가 그자리에 그냥 있다는 것입니다. 하지만 바로 여기에서 사용성이 끝장났습니다. 프레임은 사용자 경험을 끔찍하게 만들며, 실제로도 매우 해로운 것입니다.

  • 검색 엔진들은 이러한 페이지 전체를 색인할 수 없으므로 일부분만을 가져가게 되는데, 결과적으론 전혀 말이 되지 않는 내용들이 검색 엔진에 등록되게 됩니다.
  • 방문자들이 북마크를 사용할 수 없게 됩니다 – 다시 방문하게 되면 프레임셋의 초기 상태로 돌아가며, 이전에 보았던 그 화면을 볼 수 없습니다.
  • 보조 기술의 도움을 받는 사용자들은 프레임셋을 사용하기가 매우 어렵습니다.
  • 써드파티 사이트에서는 자신들의 페이지가 프레임셋에 나타나는 것을 싫어할 수 있으며, 프레임을 깨고 실제URL로 바꾸는 스크립트를 사용할 수도 있습니다. 이렇게 하는 이유는, 마치 은행처럼 보이는 사이트를 만들어놓고는 신용카드 정보를 입력하도록 유도하는 범죄(피싱이라고 부릅니다)를 막기 위한 것입니다.

프레임셋 내부의 링크는 target 속성을 사용해서 정확한 프레임을 찾게 됩니다. 프레임셋의 모든 프레임은 특정한 이름을 갖게 되고, 링크를 클릭할 경우 href 속성에서 정의한 문서를 그 프레임에서 열게 됩니다. 만약 프레임셋을 사용할 수 없다면(예를 들어 그 링크를 검색엔진을 통해서 찾았다거나), 링크는 새로운 브라우저에서 열립니다.

새 창에서 여는 것 또한 써드파티 사이트로 링크하는 흔한 방법입니다 – 스크립트로 팝업 윈도우를 열거나, target 속성에 _blank 라는 값을 이용합니다. 최근의 브라우저 대부분이 팝업 차단기를 갖고 있다는 사실 만으로도, 요즈음 그런것이 얼마나 위험한 것인지 쉽게 알 수 있습니다.

요약하면: 당신이 지금 뭘 하고 있는지 완벽하게 확신할 수 없다면 target 속성을 결코 사용하지 마십시오. 이것은 오래된 아이디어이기도 합니다 – 요즘의 브라우저들은 대부분 탭 인터페이스를 갖고 있으므로, 사용자들은 써드파티 사이트를 백그라운드로 열어 둔 채 당신의 사이트에 계속 머물러 있을 수도 있습니다. 특정한 상황에서라면 외부 링크와 내부 링크에 차이를 두고 싶을 수도 있겠지만, 항상 모든 결정은 사용자에게 맡겨야 합니다.

들어오는 링크와 나가는 링크의 혜택

설령 써드파티 사이트가 경쟁자라고 하더라도, 거기 링크해야 하는 이유가 있습니다.

  • 방문자들의 눈에는 당신이 신뢰할 만한 사람으로 비춰집니다 – 경쟁자들을 두려워하지 않을 만큼 당신이 제공하는 내용의 품질에 자신이 있는 것입니다.
  • 완전한 서비스를 제공할 수 있는 기회가 됩니다 – 당신이 취급하지 않지만 다른 사이트에서는 제공하는 내용, 글, 심지어는 상품에 대한 링크를, 당신이 제공하는 내용에 관심이 있고 더 알고 싶어하는 사용자에게 제공하는 것입니다.
  • 써드파티의 오래된 글에 대한 링크를 제공한 후, 그것보다 더 좋은, 혹은 그것과 다른 솔루션을 제공함으로서 당신의 포인트를 증명할 수 있습니다.

들어오는 링크(써드파티에서 당신의 사이트를 가리키는)의 유용함은 더 분명합니다. 정확하고 수준 높은 사이트에서 당신의 사이트에 링크를 많이 걸 수록, 구글 같은 검색엔진에서 당신의 사이트가 높은 위치를 차지하게 될 것입니다. 물론 그렇게 되기 전에 당신이 다른 사이트들에 링크하는 것을 두려워 하지 않는다는 것을 증명해야겠죠.

연관된 키워드 라는 단어는, 좋은 링크를 만드는데 있어 매우 중요한 다른 것을 연상시킵니다 – 링크 텍스트를 어떻게 쓸 것인가.

링크 텍스트

HTML이 아닌 자원들에 링크하는 것에 대해 설명하면서 이것을 약간 언급했었습니다만, 링크라는 것은 단순히 페이지 텍스트의 일부분이 아니라 문서의 인터랙티브한 부분이기도 함을 다시 상기하는 것도 좋을 것입니다.

몇몇 보조 기술들은 문서 전체가 아니라 링크들만의 목록을 제공함으로서 사용자들이 빠르게 훑어볼 수 있도록 합니다. 이 말의 의미는 – 링크 텍스트가 둘러싸고 있는 문맥에서 벗어나더라도 여전히 무슨 뜻인지 알 수 있는 것이어야 한다는 말입니다. 오페라 브라우저를 사용 중이라면, 메뉴에서 Tools > Links 를 선택하거나 키보드로 Ctrl + Shift + L 을 입력하여 이것을 테스트해볼 수 있습니다. 문서의 링크와 그 목적지들을 전부 보여주는 새로운 탭을 보게 될 것입니다.

따라서 모든 링크 텍스트들이 말이 되게 할 뿐만 아니라, 서로 다른 목적지를 가리키면서도 같은 텍스트를 사용하는 링크가 없도록 할 필요가 있습니다. 이러한 것에 관한 고전적인 잘못은, 예를 들어 “최신 버전을 다운로드받으려면 여기를 클릭하세요” 대신에 “click here” 라고 쓴 링크입니다. 링크가 무엇을 가리키고 있는지를 스스로 명확하게 설명하는 링크 텍스트를 사용한다면 훨씬 좋을 것입니다 – 이 경우라면 “최신 버전의 소프트웨어를 다운로드 받고 직접 테스트해보십시오” 가 될 것입니다.

비슷한 것으로 “more” 링크들이 있습니다. 이러한 것은 대체로 뉴스 사이트에서 볼 수 있는데, 기사의 제목과 약간의 요약을 보여 준 뒤 “more” 또는 “full story” 같은 링크를 배치하는 것입니다. 이러한 문제에 대한 해결책은 각각의 이미지들에 고유한 대체 텍스트를 사용하거나, 링크 내부에서 “more” 라는 텍스트 뒤에 더 자세한 설명을 span 요소로 제공한 후 CSS를 이용해서 그것을 감추는 방법이 있습니다. 이 시리즈의 나중에 내비게이션과 메뉴에 관한 글에서 이러한 테크닉에 대해 좀 더 다루게 될 것입니다.

링크 스타일

이 시리즈에서는 아직 CSS에 대해 그다지 다루지 않았지만, 링크가 어떻게 보이는가 하는 것이 매우 중요하며, 링크에는 몇가지 상태가 있다는 점을 고려하는 것이 좋을 것입니다. 링크 상태들은: (이후에 CSS 가상 선택자 와 연관해서 다시 다루어질 것입니다. 복잡하게 들리지만 그렇지 않습니다)

  • link – 기본 상태입니다. 문서에 있는 링크들이 어떻게 보일지를 정의합니다. 기본값으로, 방문한 적이 없는 링크는 파란색입니다.
  • visited – 방문한 적이 있는 링크의 스타일입니다. 기본적으로 보라색입니다.
  • hover – 마우스 커서가 그 위에 있는 링크의 스타일입니다.
  • active – 현재 활성화되어 있는 링크, 즉 다른 사이트로의 연결이 진행 중인 상태의 스타일입니다. 또한, 브라우저의 뒤로 가기 버튼을 눌러 이전 문서로 돌아왔다면 마지막으로 눌렀던 링크의 스타일이기도 합니다.

요약

이번에는 많은 것을 다루었지만, 가장 중요한 것은 링크가 어떻게 움직이는지, 왜 그래야 하는지를 이해하는 것입니다. 웹 개발자로서의 커리어를 쌓아 가면서 수없이 많은 트릭과 테크닉을 익히게 되겠지만, 항상 “내가 지금 하고 있는 것이 정말로 필요한 것인가?” 하는 의문을 가지길 바랍니다.

이런 것들에 관해 이야기했습니다:

  • a 요소와 그 속성.
  • a 요소가 링크일때와 앵커일때 어떻게 다른지.
  • 앵커의 id가 고유해야 하는 이유
  • 사용자가 링크를 따라 갈 때 무엇을 보게 될 지 알려주어야 하는 이유
  • title 속성을 통해 정보를 전달하는 방법, 그리고 그것으로 중요한 정보를 전달하는 것이 위험한 이유
  • 외부(써드파티 사이트) 링크와 내부 링크의 차이
  • 팝업이나 프레임 같은 오래된 관습과 그것을 피해야 하는 이유
  • 다른 사이트로 링크하는, 그리고 링크받는 것의 혜택
  • 링크 텍스트가 문맥을 벗어나도 말이 되도록 하는 방법, 그렇게 해야 하는 이유
  • 기본적인 링크 스타일에 관한 배경지식

이러한 지식을 바탕으로 매끄럽게 연결되는 HTML 문서를 만들 수 있을 것이며, 사이트 내비게이션과 메뉴도 만들 수 있을 것입니다.

연습문제

  • 다음 링크에서 잘못된 점을 말해 보십시오: <a href=”report.pdf” title=”report as PDF, 2.3MB”>get our latest report</a>?
  • 링크에서 title 속성은 무엇이며 써야 하는 이유는 무엇입니까?
  • 링크의 관계, 그리고 링크와 앵커의 연결에 대해 이야기했습니다. 다른 문서와의 연관관계를 설명하는 속성이 있을까요?
  • 페이지의 한참 아래쪽으로 사용자를 이동시키는 링크를 만들려면 어떻게 해야 합니까? 그렇게 하기 전에 먼저 확실히 해야 하는 점은 무엇입니까?
이 글과 비슷한 종류의 글은 'HTML' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.