HTML에서 하이퍼링크를 만드는 방법

웹 페이지를 만들 때 다른 웹 페이지나 웹 사이트를 참조할 수 있습니다. 예를 들어, 블로그를 만들고 관련성이 있다고 생각되는 기사에 링크하려고 할 수 있습니다.

하이퍼링크 , 또는 링크는 한 웹 페이지를 다른 웹 페이지에 연결하고 사용자가 여러 웹 페이지 사이를 빠르게 이동할 수 있도록 하는 데 사용됩니다. 하이퍼링크 자신의 사이트에 있는 다른 페이지나 다른 웹사이트에 있는 페이지에 링크하는 데 사용할 수 있습니다.

이 가이드에서는 HTML 하이퍼링크의 기본 사항을 설명합니다. 링크 대상을 설정하는 방법, 책갈피에 대한 앵커를 만드는 방법, 이메일 주소 및 웹 요소에 연결하는 방법에 대해 설명합니다.

• HTML 하이퍼링크
• HTML 하이퍼링크 태그 유형
• 하이퍼링크 HTML:대상
• 하이퍼링크 HTML:북마크 앵커
• HTML 앵커 태그
• HTML 앵커 태그 예
• 결론

HTML 하이퍼링크

<a href="your_url">This text will go to a URL.</a>

태그 사이의 텍스트는 시작 태그에서 지정한 URL로 연결됩니다. href를 사용합니다. 속성을 사용하여 URL의 대상을 선택합니다. https://www.careerkarma.com과 같은 절대 URL 또는 절대 링크일 수 있습니다. 또는 당사 사이트의 특정 위치에 대한 URL입니다.

다음은 Career Karma 홈페이지의 웹 주소로 연결되는 링크의 예입니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

<a href="https://www.careerkarma.com">Career Karma</a>

HTML 하이퍼링크 태그 유형

브라우저에 나타날 수 있는 링크에는 세 가지 유형이 있습니다. 다음과 같습니다.

• 방문하지 않은 링크 , 파란색으로 표시됨
• 방문한 링크 , 보라색으로 표시됨
• 활성 링크 , 빨간색으로 표시됨

일부 웹사이트는 이러한 색상을 덮어써서 다르게 표시되지만 HTML에서 스타일을 지정할 수 있는 주요 유형의 링크입니다. .

하이퍼링크 HTML:대상

링크를 여는 방법을 변경할 수 있습니다. 예를 들어 사용자 웹 브라우저의 새 탭에서 링크를 열려면 링크가 필요합니다. 이렇게 하면 사용자가 현재 보고 있는 웹 페이지에서 자신의 위치를 ​​잃지 않도록 할 수 있습니다.

링크 targetHTML은 속성이 들어옵니다. 대상 링크를 사용하여 속성을 사용하여 연결한 리소스를 브라우저에서 열어야 하는 위치를 지정할 수 있습니다.

다음과 같은 네 가지 유형의 대상을 사용할 수 있습니다.

• _자신 :동일한 창과 탭에서 웹 리소스를 방문합니다. 이것은 HTML에서 사용되는 기본 대상입니다. 하이퍼링크.
• _부모 :상위 창에서 웹 리소스를 방문합니다.
• _공백 :새 창이나 탭에서 웹 리소스를 방문합니다.
• _상단 :전체 브라우저 창에서 웹 리소스를 방문합니다.

다음은 작동 중인 이러한 링크 중 일부의 예입니다.

<a href="https://www.careerkarma.com" target="_self">This link will open in this tab.</a>
<a href="https://www.careerkarma.com" target="_parent">This link will open a parent window.</a>
<a href="https://www.careerkarma.com" target="_blank">This link will open in a new tab.</a>
<a href="https://www.careerkarma.com" target="_top">This link will open in a full browser window.</a>

하이퍼링크 HTML:북마크 앵커

하이퍼링크 HTML에서 HTML의 특정 부분을 참조할 수도 있습니다. 문서. 이것은 웹 페이지가 길고 사용자를 텍스트의 특정 위치로 안내하려는 경우에 유용합니다.

