링크

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

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

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

href 속성

필수는 아니지만 거의 모든 <a> 태그에서 href 속성을 찾을 수 있습니다. 하이퍼링크의 주소를 제공하면 <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>

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

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

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

MLW는 상당히 긴 문서입니다. 스크롤을 없애려면 #교사 섹션 하단에서 상단에 링크를 다시 추가하면 됩니다.

<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가 설치되어 있다면 열 수 있습니다.

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

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

다운로드 가능한 리소스

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

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

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

다운로드 가능한 리소스에 연결하려면 href 속성 값으로 애셋의 URL을 포함하고, 사용자의 파일 시스템에서 download 속성 값으로 사용할 수 있는 추천 파일 이름을 포함합니다.

탐색 컨텍스트

target 속성을 사용하면 링크 탐색 (및 양식 제출)을 위한 탐색 컨텍스트를 정의할 수 있습니다. 대소문자를 구분하지 않고 밑줄이 붙은 키워드 4개가 <base> 요소와 함께 논의되었습니다. 여기에는 현재 창인 기본 _self, 새 탭에서 링크를 여는 _blank, 현재 링크가 객체 또는 iframe에 중첩되어 있는 경우 상위 요소인 _parent, 현재 링크가 깊이 중첩된 경우 특히 유용한 최상위 상위 항목인 _top가 포함됩니다. 링크가 중첩되지 않은 경우 _top 및 _parent는 _self와 동일합니다. target 속성은 다음 4가지 핵심 용어로 제한되지 않으며 모든 용어를 사용할 수 있습니다.

모든 탐색 컨텍스트(기본적으로 모든 브라우저 탭에는 탐색 컨텍스트 이름이 있습니다.) 링크는 현재 탭, 이름이 지정되지 않은 새 탭 또는 이름이 지정된 새 탭 또는 기존에 이름이 지정된 탭에서 링크를 열 수 있습니다. 기본적으로 이름은 빈 문자열입니다. 링크를 새 탭에서 열려면 마우스 오른쪽 버튼을 클릭하고 '새 탭에서 열기'를 선택하면 됩니다. 개발자는 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인 POST 요청을 ping 속성 값으로 나열된 URL로 보냅니다.

사용자 환경 팁

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

링크 및 자바스크립트

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

이 섹션에서는 링크에 관해 모두 알아봤습니다. 다음 섹션에서는 목록에 관해 설명하며, 이러한 목록을 함께 그룹화하여 링크 목록 (탐색이라고도 함)을 만들 수 있도록 학습해야 합니다.

학습 내용 확인하기

링크에 대한 지식을 테스트합니다.