HTML 링크(HTML Links)

Links are found in nearly all web pages. Links allow users to click their way from page to page.

링크는 거의 모든 웹 페이지에서 찾을 수 있습니다. 링크를 통해 사용자는 페이지에서 페이지로 이동할 수 있습니다.

---

HTML Links - Hyperlinks

HTML 링크 - 하이퍼 링크

HTML links are hyperlinks.

HTML 링크는 하이퍼 링크입니다.

You can click on a link and jump to another document.

링크를 클릭하여 다른 문서로 이동할 수 있습니다.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

링크 위에서 마우스를 움직이면 마우스 화살표가 조금 움직입니다.

Note: A link does not have to be text. It can be an image or any other HTML element.

참고 : 링크는 텍스트 일 ​​필요는 없습니다. 이미지 또는 다른 HTML 요소가 될 수 있습니다.

---

HTML Links - Syntax

HTML 링크 - 구문

In HTML, links are defined with the <a> tag:

HTML에서 링크는 다음 <a>태그 로 정의됩니다 .

<a href="url">link text</a>

Example

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Try it Yourself »

The href attribute specifies the destination address (https://www.w3schools.com/html/) of the link.

이 href속성 은 링크 의 대상 주소 ( https://www.w3schools.com/html/ )를 지정합니다 .

The link text is the visible part (Visit our HTML tutorial).

링크 텍스트가 보이는 부분 (우리의 HTML 자습서를 방문)입니다.

Clicking on the link text will send you to the specified address.

링크 텍스트를 클릭하면 지정된 주소로 이동합니다.

Note: Without a forward slash at the end of subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the end of the address, and then create a new request.

참고 : 하위 폴더 주소 끝에 슬래시가 없으면 서버에 두 개의 요청을 생성 할 수 있습니다. 많은 서버가 자동으로 슬래시를 주소 끝에 추가 한 다음 새 요청을 만듭니다.

---

Local Links

지역 링크

The example above used an absolute URL (a full web address).

위의 예에서는 절대 URL (전체 웹 주소)을 사용했습니다.

A local link (link to the same web site) is specified with a relative URL (without http://www....).

로컬 링크 (동일한 웹 사이트에 대한 링크)는 상대 URL (http : // www ....없이)으로 지정됩니다.

Example

<a href="html_images.asp">HTML Images</a>

Try it Yourself »

 

---

HTML Link Colors

HTML 링크 색상

By default, a link will appear like this (in all browsers):

기본적으로 링크는 다음과 같이 표시됩니다 (모든 브라우저에서).

An unvisited link is underlined and blue

방문하지 않은 링크에는 밑줄이 그어져 파란색으로 표시됩니다.

A visited link is underlined and purple

방문한 링크에 밑줄이 그어지고 자주색입니다.

An active link is underlined and red

활성 링크에는 밑줄이 그어지고 빨간색으로 표시됩니다.

You can change the default colors, by using CSS:

CSS를 사용하여 기본 색상을 변경할 수 있습니다.

Example

<style>
a:link {
    color: green; 
    background-color: transparent; 
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>

Try it Yourself »

---

HTML Links - The target Attribute

HTML 링크 - 대상 속성

The target attribute specifies where to open the linked document.

target속성은 링크 된 문서를 열 위치를 지정합니다.

The target attribute can have one of the following values:

대상 속성은 다음 값 중 하나를 가질 수 있습니다.

_blank - Opens the linked document in a new window or tab

_blank - 새 창이나 탭에서 링크 된 문서를 엽니다.

_self - Opens the linked document in the same window/tab as it was clicked (this is default)

_self - 클릭 한 것과 동일한 창 / 탭에서 링크 된 문서를 엽니다 (기본값).

_parent - Opens the linked document in the parent frame

_parent - 링크 된 문서를 부모 프레임에 엽니다.

_top - Opens the linked document in the full body of the window

_top - 창 전체에서 링크 된 문서를 엽니다.

framename - Opens the linked document in a named frame

framename - 명명 된 프레임에 링크 된 문서를 엽니다.

This example will open the linked document in a new browser window/tab:

이 예제는 새 브라우저 창 / 탭에서 링크 된 문서를 엽니다.

Example

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Try it Yourself »

Tip : If your webpage is locked in a frame, you can use target="_top" to break out of the frame:

도움말 : 웹 페이지가 프레임에 잠겨 있으면 프레임에서 target="_top"벗어날 수 있습니다 .

Example

<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

Try it Yourself »

---

HTML Links - Image as Link

HTML 링크 - 이미지를 링크로 사용

It is common to use images as links:

이미지를 링크로 사용하는 것이 일반적입니다.

Example

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

Try it Yourself »

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

참고 : border:0; IE9 및 이전 버전에서 이미지 주위에 테두리가 표시되지 않도록 추가되었습니다 (이미지가 링크 인 경우).

---

Link Titles

제목 링크

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

이 title속성은 요소에 대한 추가 정보를 지정합니다. 정보가 마우스 위로 이동하면 툴팁 텍스트로 표시됩니다.

Example

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

Try it Yourself »

---

HTML Links - Create a Bookmark

HTML 링크 - 북마크 만들기

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

HTML 책갈피는 독자가 웹 페이지의 특정 부분으로 이동할 수있게하는 데 사용됩니다.

Bookmarks can be useful if your webpage is very long.

웹 페이지가 너무 길면 책갈피가 유용 할 수 있습니다.

To make a bookmark, you must first create the bookmark, and then add a link to it.

책갈피를 만들려면 먼저 책갈피를 만든 다음 책갈피를 추가해야합니다.

When the link is clicked, the page will scroll to the location with the bookmark.

링크를 클릭하면 페이지가 책갈피가있는 위치로 스크롤됩니다.

Example

First, create a bookmark with the id attribute:

먼저 id속성이 있는 책갈피를 만듭니다 .

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

그런 다음 동일한 페이지 내에서 북마크에 대한 링크를 추가하십시오 ( "4 장으로 이동").

<a href="#C4">Jump to Chapter 4</a>

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

또는 다른 페이지에서 북마크 ( "4 장으로 이동")에 대한 링크를 추가하십시오.

Example

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Try it Yourself »

---

External Paths

외부 경로

External pages can be referenced with a full URL or with a path relative to the current web page.

외부 페이지는 전체 URL 또는 현재 웹 페이지와 관련된 경로로 참조 할 수 있습니다.

This example uses a full URL to link to a web page:

이 예에서는 전체 URL을 사용하여 웹 페이지에 연결합니다.

Example

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

Try it Yourself »

This example links to a page located in the html folder on the current web site:

이 예제는 현재 웹 사이트의 html 폴더에있는 페이지로 연결됩니다.

Example

<a href="/html/default.asp">HTML tutorial</a>

Try it Yourself »

This example links to a page located in the same folder as the current page:

이 예는 현재 페이지와 같은 폴더에있는 페이지로 연결됩니다.

Example

<a href="default.asp">HTML tutorial</a>

Try it Yourself »

You can read more about file paths in the chapter HTML File Paths.

HTML 파일 경로 장에서 파일 경로에 대한 자세한 내용을 볼 수 있습니다 .

---

Chapter Summary

Use the <a> element to define a link

사용 <a>링크를 정의하는 요소를

Use the href attribute to define the link address

사용 href링크 주소를 정의하는 속성을

Use the target attribute to define where to open the linked document

target속성을 사용하여 링크 된 문서를 열 위치를 정의 하십시오.

Use the <img> element (inside <a>) to use an image as a link

<img>이미지를 링크로 사용하려면 요소 (<a> 내부)를 사용하십시오.

Use the id attribute (id="value") to define bookmarks in a page

페이지에 책갈피를 정의 하려면 id속성 (id = " value ")을 사용하십시오.

Use the href attribute (href="#value") to link to the bookmark

사용 href속성 (HREF = "#의 값을 북마크에 링크")

---

Test Yourself with Exercises!

---

HTML Link Tags

HTML 링크 태그

Tag	Description
<a>	Defines a hyperlink

---

출처 : w3schools