책갈피 앵커 사용을 시작하기 전에 먼저 사용자가 이동할 요소에 대한 ID 속성을 정의해야 합니다. 다음은 웹 페이지의 제목에 ID 속성을 선언하는 예입니다.

<h3 id="subtitle3">Subtitle 3</h3>

HTML 표제 태그에 ID subtitle3을 지정했습니다. , 그런 다음 하이퍼링크에서 참조하는 데 사용할 수 있습니다. .

다음은 하이퍼링크의 예입니다. 이 제목을 참조하는 항목:

<a href="#subtitle3">Go to Subtitle 3</a>

href에 URL을 지정하는 대신 태그에서 연결하려는 요소의 ID를 지정합니다. 브라우저가 링크된 문서가 웹페이지에 있음을 알 수 있도록 해당 ID(#) 앞에 해시 기호를 추가합니다.

HTML 앵커 태그

HTML 앵커 태그는 태그를 참조합니다. 이 태그는 사용자를 다른 웹 리소스에 연결합니다. "href" 속성은 사용자가 링크를 클릭할 때 이동하게 될 리소스를 정의합니다.

HTML 앵커 태그 예

상대 URL

개발 중인 것과 동일한 HTML 문서의 리소스에 링크하는 경우 상대 URL을 사용할 수 있습니다. 상대 URL은 로컬 링크라고도 하며 "https://www.sitename.com" 구문을 사용하지 않습니다. 대신 상대 URL은 로컬 서버에 있는 특정 웹 리소스의 파일 경로를 가리킵니다.

Career Karma 웹사이트에서 블로그를 가리키는 링크를 생성했다고 가정해 보겠습니다. 절대 URL을 사용하는 대신 로컬 URL을 사용할 수 있습니다. 당사 사이트는 Career Karma 사이트이기 때문입니다. 이 링크를 만드는 데 사용할 코드는 다음과 같습니다.

<a href="/blog">Career Karma blog</a>

Career Karma 블로그 텍스트를 클릭하면 , 우리는 /blog로 전송됩니다. 사이트의 리소스

이메일 주소

앵커 태그를 사용하여 이메일 주소에 연결할 수도 있습니다. 이메일 주소에 대한 링크를 클릭하면 사용자의 기본 이메일 프로그램이 열립니다. 사용자가 지정한 이메일 주소로 메시지를 보낼 것인지 묻는 메시지가 표시됩니다.

이메일 주소에 링크하려면 mailto:프로토콜로 링크를 시작해야 합니다. 다음은 HTML에서 이메일 주소에 연결하는 예입니다.

<a href="mailto:nothing@google.com">Send an email to us!</a>

링크를 클릭하면 이메일 프로그램이 열리고 "nothing@google.com"으로 이메일을 보내도록 요청합니다.

요소에 대한 링크

앵커 태그는 웹 페이지의 요소에 연결할 수 있습니다. 앵커가 가리켜야 하는 요소의 ID를 지정하여 이 링크를 만들 수 있습니다. 사용자를 테스트 제목 제목으로 연결하는 링크를 원한다고 가정해 보겠습니다. 웹 페이지에서. 다음 코드를 사용하여 이 링크를 만들 수 있습니다.

<a href="#test_heading">Jump to Test Heading</a>

<h2 id="test_heading">Test Heading</h2>

링크를 클릭하면 웹 페이지가 test_heading ID를 가진 요소로 스크롤됩니다. .

결론

하이퍼링크 HTML에서 한 웹 페이지나 리소스를 다른 웹 페이지에 연결하는 데 사용할 수 있습니다. 하이퍼링크를 사용할 수 있습니다. 귀하의 사이트 또는 다른 웹사이트의 리소스에 연결합니다. 이 가이드에서는 하이퍼링크 사용 방법을 분류했습니다. HTML에서 문서.

이 모든 정보로 하이퍼링크를 만들 준비가 되었습니다. HTML에서 마스터처럼!

HTML 코딩에 대해 자세히 알아보려면 HTML 학습 방법 가이드를 읽어보세요.