HTML
앵커 및 하이퍼 링크

소개

통사론

• <a href="URL or anchor">Link Text</a>

매개 변수

다른 사이트 링크

이것은의 기본적인 사용이다 <a> (A nchor 요소) 요소 :

<a href="http://example.com/">Link to example.com</a>

앵커 텍스트 "link to example.com"을 사용하여 href (하이퍼 텍스트 참조) 속성에 지정된 URL http://example.com/ 하이퍼 링크를 만듭니다. 다음과 같이 보일 것입니다 :

example.com에 링크

이 링크가 외부 웹 사이트로 연결된다는 것을 나타 내기 위해 external 링크 유형을 사용할 수 있습니다.

<a href="http://example.com/" rel="external">example site</a>

HTTP 이외의 프로토콜을 사용하는 사이트에 연결할 수 있습니다. 예를 들어, FTP 사이트에 링크하려면,

<a href="ftp://example.com/">This could be a link to a FTP site</a>

이 경우 차이점은이 앵커 태그가 HTTP (Hypertext Transfer Protocol) 대신 FTP (File Transfer Protocol)를 사용하여 사용자의 브라우저가 example.com 연결하도록 요청한다는 것입니다.

FTP 사이트 링크 일 수 있습니다.

새 탭 / 창에서 링크 열기

<a href="example.com" target="_blank">Text Here</a>

target 속성은 링크를 여는 위치를 지정합니다. _blank 로 설정하면 브라우저가 새 탭이나 창 (사용자 기본 설정별로)에서 열리도록 지시합니다.

보안 취약점!

사용 target="_blank" 오프닝 사이트에게 부분적인 액세스 제공 window.opener 해당 페이지에 다음 액세스를 허용하고 변경 자바 스크립트를 통해 객체, window.opener.location 재 잠재적으로 악성 코드 또는 피싱 사이트에 사용자를 페이지의를하고 있습니다.

제어하지 않는 페이지에 이것을 사용할 때마다 링크에 rel="noopener" 를 추가하여 window.opener 객체가 요청과 함께 보내지지 않도록하십시오.

현재 Firefox는 noopener 지원하지 않으므로 최대 효과를 rel="noopener noreferrer" 를 rel="noopener noreferrer" 합니다.

앵커 링크

앵커를 사용하여 HTML 페이지의 특정 태그로 이동할 수 있습니다. <a> 태그는 id 속성이있는 요소를 가리킬 수 있습니다. ID에 대한 자세한 내용 은 클래스 및 ID에 대한 설명서를 참조 하십시오. 앵커는 주로 페이지의 하위 섹션으로 이동하는 데 사용되며 헤더 태그와 함께 사용됩니다.

여러 주제에 대한 페이지 ( page1.html )를 작성했다고 가정 해보십시오.

<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>

여러 섹션이 있으면 페이지 상단에 특정 섹션에 대한 빠른 링크 (또는 책갈피)가있는 목차를 만들 수 있습니다.

주제에 id 속성을 주면 해당 항목에 연결할 수 있습니다

<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>

이제 목차에서 앵커를 사용할 수 있습니다.

<h1>Table of Contents</h1>
    <a href='#Topic1'>Click to jump to the First Topic</a>
    <a href='#Topic2'>Click to jump to the Second Topic</a>

이러한 앵커는 웹 페이지 ( page1.html )에도 첨부됩니다. 따라서 페이지 와 앵커 이름을 참조하여 한 페이지에서 다른 페이지로 링크 할 수 있습니다.

 Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for supporting information.

JavaScript를 실행하는 링크

javascript: 프로토콜을 사용하여 일반 링크로 열기보다는 JavaScript로 텍스트를 실행하기 만하면됩니다.

<a href="javascript:myFunction();">Run Code</a>

onclick 속성을 사용하여 동일한 결과를 얻을 수도 있습니다.

<a href="#" onclick="myFunction(); return false;">Run Code</a>

return false; # 대한 링크를 클릭하면 페이지가 맨 위로 스크롤되지 않도록해야합니다. 이전 코드로 실행하려는 모든 코드를 포함시켜야합니다. 반환하면 코드가 더 이상 실행되지 않습니다.

또한 주목할만한 것은 느낌표를 포함 할 수 있다는 것입니다 ! 페이지가 상단으로 스크롤되는 것을 방지하기 위해 해시 태그 뒤에 이는 잘못된 슬러그가 있으면 링크가 페이지의 아무 곳이나 스크롤하지 못하기 때문에 참조하는 요소 ( id="!" 요소)를 찾을 수 없기 때문에 작동합니다. 동일한 효과를 내기 위해 잘못된 슬러그 (예 : #scrollsNowhere )를 사용할 수도 있습니다. 이 경우 return false; 필수 사항은 아닙니다 :

<a href="#!" onclick="myFunction();">Run Code</a>

이 중 어느 것을 사용해야합니까?

대답은없고 거의 확실하다. 이와 같은 요소로 자바 스크립트를 인라인으로 실행하는 것은 상당히 나쁜 습관입니다. 페이지의 요소를 찾고 대신 함수를 바인드하는 순수한 JavaScript 솔루션을 사용해보십시오. 이벤트 듣기

또한이 요소가 실제로 링크가 아닌 버튼 인지 고려 하십시오 . 그렇다면 <button> 을 사용해야합니다.

같은 사이트에있는 페이지로 연결

상대 경로 를 사용하여 동일한 웹 사이트의 페이지에 연결할 수 있습니다.

<a href="/example">Text Here</a>

위의 예는 서버의 루트 디렉토리 ( / )에있는 파일 example 로 이동합니다.

이 링크가 http://example.com 에있는 경우 다음 두 링크는 ​​사용자를 동일한 위치로 이동시킵니다.

<a href="/page">Text Here</a>
<a href="http://example.com/page">Text Here</a>

위의 두 가지 모두 example.com 의 루트 디렉토리에있는 page 파일로 이동합니다.

이메일 클라이언트를 실행하는 링크

기본 사용법

href -attribute의 값이 mailto: 시작되면 클릭시 전자 메일 클라이언트를 열려고 시도합니다.

<a href="mailto:[email protected]">Send email</a>

이렇게하면 이메일 주소 [email protected] 이 새로 생성 된 이메일의 수신자로 지정됩니다.

참조 및 숨은 참조

다음 구문을 사용하여 참조 또는 숨은 참조 수신자의 주소를 추가 할 수도 있습니다.

<a href="mailto:[email protected][email protected]&[email protected]">Send email</a>

제목 및 본문 텍스트

제목과 본문에 새 전자 메일을 채울 수 있습니다.

<a href="mailto:[email protected]?subject=Example+subject&body=Message+text">Send email</a>

이러한 값은 URL로 인코딩 되어야합니다.

mailto: 가있는 링크를 클릭하면 운영 체제에서 지정한 기본 전자 메일 클라이언트가 열리므로 사용하려는 클라이언트를 선택하라는 메시지가 나타납니다. 수신자 주소 뒤에 지정된 모든 옵션이 모든 이메일 클라이언트에서 지원되는 것은 아닙니다.

번호를 다이얼하는 링크

href -attribute의 값이 tel: 시작하면 장치를 클릭 할 때 tel: 걸립니다. 이것은 휴대 기기 또는 Skype 또는 FaceTime과 같은 소프트웨어를 실행하는 컴퓨터 / 태블릿에서 작동하며 전화를 걸 수 있습니다.

<a href="tel:11234567890">Call us</a>

대부분의 장치 및 프로그램은 사용자에게 전화를 걸 번호를 확인하도록합니다.