링크

속성 소개에서 속성이 시작 태그에 추가되는 방법을 보여주는 예를 공유했습니다. 이 예에서는 <a> 태그를 사용했지만 요소나 이 예에서 소개된 특정 속성은 설명하지 않았습니다.

href 속성과 함께 <a> 앵커 태그는 하이퍼링크를 만듭니다. 링크는 인터넷의 중추입니다. 첫 번째 웹페이지에는 'W3에 관한 온라인상의 모든 정보는 이 문서에 직간접적으로 연결되어 있습니다.'라는 문구가 포함된 25개의 링크가 있었습니다. W3에 관한 모든 온라인 정보는 이 문서에서 직접 또는 간접적으로 연결되어 있을 가능성이 높습니다.

팀 버너스리가 1991년 8월에 이 첫 번째 설명을 게시한 이후 웹과 <a> 태그의 힘은 엄청나게 커졌습니다. 링크는 두 리소스 간의 연결을 나타내며, 그중 하나는 현재 문서입니다. 링크는 <a>, <area>, <form>, <link>에 의해 생성될 수 있습니다. <link>에 대해 알아봤으며 별도의 섹션에서 양식을 살펴볼 것입니다. 전체 양식 학습 섹션도 있습니다. 이 세션에서는 간단하지 않은 단일 문자 <a> 태그에 대해 알아봅니다.

href 속성

필수는 아니지만 href 속성은 거의 모든 <a> 태그에 있습니다. 하이퍼링크의 주소를 제공하면 <a>가 링크로 바뀝니다. href 속성은 현재 페이지, 사이트 내 다른 페이지 또는 다른 사이트 전체의 위치에 대한 하이퍼링크를 만드는 데 사용됩니다. 파일을 다운로드하거나 특정 주소로 이메일을 전송하도록 코딩할 수도 있으며, 제목과 추천 이메일 본문 콘텐츠를 포함할 수도 있습니다.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

