offfff

HTML 링크(HTML Links) 본문

프로그래밍

HTML 링크(HTML Links)

offfff 2016. 9. 2. 09:00

HTML Links


링크(Link)는 대부분의 웹페이지에서 찾아볼 수 있다.

링크는 사용자가 한 페이지에서 다른 페이지로 클릭해서 이동하는걸 가능하게 해준다.




하이퍼링크(HTML Links - Hyperlinks)


HTML 링크는 하이퍼링크이다. 링크를 클릭을 해서 다른 문서로 이동할 수 있다.

링크는 꼭 텍스트만 있는것이 아니라, 이미지나 다른 HTML element도 될 수 있다.




문법(HTML Links - Syntax)


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


<!DOCTYPE html>

<html>

<body>


<p><a href="http://dk-projects.tistory.com">Visit My BLOG</a></p>


</body>

</html>


href 속성은 링크를 클릭했을 때,이동할 페이지의 주소를 적어준다.

링크 텍스트는 보이는 부분으로, 위의 예에서는 Visit My BLOG가 해당된다.

링크 텍스트를 클릭하면, 해당 주소 페이지 화면을 로딩한다.




Local Links


위에서의 예제는 웹사이트를 연결했었다.

아래예제는 상대 URL(relative URL, http://www... 이 없는것)을 사용해서

로컬 링크(같은 웹사이트의 링크)를 정의하는 예제이다.


<!DOCTYPE html>

<html>

<body>


<!--w3schools.com의 html_images.asp로 이동하는 링크-->

<p><a href="html_images.asp">HTML Images</a> is a link to a page on this website.</p>


</body>

</html>




HTML Links - Colors


링크에 마우스 커서를 올리면 두가지 일이 일어난다.


- 마우스 커서가 화살표에서 손가락으로 바뀐다.

- 링크 텍스트의 색깔이 바뀐다.


모든 브라우저에서, 기본적으로 링크는 아래와 같이 보인다


- 방문하지 않은 링크는 밑줄이 있는 파란색 글씨로 표시 됨.

- 방문한 링크는 밑줄이 있는 보라색 글씨로 표시 됨.

- 활성화 된 링크(마우스 커서를 올렸을 때)는 밑줄 있는 빨간색 글씨로 표시 됨.


위와 같은 기본 색상은 스타일을 사용해서 바꿀수도 있다.


<!DOCTYPE html>

<html>

<head>

<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>

</head>

<body>

<p>링크의 기본 색상을 바꿀 수 있습니다.</p>

<a href="html_image.asp" target="_blank">HTML Images</a>

</body>

</html>




HTML Links - The target Attribute


target 속성은 어떤 linked document의 주소를 열 것인지 정의하는 속성이다.

target 속성은 아래 값들 중 하나를 가질 수 있다.


- _blank : 새 창이나 탭에서 링크를 연다

- _self : 기본값, 현재 링크를 클릭한 창에서 링크를 연다

- _parent : parent frame 내에서 링크를 연다

- _top : 최상위 창(프레임 바깥)에서 링크를 연다

- framename : 이름이 정의된 프레임 안에서 링크를 연다


<!DOCTYPE html>

<html>

<body>


<a href="html_image.asp" target="_blank">HTML Images(blank)</a>

<a href="html_image.asp" target="_self">HTML Images(self)</a>


</body>

</html>




HTML Links - Image as Link


이미지를 링크로 사용하는 방법이다.


<!DOCTYPE html>

<html>

<body>


<a href="default.asp" target="_blank">

<img src="picture.gif" alt="HTML image" style="width:42px;height:42px;border:0;">

</a>


</body>

</html>


IE9 이하에서는 이미지를 링크로 잡으면 테두리를 그리기 때문에,
img에서 style속성에 border 값을 0으로 주어 테두리를 없앤다.



HTML Links - Create a Bookmark


HTML 북마크는 웹페이지의 특정 부분으로 이동할 수 있게 해준다.

북마크는 웹페이지가 매우 길 경우에 유용하다.

북마크를 만드려면, 먼저 id를 생성하고 거기에 링크를 단다.

링크를 클릭하면, 해당 북마크로 스크롤해서 이동하게 된다.


<!DOCTYPE html>

<html>

<body>


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


<h2>chap 1</h2>

<p> 챕터 1 입니다.....</p>


<h2>chap 2</h2>

<p> 챕터 2 입니다.....</p>


<h2>chap 3</h2>

<p> 챕터 3 입니다.....</p>


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

<p> 챕터 4 입니다.....</p>


<h2>chap 5</h2>

<p> 챕터 5 입니다.....</p>


<h2>chap 6</h2>

<p> 챕터 6 입니다.....</p>


<h2>chap 7</h2>

<p> 챕터 7 입니다.....</p>


<h2>chap 8</h2>

<p> 챕터 8 입니다.....</p>


<h2>chap 9</h2>

<p> 챕터 9 입니다.....</p>


<h2>chap 10</h2>

<p> 챕터 104 입니다.....</p>


</body>

</html>


만약 다른 페이지의 북마크로 이동하려면 아래와 같이 링크와 id를 함께 써준다.


<a href="html_tip.html#tip5">Visit Tip5</a>




아래 링크를 참조하여 번역 및 수정 함

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

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML 표(HTML Tables)  (0) 2016.09.04
HTML 이미지(HTML Images)  (0) 2016.09.03
HTML CSS  (0) 2016.09.01
HTML 색 정의(HTML Colors)  (0) 2016.08.31
HTML코멘트(HTML Comments)  (0) 2016.08.30
'프로그래밍' Related Articles more