HTML - 하이퍼링크 만들기

하이퍼링크 만들기

<a> 요소

기본 링크는 텍스트 또는 기타 콘텐츠를 <a> 요소 안에 래핑하고 웹 주소가 포함된 href (하이퍼텍스트 참조) 속성을 사용하여 생성됩니다.

<p>I'm creating a link to <a href="www.google.com">the Google homepage</a>.</p>

결과는 다음과 같습니다.

에 대한 링크를 만들고 있습니다.
the Google homepage .

title 속성
제목에는 페이지에 포함된 정보의 종류 또는 웹 사이트에서 알아야 할 사항과 같은 링크에 대한 추가 정보가 포함됩니다. 링크 위로 마우스를 가져가면 제목이 표시됩니다.

  <p>
    I'm creating a link to
    <a href="www.google.com" title="The best place for searching information"
      >the Google homepage</a
    >.
  </p>

<p>I'm creating a link to <a href="www.google.com" title="The best place for searching information">the Google homepage</a>.</p>

download 속성
브라우저에서 열지 않고 다운로드할 리소스에 연결하는 경우 download 속성을 사용하여 기본 저장 파일 이름을 제공할 수 있습니다. 다음은 최신 Windows 버전의 Firefox에 대한 다운로드 링크가 있는 예입니다.

  <a
    href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
    download="firefox-latest-64bit-installer.exe"
  >
    Download Latest Firefox for Windows (64-bit) (English, US)
  </a>

결과는 다음과 같습니다.
Download Latest Firefox for Windows (64-bit) (English, US)

이메일 링크
클릭하면 리소스나 페이지에 연결하는 대신 새 발신 이메일 메시지를 여는 링크나 버튼을 만들 수 있습니다. 이것은 <a> 요소와 mailto: URL 체계를 사용하여 수행됩니다. 가장 기본적이고 일반적으로 사용되는 형식의 mailto: 링크는 의도한 수신자의 이메일 주소를 나타냅니다.

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

그러면 다음과 같은 링크가 생성됩니다. Send email to nowhere
실제로 이메일 주소는 선택 사항입니다. 생략하고 href가 "mailto:"인 경우 대상 주소 없이 사용자의 이메일 클라이언트에서 새 발신 이메일 창이 열립니다.
세부 사항 지정
이메일 주소 외에도 다른 정보를 제공할 수 있습니다. 가장 일반적으로 사용되는 것은 "subject", "cc"및 "body"입니다.

  <a
    href="mailto:[email protected][email protected]&[email protected]&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"
  >
    Send mail with cc, bcc, subject and body
  </a>

%20는 공간을 나타냅니다.

문서 조각

문서 맨 위가 아니라 a document fragment 로 알려진 HTML 문서의 특정 부분에 연결할 수 있습니다. 이렇게 하려면 먼저 연결하려는 요소에 id 속성을 할당해야 합니다. 해당 특정 id 에 연결하려면 URL 끝에 해시 기호( # )를 앞에 추가해야 합니다.

<h1 id="h1">I am h1</h1>
<a href="#h1">Heading to h1</a>