HTML 링크

개요

이 글에서 HTML 링크로 더 알려진 HTML 앵커, 또는 <a> 요소를 완벽하게 소개한다.

소개

이 글에서 웹-링크 역사상 가장 획기적인 발명 중의 하나를 모두 배울 것이다. 링크를 통해 독자는 다른 문서로 이동할 수 있고, 연결을 해제하고 다시 연결할 필요 없이 서버에서 서버로 점프할 수 있다. 이것들이 처음 발명될 이후 많은 일이 일어났지만 한 가지 만은 변하지 않았다: 링크는 웹 경험의 매우 중요한 부분이다. 이 링크를 사용하는 방법에 따라, 웹 사이트 방문자가 문서 내용 및 기능에 접근하기 쉬울 수도 어려울 수도 있다. 이 글을 숙지하고 나면, 이해하기 쉽고 어떤 환경에서도 작동하는 링크를 만들 수 있다. 또한 링크하는 방법이 검색엔진인기(search engine popularity)에 어떤 영향을 미치는지 알게 될 것이다. 그리고 단어선택(wording) 링크에 관한 팁도 얻을 수 있을 것이다. 진행되는 과정에 따라 참조할 수 있는 여러 파일이 포함된 zip 파일이 있다.

링크란 무엇인가?

링크는 다른 HTML 문서, 텍스트 파일, PDF 파일 등을 가리키는 웹 문서의 일부분이다. 브라우저가 자동으로 연결하는 링크가 있다. <link> 요소를 사용하여 생성된다 (이미 이전 글에서 일부 내용을 보았다 – 그것들은 HTML 문서에 CSS 파일을 가져오는데 사용되었다. 그리고 활성화하기 위하여 사용자가 선택하는 링크가 있다. 이것은 anchors라고 하고 <a> 요소를 사용하여 문서에 추가할 수 있다.

anchor 링크 해부

주위에 <a> 요소를 추가하여, 문서의 인라인 요소를 anchor 링크로 변경시킬 수 있다. 예를 들어, 다음 HTML 문서에서 텍스트 Opera Software는 링크로 변경된다.(linkexample.html).

이 링크로 활성화(마우스, 키보드 또는 목소리로)하는 방문자는 현재 사이트를 떠나 오페라 홈 페이지로 이동하게 된다. 링크 자체에도 변화들이 일어난다. 링크 스타일링에 관해서는 나중에 알아보겠다.

anchor는 여러 속성들을 추가할 수 있다:

  • href — 이것이 가리키는 대상 (외부 파일 또는 anchor ID).
  • id — 링크를 식별하는 고유 ID. 예를 들어, 해당 링크의 스타일을 다른 것과 차별화한다. 또한 id 속성을 사용하여 링크를 페이지 anchor로 만들고, 다른 <a> 요소에서 이곳에 링크할 수 있다.
  • class — 이 링크 및 다른 것(정말로 원하는 경우, 다른 요소)들을 식별하는 class. 예를 들어 스타일을 가지고 있는 페이지의 특정 링크의 스타일만을 바꿀 경우이다.
  • title — 외부 대상에 대한 추가 정보.

먼저 가장 중요한 속성을 알아보고, 방문자가 이해하기 쉽게 할 수 있는 일이 무었인지 논의하자.

href 속성

<a> 요소는 어떤 속성이 설정되는가에 따라 여러 역할을 수행한다. 가장 일반적인 속성이 href 속성이다. 링크가 가리키는 대상을 정의한다. 이 속성은 여러 종류의 값을 가질 수 있다:

  • 같은 폴더(help.html) , 현재폴더와 상대적(예: “../../help/help.html” — 두 개의 점은 “사이트 폴더 구조에서 한 수준 위로 가라”는 것이다)위치 또는 서버 루트의 절대적 위치 (예 “/help/help.html” —주소 앞 쪽에 슬래시가 있으면,주소가 페이지가 있는 컴퓨터의 루트에서 시작한다)에 있는 URL.
  • 모두 다른 서버에 있는 URL (예: http://wait-till-i.com or ftp://ftp.opera.com/ or http://developer.yahoo.com/yui).
  • 조각식별자 또는 앞에 #가 있는 ID 이름 (예 “#menu”). 이것은 같은 문서 내의 목표 지점을 가리킨다.
  • URL과 조각 식별자의 혼합 – href 속성이 URL 다음에 조각 식별자를 가리키게 함으로써, 다른 문서의 한 섹션에 직접 링크할 수 있다 (예 http://dev.opera.com/articles/view/new-structural-elements-in-html5/#aside).

절대적 또는 상대적 URL은 다른 곳을 가리킬 것이기 때문에, 하나의 <a>요소는 하나의 링크롤 만든다.

id 속성으로 페이지 검색 만들기

<a> 요소에 id 속성을 넣어 페이지 anchor를 만들 수 있다. 그러면 다른 링크의 href속성에서 이 ID를 참조하여 연결할 수 있다. 예를 들면:

다음과 같은 방법으로 연결될 수 있다:

그러나 요즘 대부분의 브라우저에서 이에 대한 바로 가기를 작성할 수 있다. 그리고 연결하려는 요소에 직접 ID를 넣을 수 있다. 예를 들면:

이 방법이 훨씬 간단하므로, 우리는 당신이 이 방법을 고수하기를 추천한다.

다음 HTML은 다른 유형의 링크 예제를 보여 준다. (linkexamples.html):

당신의 브라우저에서 이 파일을 연다. 이것을 가지고 선택과 실험을 한다. 첫 번째 목록에서 링크 중 하나를 활성화하면 문서의 해당 섹션으로 이동하고, 브라우저 주소 바의 URL이 변경되고 그 끝에 조각 식별자가 보인다는 사실을 알게 된다. 이것은 방문자가 이 섹션을 즐겨 찾기에 추가할 수 있거나, 또는 다른 사람에게 그들이 찾아갈 곳을 정확하게 보내기 위한 링크를 이 메일로 보낼 수 있다는 의미이다. 요점을 정리하면:

  • anchor 링크는 href 속성 값으로 조각 식별자를 가질 수 있다. – 이 조각 식별자는 #으로 시작해야 한다.
  • 활성화하면, 이 링크는 이 ID 값을 가진 HTML 요소로 점프할 것이다. 각 페이지의 ID는 고유해야 한다.
  • ID는 특정 명명 규칙을 따른다. 가장 중요한 것은 알파벳 문자로 시작하고 공백이 없어야 한다는 점이다.

그것이 예제에서 메뉴와 다른 섹션을 포함하고 있지만, 다른 링크들은 어떤가? 시도를 해보면, 그것들은 다른 목표 지점을 가리킨다는 사실을 알게 될 것이다 – 다른 사이트로 이동하고, 사진을 보여주고, 다른 웹 페이지의 특정 섹션 등을 보여준다 (특정 ID로 점프한다). 그것들 모두 작동이 된다면, 훌륭하다 – 그러나 당신 또는 당신의 브라우저가 이것들을 이해하지 못한다면 어떻게 될까?

무엇을 링크하고 있는지에 대해 모호함이 없어야 한다.

링크에 대해 기억해야 할 가장 중요한 점은 링크는 방문자와 관계에서 상당히 중요한 부분이라는 사실이다. 링크를 제공하고, 링크를 따라가서 훌륭하고 적절한 정보를 얻었을 때 방문자들은 신뢰를 하게 된다. 링크된 대상이 사용할 수 없거나 또는 방문자가 사용할 수 없는 형식이기 때문에 링크가 작동되지 않는다면, 믿음과 신뢰를 잃게 된다. 이런 일이 벌어져서는 안 된다.

title 속성으로 추가 정보를 제공

거의 모든 HTML 요소와 마찬가지로, 추가 정보를 제공하기 위해 <a> 속성에 title 속성을 추가할 수 있다. 방문자가 링크 위에 마우스를 올려 놓으면 소위 툴팁을 표시할 것이다. 이 툴팁은 링크에 관한 사항을 알려준다. 예를 들어 내용을 조금 소개하고 링크된 문서의 위치를 알려줄 수 있다.(titleexample.html):

그러나 방문자가 중요한 정보를 얻기 위해 충분히 인내하고 눈과 손이 일치하는 행동을 할 것이라고 기대할 수 없다. 페이지를 볼 수 없는 시각 장애인은 이 정보를 얻을 가능성이 거의 없다. 스크린 리더가 최종 사용자를 위해 title 속성을 읽는 옵션이 있지만, 기본적으로 이 기능은 꺼져 있다. 이 이유로 링크에 관한 중요한 정보를 title 속성에 사용해서는 안 된다.

중요한 정보로는:

  • PDF 파일, 이미지, 비디오, 사운드 파일 또는 다운로드와 같은 비 HTML 대상에 연결.
  • 현재 사이트를 떠나 다른 서버로 링크 (외부 링크와 내부 링크).
  • 다른 프레임 또는 팝업으로 열릴 문서에 연결.

비 HTML 대상에 연결 — 사람들이 추측하게 하지 말라.

링크를 클릭할 때, 링크가 가리키는 내용으로 브라우저가 무슨 일을 할지 모른다면 매우 짜증날 수 있다. 불행하게도 방문자에게 웹 사이트가 이미지, PDF 파일, 비디오로 링크된다는 경고를 하지 않는 것은 너무나 일반적인 일이다. 특히 비디오는 매우 자주 브라우저 충돌을 일으키는 원인이다. 또한, 대상 파일의 크기가 클(20MB 이상?) 수 있다. 이는 방문자가 브라우저에서 열지 않고 다운로드를 하거나, 또는 연결하지 않을 수 있다는 의미이다.

웹 제품의 가장 큰 성공 요인 중 하나는 사람들이 어떤 행동을 할 때 어떤 일이 벌어질 지를 추측하게 하지 않고, 어떤 효과가 나타난다고 단호하게 알려준다는 것이다. 링크의 경우에, 좌절하게 하지 않는 유일한 방법은 방문자에게 링크되는 대상이 무엇인지를 알려 주는 것이다.(linkingnonhtml.html):

링크된 파일과 특성에 대한 정보를 제공함으로써, 방문자가 특정 브라우저를 설정하거나 또는 소프트웨어를 설치하기를 기대하지 않고, 방문자가 이런 정보들을 가지고 어떤 일을 할지를 결정하게 한다. 적절한 스타일링을 혼합하면, 링크를 직관적이면서 보기 좋게 만들 수 있다. (예: 다르고 쉽게 알아 볼 수 있는 여러 가지 형식의 링크를 제공 – 더 자세한 사항은 Styling lists and links 참조) 안전하기를 원한다면, 도움말 섹션을 제공해서 파일 포맷에 대한 설명과 필요한 소프트웨어를 얻을 수 있는 위치를 알려준다.

외부 링크와 내부 링크

비즈니스 의사 결정자가 가장 두려운 것은 회사 웹 사이트에서 방문자들이 빨리 떠난다는 것이다. 이것이 종종 제 3자 링크를 제공하지 않는 이유이다. (제 3자가 그들에게 직접 링크되는 트래픽을 제공하는 특헤에 대해 돈을 지불하지 않는 한). 이런 판단 오류에 대해 나중에 다루겠다: 지금은 방문자들이 사이트를 떠나지 않게 하는 일이 무엇인지, 그리고 이런 대처방법이 사이트의 성공에 어떤 영향을 미치는지 알아보자.

프레임과 팝업 — 아니다

다른 사이트로 방문자가 떠나는 두려움과 여전히 링크되어 있기를 원하는 마음 때문에, 수 년간 사용성 측면에서 장애가 되었던 발명품이 있다: 프레임과 팝업.

HTML 프레임을 사용한다는 것은, 브라우저에 보여지는 페이지를 여러 개의 문서로 분할한다는 의미이다. 이것은 자신의 서버 또는 제 3자의 서버에서 그 부분을 로드할 때 문서가 같은 곳에 있는 것처럼 보인다는 이점이 있다. 그러나 여기에서 유용성은 끝난다. 프레임은 끔찍한 사용자 경험이고, 실제로 해롭다:

  • 검색 엔진은 전체 페이지를 색인할 수 없다. 그러나 대신 검색 결과에서 문맥 상 이해가 되지 않는 페이지의 일부를 보여줄 수 있다.
  • 방문자가 페이지를 즐겨 찾기에 등록할 수 없다 – 다음에 즐겨 찾기를 열면, 즐겨 찾기를 등록한 페이지가 아닌 프레임의 초기 상태를 보게될 것이다.
  • 보조 기술에 의지하는 방문자는 프레임셋 주변을 검색하기 어렵다.
  • 제 3자 사이트는 프레임셋 안에 보여지는 것을 싫어하고, 당신이 그 사이트를 프레임셋에 끼워 넣으려고 할 때 “framebreaker” 스크립트를 사용하여 프레임셋을 실제 URL로 바꿀 수도 있다. 이 방법으로 소위 “피싱”이라는 범죄를 막을 수 있다. 예를 들어 인터넷 사용자에거 은행처럼 보이는 웹 사이트에 신용카드 정보를 입력하도록 유혹한다

프레임셋 안의 링크는 정확한 프레임을 가리키기 위해 anchor의 target 속성을 사용한다. 프레임셋에 있는 각 프레임은 특정 이름을 가지며, 그 링크를 활성화하면 프레임 안의 href 속성에 정의된 문서가 열린다. 프레임셋을 사용할 수 없다면(예를 들어 방문자가 검색 엔진을 통해 그 링크가 있는 문서를 발견했을 때) 각 링크는 새로운 브라우저에서 열린다.

새로운 브라우저에서 여는 것은 타사 사이트를 링크하는 일반적인 방법이다 – 스크립트된 팝업 창 또는 _blank 값을 가진 target 속성을 사용한다. 최근의 모든 브라우저는 팝업을 차단한다는 사실로, 이 시대에 이 기술에 의존하는 것이 얼마나 안전한지 알 수 있다. 아니다!

한 마디로: 링크를 만들 때, 당신이 무엇을 하고 있는지 확실히 알지 못한다면 target 속성을 사용하지 말라. . 어쨌든 오래된 생각이다 — 요즘의 대부분의 브라우저는 탭 인터페이스를 가지고 있으므로, 사용자는 타사 사이트를 백그라운드로 열어 둔 채 당신의 사이트에 계속 머물러 있을 수 있다. 특정한 상황에서 외부 링크와 내부 링크 사이에 차이를 표시하고 싶을 수도 있지만, 항상 모든 결정은 사용자의 재량에 맡겨야 한다.

발신 링크 및 수신 링크의 장점

경쟁사인 타사 사이트에 링크하면 몇 가지 좋은 점이 있다.

  • 방문자에게 신뢰를 준다 — 당신은 내용의 질에 대해 확신하고 있다. 경쟁사에 뒤쳐져서 부끄럽지 않다.
  • 완전한 서비스를 제공할 기회이다 — 당신이 다루고 있지 않지만, 관심있는 주제를 직접 연구하고 싶은 방문자에게 흥미로울 수 있는 내용, 글 또는 제품 등에 링크할 수 있다.
  • 타사의 오래된 기사를 구축하고,더 나은 기사나 다른 해결책을 제시하고, 링크를 통해 증거로 오래된 기사를 참조함으로써 당신의 주장을 입증할 수 있다.

수신 링크 (타사 사이트에서 당신 사이트를 가리키는 링크)의 유용성에 대한 논쟁은 적다. 정확하고 수준 높은 사이트에서 적절한 키워드로 당신 사이트에 더 자주 링크할수록, 구글 같은 검색엔진에서 당신의 사이트는 높은 순위 차지할 것이다. 물론 그 전에 당신이 다른 사이트에 링크하는 것을 두려워하지 않는다는 사실을 증명해야 한다.

적절한 키워드는 좋은 링크를 만드는 또 다른 매우 중요한 부분이다: 어떻게 키워드를 만들까.

링크 문구 (Link wording)

비 HTML 리소스에 링크하는 방법에 관한 섹션에서 이것을 약간 다루었지만, 링크는 페이지 사본의 일부에 불과할 뿐만 아니라 문서에서 상호작용 요소도 아닌 점을 스스로 상기하는 것이 좋다.

일부 보조 기술은 전체 문서 대신 링크 목록을 제공해서, 방문자들이 그들 방식대로 빨리 검색하여 원하는 것을 찾을 수 있게 한다. 이것은 당신의 링크 텍스트가 문맥 뿐만 아니라 문맥을 벗어나서도 의미가 있어야 한다는 뜻이다. 오페라에서 쉽게 확인할 수 있다. 아무 웹 사이트를 열고, 메뉴에서 Tools > Links 를 선택하거나 키보드로 Ctrl + Shift + L 을 입력한다. 새 탭을 가져와서 문서에 있는 모든 링크와 그것들이 어디를 가리키는지 보여줄 것이다.

또한 다른 대상을 가리키지만 같은 문구를 가지는 링크가 없도록 해야 한다. 대표적인 실수는 “click here” 링크이다, 예를 들어 “최신 버전을 다운로드 하려면 click here”와 같은 문구이다. 무엇을 가리키고 있는지를 설명하는 링크 문구를 사용하는 것이 훨씬 좋다 – “최신 버전을 다운로드하고 직접 사용해 볼 수 있다”의 경우에 “최신 버전을 다운로드 해라”락는 문구로 바꾸어 링크한다.

“more” 링크에도 동일하게 적용된다. 뉴스 사이트에서 제목과 예고 광고 문구 뒤에 “more” 또는 “full story” 링크를 볼 수 있을 것이다. 해결책은 링크된 “more” 이미지를 사용하여 고유한 대체 텍스트를 제공하거나, 또는 “more” 뒤 링크 내부에 span을 추가하고 CSS로 감추는 방법이다.

링크 스타일링

이것은 [CSS section of the course]에서 자세히 다루겠지만, 여기에서는 링크가 어떻게 보이는 지가 매우 중요하다. 그리고 고려해야 할 여러가지 다른 링크 상태가 있다는 사실을 반영하는 것이 좋다. 링크 상태(CSS 가상 선택자와 관련이 있다 – 복잡한 것 같지만, 그렇지 않다)는 다음과 같다:

  • <link> — 기본 상태 — 링크가 문서의 특정 부분에서 보여지는 모습을 정의한다. 기본으로, 방문하지 않은 링크는 파란색이다.
  • <visited> — 이미 방문했던 링크 스타일 (이미 브라우저 캐시에 있을 것이다). 기본으로, 이미 방문했던 링크는 보라색이다.
  • <hover> — 마우스 커서가 링크 위에 놓여져 있을 때의 링크 스타일.
  • <focus> — 다른 제어 방법 (보통 키보드)으로 focus (또는 highlighted)되어 있을 때의 링크 스타일.
  • <active> — 활성화 되어 있을 때의 링크 스타일, 즉 다른 사이트로 연결이 되어 있는 상태이다; 또한 브라우저에서 뒤로 가기를 실행했을 때 문서에서 마지막으로 활성화된 링크의 스타일이다.

HTML5: 블록 수준 링크 방법

HTML4에서 <a> 요소는 인라인 요소 만을 링크로 바꿀 수 있었다. 이것은 대부분의 상황에서 문제가 없었다. 그러나 예를 들어 이미지와 문단을 포함하고 있는 전체 배너 광고를 링크로 바꾸려고 할 때 문제가 되었다. 이 코드를 문제없이 사용하기 위해, 텍스트와 이미지를 다른 조각르로 둘러싸서 별개의 링크를 만든다. 이것은 끔직하게 반복적이고, 보조 기술 사용자들을 혼란스럽게 한다. (“왜 같은 곳으로 이동하기 위해 많은 링크가 있는가?”). 블록 수준 내용 주위에 인라인 요소를 사용하면, CSS를 사용하여 블록 수준과 같이 보여지도록 설정하지 않는 한, 스타일이 이상하게 적용된다. Putting an inline element round a load of block level content also makes styling behave weirdly, unless you set it to display like a block level element using CSS.

HTML5에서 이런 제한사항을 없앴다. 당신이 원하는 양 만큼 많은 내용 주위에 링크를 설정할 수 있게 했다. 적절하게 실행되도록, 현재는 여전히 블록 수준 요소 처럼 작동하도록 링크를 설정해야 한다. 그러나 이 방법은 전 보다 훨씬 더 융통성이 있다. 예제를 보자:

여기에서 제목과 문단 둘 다 <a> 요소로 감싼 것을 볼 수 있다. 이 작업이 정확하게 작동하도록 CSS에 display: block;를 설정하였다. 원하다면 [try the example out yourself], 전체 블록이 클릭할 수 있는 링크 영역의 일부임을 알 수 있을 것이다. 이것이 잘 보이도록 색이 변하는 hover 효과를 추가하였다.

개요

많은 시간을 투입하였지만, 링크가 어떻게 작동하고, 링크가 무슨 일을 하는지 기억하는 것이 중요하다. 당신은 이 기본 동작을 재정의하기 위해 웹 개발자로서 많은 트릭과 기술을 배울 것이다. 잠시 멈추고 당신이 하려고 하는 것이 정말로 필요한 것이지 생각해보기를 바란다.

참고 사항

연습 문제

  • 다음 링크에서 잘못된 것은: <a href="report.pdf" title="report as PDF, 2.3MB">get our latest report</a>?
  • 링크에 있는 target 속성은 무엇 때문에 있고, 이 속성을 잘 사용하는 방법이 있는가?
  • 링크와 anchors 사이의 링크 관계와 연결에 대해 이야기하였다. 문서간의 관계를 설명하는 링크에 대한 속성이 있나요?
  • 방문자가 클릭할 때 페이지 아래 쪽 요소로 이동하는 링크를 어떻게 작성하나? 당신이 사전에 확인할 사항은 무엇인가?

답글 남기기