13.HTML Links

 

링크는 거의 모든 웹 페이지에서 찾을 수 있습니다.

링크를 통해 사용자는 페이지에서 페이지로 이동할 수 있습니다.

 

 

---

HTML 링크 - 하이퍼링크

---

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

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

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

 

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

 

 

HTML 링크 - 구문

---

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

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

 

See the Pen 1.HTML Links - Syntax by heunho (@heunho) on CodePen.

 

 

 

 

 

 

 

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

링크 텍스트는 보이는 부분입니다. (HTML 자습서 참조).

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

 

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

 

 

Local 링크 (지역 링크)

---

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

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

 

See the Pen 02.Local Links by heunho (@heunho) on CodePen.

 

 

 

 

 

 

 

해당 예제에서 html_images.asp 파일은 서버에 없기 때문에 없는 페이지로 출력됩니다. 실제로 html_images.asp 파일이 있다면 있는 페이지로 인식이 될 것입니다.

 

 

HTML 링크 색상

---

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

 

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

방문한 링크는 밑줄이 그어지고 자주색으로 표시됩니다.

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

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

 

See the Pen 03.HTML Link Colors by heunho (@heunho) on CodePen.

 

 

 

 

 

 

 

링크는 CSS를 사용하여 버튼으로 표현할 수 있습니다.

 

See the Pen 03.HTML Link Colors2 by heunho (@heunho) on CodePen.

 

 

 

 

 

 

 

HTML 링크 - target 속성

---

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

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

_blank	링크 된 문서를 새 창이나 탭에서 엽니다.
_self	클릭 한 것과 동일한 창 / 탭에서 링크 된 문서를 엽니다 (default)
_parent	링크 된 문서를 부모 프레임에 엽니다.
_top	링크 된 문서를 창 전체에서 엽니다.
framename	명명 된 프레임에 링크 된 문서를 엽니다.

 

해당 예제는 새 브라우저 창 / 탭에서 링크 된 문서를 열게 되어있습니다. (_blank)

 

See the Pen 04.HTML Links - The target Attribute by heunho (@heunho) on CodePen.

 

 

 

 

 

TIP : 웹 페이지가 프레임에 잠겨 있으면 target="_top"을 사용하여 프레임에서 벗어날 수 있습니다.

 

See the Pen 04.HTML Links - The target Attribute2 by heunho (@heunho) on CodePen.

 

 

 

 

HTML 링크 - 이미지 링크

---

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

 

See the Pen 05.HTML Links - Image as Link by heunho (@heunho) on CodePen.

 

 

 

 

 

참고 : "border:0;"은 IE9 및 이전 버전에서 이미지 주위에 테두리가 표시되지 않도록 하기 위해 추가했습니다. (이미지가 링크 일 경우에 해당)

 

 

링크 제목

---

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

 

See the Pen 06.Link Title by heunho (@heunho) on CodePen.

 

 

 

 

 

 

HTML 링크 - 북마크 만들기

---

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

웹 페이지가 너무 길면 북마크가 유용할 수 있습니다.

북마크를 만들려면 북마크를 만든 다음 해당 북마크에 대한 링크를 추가해야 합니다.

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

 

예제

먼저 id 속성이 있는 요소를 만듭니다.

<h2 id="C4">챕터 4</h2>

그다음 동일한 페이지 내에서 북마크에 대한 링크를 추가합니다. ("챕터 4로 이동");

<a href="#C4">챕터 4로 이동</a>

또는 다른 페이지에서 북마크("챕터 4로 이동")에 대한 링크를 추가합니다.

<a href="html_demo.html#C4">챕터 4로 이동</a>

 

See the Pen 07.HTML Links - Create a Bookmark by heunho (@heunho) on CodePen.

 

 

 

 

 

 

외부 경로

---

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

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

 

See the Pen 08.External Paths by heunho (@heunho) on CodePen.

 

 

 

 

 

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

<a href="/html/default.asp>HTML 튜토리얼</a>

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

<a href="default.asp">HTML 튜토리얼</a>

 

 

단원 요약

---

• <a> 요소를 사용하여 링크 정의
• href 속성을 사용하여 링크 주소를 정의하세요.
• target 속성을 사용하여 링크된 문서를 열 위치를 정의하세요.
• 이미지 링크로 사용하려면 <a> 요소 내부에 <img> 요소를 사용하세요.
• id 속성 (id = "value")을 사용하여 페이지에 북마크를 정의하세요.
• 북마크에 연결하려면 href 속성 (href="#value")을 사용하세요.

 

 

---

틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.

질문도 올려주시면 아는 선에서 답변해드리겠습니다.

---

대부분의 내용의 저작권은 w3schools에 있습니다.

HTML Links