본문 바로가기
프로그래밍 놀이터/Web

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

by 돼지왕 왕돼지 2014. 3. 5.
반응형


 [기초강좌] 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/"



다음 강좌 보기 >>








반응형

댓글