첫 번째 링크에는 절대 URL이 포함되어 있으며, 이 URL은 전 세계 모든 사이트에서 MLW 홈페이지로 이동하는 데 사용할 수 있습니다. 절대 URL에는 프로토콜(이 경우 https://)과 도메인 이름이 포함됩니다. 프로토콜이 //로 작성되면 암시적 프로토콜이며 '현재 사용 중인 것과 동일한 프로토콜을 사용'을 의미합니다.

상대 URL에는 프로토콜이나 도메인 이름이 포함되지 않습니다. 현재 파일을 기준으로 '상대적'입니다. MLW는 단일 페이지 사이트이지만 이 HTML 시리즈에는 여러 섹션이 있습니다. 이 페이지에서 속성 강의로 연결하려면 상대 URL <a href="../attributes/">Attributes</a>을 사용합니다.

두 번째 링크는 링크 프래그먼트 식별자일 뿐이며, 현재 페이지에 id="teachers",가 있는 요소가 있으면 해당 요소로 연결됩니다. 브라우저는 두 개의 '페이지 상단' 링크도 지원합니다. <a href="#top">Top</a> (대소문자 구분 안 함) 또는 <a href="#">Top</a>을 클릭하면 동일한 대소문자 설정으로 ID가 top인 요소가 없는 한 사용자가 페이지 상단으로 돌아갑니다.

MLW는 상당히 긴 문서입니다. 스크롤을 저장하려면 #teachers 섹션 하단에서 상단으로 돌아가는 링크를 추가하면 됩니다.

<a href="#top">Go to top.</a>

세 번째 링크는 두 값을 결합합니다. 절대 URL과 링크 프래그먼트가 포함되어 있습니다. 이렇게 하면 정의된 URL의 섹션(이 경우 MLW 홈페이지의 #teachers 섹션)으로 직접 연결할 수 있습니다. MLW 페이지가 로드되고 브라우저가 HTTP 요청에서 프래그먼트를 전송하지 않고 교사 섹션으로 스크롤됩니다.

href 속성은 mailto: 또는 tel:로 시작하여 이메일을 보내거나 전화를 걸 수 있으며, 링크 처리는 기기, 운영체제, 설치된 애플리케이션에 따라 달라집니다.

mailto 링크에는 이메일 주소가 포함되지 않아도 되지만, 이메일을 미리 채우기 위해 cc, bcc, subject, body 텍스트와 함께 포함될 수 있습니다. 기본적으로 이메일 클라이언트가 열립니다. 이메일 주소 없이 이메일의 제목과 본문을 미리 입력하여 사이트 방문자가 자신의 친구를 초대할 수 있도록 할 수 있습니다. 문서의 바닥글에 있는 링크에는 등록 URL이 포함되어 있습니다.

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

물음표(?)는 mailto: 및 이메일 주소(있는 경우)를 검색어와 구분합니다. 쿼리 내에서 앰퍼샌드 (&)는 필드를 구분하고 등호 (=)는 각 필드 이름을 값과 동일하게 만듭니다. 전체 문자열은 퍼센트 인코딩됩니다. href 값이 인용되지 않거나 값에 따옴표가 포함된 경우 반드시 필요합니다.

사용자가 tel 링크를 클릭하거나 탭하거나 Enter 키를 누를 때 열리는 앱은 운영체제, 설치된 애플리케이션, 사용자가 기기에 설정한 설정에 따라 달라집니다. iPhone에서 FaceTime, 전화 앱 또는 연락처가 열릴 수 있습니다. 설치된 경우 Windows 데스크톱에서 Skype가 열릴 수 있습니다.

블롭, 데이터 URL 등 다른 유형의 URL도 있습니다 (download 속성 토론의 예 참고). 보안 사이트 (https를 통해 제공되는 사이트)의 경우 registerProtocolHandler()를 사용하여 앱별 프로토콜을 만들고 실행할 수 있습니다.

설치된 다른 애플리케이션을 열 수 있는 링크를 포함하는 경우 사용자에게 알리는 것이 좋습니다. 여는 태그와 닫는 태그 사이의 텍스트가 사용자에게 활성화하려는 링크의 유형을 알려야 합니다. [href^="mailto:"], [href^="tel:"], [href$=".pdf"]와 같은 CSS 속성 선택기를 사용하여 애플리케이션 유형별로 스타일을 타겟팅할 수 있습니다.

다운로드 가능한 리소스

href이 다운로드 가능한 리소스를 가리키는 경우 download 속성을 포함해야 합니다. 다운로드 속성 값은 사용자의 로컬 파일 시스템에 저장할 리소스의 제안된 파일 이름입니다. SVG 최적화 도구인 SVGOMG는 download 속성을 사용하여 최적화 도구에서 만드는 다운로드 가능한 blob의 파일 이름을 제안합니다. hal.svg가 최적화되면 SVGOMG의 다운로드 링크 여는 태그는 다음과 비슷합니다.

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

다운로드 가능한 PNG 데이터 URL을 만드는 <canvas> 데모도 있습니다.

다운로드 가능한 리소스에 연결하려면 애셋의 URL을 href 속성의 값으로, 사용자에게 제안되는 파일 이름을 download 속성의 값으로 포함합니다.

탐색 컨텍스트

target 속성을 사용하면 링크 탐색 (및 양식 제출)의 탐색 컨텍스트를 정의할 수 있습니다. 대소문자를 구분하지 않고 밑줄이 앞에 붙는 네 개의 키워드는 <base> 요소와 함께 설명했습니다. 여기에는 다음이 포함됩니다.

• (기본값) _self: 현재 창에서 링크를 엽니다.
• _blank: 새 탭에서 링크를 엽니다.
• _parent: 상위 객체 또는 iframe에서 링크를 엽니다.
• _top: 최상위 상위 요소에서 링크를 엽니다. 이 기능은 링크가 깊이 중첩된 경우에 특히 유용합니다.

링크가 중첩되지 않은 경우 _top와 _parent는 _self와 동일하게 작동합니다. target 속성은 이러한 네 가지 핵심 용어로 제한되지 않으며 어떤 용어든 사용할 수 있습니다.

모든 탐색 컨텍스트 (또는 모든 브라우저 탭)에는 탐색 컨텍스트 이름이 있습니다. 링크는 현재 탭, 이름이 지정되지 않은 새 탭, 이름이 지정된 새 탭 또는 기존 탭에서 열 수 있습니다. 기본적으로 이름은 빈 문자열입니다.

새 탭에서 링크를 열려면 사용자가 마우스 오른쪽 버튼을 클릭하고 '새 탭에서 열기'를 선택하면 됩니다. 개발자는 target="_blank"를 포함하여 이를 강제할 수 있습니다.

target="_blank"가 포함된 링크는 이름이 null인 새 탭에서 열리므로 링크를 클릭할 때마다 이름이 없는 새 탭이 열립니다. 이로 인해 새 탭이 많이 생성될 수 있습니다. 탭이 너무 많습니다. 예를 들어 사용자가 <a href="registration.html" target="_blank">Register Now</a>을 15번 클릭하면 등록 양식이 15개의 별도 탭에서 열립니다. 탭 컨텍스트 이름을 제공하면 이 문제를 해결할 수 있습니다. 대소문자를 구분하는 값(예: <a href="registration.html" target="reg">Register Now</a>)과 함께 target 속성을 포함하면 첫 번째 클릭 시 새 reg 탭에서 등록 양식이 열립니다. 이 링크를 15번 더 클릭하면 추가 탭을 열지 않고 reg 탐색 컨텍스트에서 등록이 새로고침됩니다.

rel 속성은 링크가 생성하는 링크의 종류를 제어하여 현재 문서와 하이퍼링크에 연결된 리소스 간의 관계를 정의합니다. 속성 값은 <a> 태그에서 지원하는 하나 이상의 rel 속성 값의 점수에 대한 공백으로 구분된 목록이어야 합니다.

스파이더가 링크를 따라가지 않도록 하려면 nofollow 키워드를 포함하면 됩니다. external 값을 추가하여 링크가 외부 URL로 연결되고 현재 도메인 내 페이지가 아님을 나타낼 수 있습니다. help 키워드는 하이퍼링크가 컨텍스트에 맞는 도움말을 제공함을 나타냅니다. 이 rel 값이 있는 링크 위로 마우스를 가져가면 일반 포인터 커서가 아닌 도움말 커서가 표시됩니다. 도움말 커서를 가져오기 위해 이 값을 사용하지 마세요. 대신 CSS cursor 속성을 사용하세요. prev 및 next 값은 시리즈의 이전 문서와 다음 문서를 가리키는 링크에 사용할 수 있습니다.

<link rel="alternative">와 마찬가지로 <a rel="alternative">의 의미는 다른 속성에 따라 달라집니다. RSS 피드 대안에는 type="application/rss+xml" 또는 type="application/atom+xml이 포함되고, 대체 형식에는 type 속성이 포함되며, 번역에는 hreflang 속성이 포함됩니다. 시작 태그와 종료 태그 사이의 콘텐츠가 기본 문서 언어와 다른 언어로 되어 있는 경우 lang 속성을 포함합니다. 하이퍼링크된 문서의 언어가 다른 언어인 경우 hreflang 속성을 포함합니다.

이 예에서는 번역된 페이지의 URL을 href, rel="alternate"의 값으로 포함하여 사이트의 대체 버전임을 나타냅니다. hreflang 속성은 번역의 언어를 제공합니다.

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

프랑스어 번역이 PDF인 경우 연결된 리소스의 PDF MIME 유형과 함께 type 속성을 제공할 수 있습니다. MIME 유형은 순전히 권장사항이지만 링크를 통해 다른 형식의 문서가 열린다는 사실을 사용자에게 알리는 것이 좋습니다.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

링크 클릭 추적

사용자 상호작용을 추적하는 한 가지 방법은 링크를 클릭할 때 URL을 핑하는 것입니다. ping 속성이 있는 경우 사용자가 하이퍼링크를 활성화할 때 알림을 받거나 핑을 보내야 하는 보안 URL (https로 시작)의 공백으로 구분된 목록이 포함됩니다. 브라우저는 본문 PING을 사용하여 ping 속성의 값으로 나열된 URL에 POST 요청을 전송합니다.

사용자 환경 팁

• HTML을 작성할 때는 항상 사용자 환경을 고려하세요. 링크는 사용자가 클릭하는 항목을 알 수 있도록 연결된 리소스에 관한 충분한 정보를 제공해야 합니다.
• 텍스트 블록 내에서 링크의 모양은 주변 텍스트와 충분히 달라야 사용자가 다른 콘텐츠에서 링크를 더 쉽게 식별할 수 있습니다. 색상, 밑줄 등 여러 시각적 표시기를 사용합니다. 색상만으로는 충분하지 않습니다.
• 항상 포커스 스타일을 포함하세요. 이렇게 하면 키보드 탐색기가 콘텐츠를 탭할 때 현재 위치를 알 수 있습니다.
• 여는 <a>와 닫는 </a> 사이의 콘텐츠는 링크의 기본 접근성 이름이며 사용자에게 링크의 대상 또는 목적을 알려야 합니다. 링크의 콘텐츠가 이미지인 경우 alt 설명이 접근 가능한 이름입니다. 링크 텍스트와 alt 텍스트는 '여기 클릭' 또는 '자세히 알아보기'보다 설명이 더 많아야 합니다. 대신 링크가 활성화되면 어디로 이동하는지에 관한 정보를 사용자에게 제공해야 합니다. 이는 스크린 리더 사용자 및 검색엔진 결과에 매우 중요합니다.
• 링크 내부에 <button> 또는 <input>와 같은 상호작용 콘텐츠를 포함하지 마세요. <button> 또는 <label> 내에 링크를 중첩하지 마세요. HTML 페이지는 계속 렌더링되지만 포커스 가능하고 클릭 가능한 요소를 대화형 요소 내에 중첩하면 사용자 환경이 좋지 않습니다.
• href 속성이 있으면 <a> 요소에 포커스가 있는 동안 Enter 키를 누르면 활성화됩니다.
• 링크는 HTML에만 국한되지 않습니다. a 요소는 SVG 내에서도 사용할 수 있으며 'href' 또는 'xlink:href' 속성을 사용하여 링크를 형성합니다.

링크 및 JavaScript

links 속성은 href 속성이 있는 a 및 area 요소와 일치하는 HTMLCollection을 반환합니다.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

이 섹션에서는 링크에 대해 자세히 알아봤습니다. 다음 섹션에서는 링크 목록(탐색이라고도 함)을 만드는 데 필요한 목록을 다룹니다.

이해도 확인

링크에 대한 지식을 테스트해 보세요.