[기초강좌] HTML Links - w3schools 번역

[기초강좌] HTML Links - w3schools 번역

w3school 의 강좌 내용을 번역한 글입니다.

원문 : http://www.w3schools.com/html/html_links.asp

Link 는 대부분의 웹 페이지에서 찾아 볼 수 있다. Link 를 클릭하면 현재 페이지에서 다른 페이지로 연결된다.

HTML Hyperlinks ( Links )

HTML <a> tag 는 hyper link 를 정의한다.

Hyperlink ( 또는 link ) 는 단어, 단어의 모음, 또는 이미지를 의미하는데, 이것을 클릭하면 다른 문서로 연결하는 기능을 가지고 있다.

웹 페이지에서 링크 위로 마우스 커서를 이동하면, 화살표 모양의 커서가 작은 손 모양으로 바뀐다.

<a> tag 의 가장 중요한 속성은 href 이다. 이것은 link 의 목적지를 표시한다.

기본적으로 link 는 모든 브라우저에서 다음과 같이 표시된다.

* 방문하지 않은 link 는 파란색 글씨와 밑줄.

* 방문한 link 는 보라색 글씨와 밑줄.

* 활성화된 link 는 빨간색 글씨와 밑줄.

HTML Link Syntax

Link HTML 코드는 간단하다. 다음과 같다.

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

href 속성은 link 의 목적지를 표시한다.

<예제>

<a href="http://www.w3schools.com/">Visit W3Schools</a>

하이퍼링크를 클릭하면 w3school 홈페이지로 이동한다.

Tip : "Link text" 는 꼭 글씨여야 할 필요가 없다. 이미지나 다른 HTML element 어떤것이든 될 수 있다.

HTML Links - The target Attribute

target 속성은 link 된 문서를 어느 곳에 열지를 명시하는 것이다.

아래 예제는 연결된 문서를 새로운 브라우저 윈도우나, 새로운 탭에 열도록 한다.

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

눈으로 직접 보기.

HTML Links - The id Attribute

id 속성은 HTML 문서에서의 책갈피 ( 원문 : Bookmark ) 역할로 사용될 수 있다.

Tip : 책갈피는 특별한 방법으로 표시되지는 않는다. 사용자들에게는 다르게 표시되지 않는다.

<예제>

HTML 문서의 id 를 가진 anchor.

<a id="tips">Useful Tips Section</a>

같은 문서에서 "Useful Tips Section" 을 연결하는 link 생성.

<a href="#tips">Visit the Useful Tips Section</a>

혹은 "Userful Tips Section" 을 다른 page 에서부터 연결하는 link 생성.

<a href="http://www.w3schools.com/html_links.htm#tips">Visit the Useful Tips Section</a>

Basic Notes - Userful Tips

주의 : subfolder 를 연결할 때는 항상 / 를 마지막에 넣어주자. 만약 당신이 다음과 같은 링크를 연결한다면 : href = "http://www.w3schools.com/html", 당신의 브라우저는 서버에 2번의 요청을 보내게 된다. 서버가 먼저 주소의 마자믹에 슬래쉬 (/) 를 붙이고, 그 다음에 다음의 주소로 link 를 한다. href="http://www.w3schools.com/html/"

다음 강좌 보기 >>

#, /, a, bookmark, href, HTML, html5, Hyperlink, ID, Link, Slash, subfolder, Target, target attribute, target 속성, tutorial, w3school, [기초강좌] HTML Links - w3schools 번역, _blank, 기초 강좌, 손 모양, 연결, 책갈피, 커서, 화살표 모양