링크는 웹문서가 다른 문서와 구별되는 가장 큰 특징입니다. 클릭만 되면 연결된 곳으로 즉시 이동해 웹 사용을 더욱 편리하게 해 주기 때문입니다. 단순해 보이는 이 기능에도 여러 속성을 이용해 선택할 수 있는 사항들이 있습니다. 이 기능에도 여러 가지 속성을 사용할 수 있는 사항들이 있습니다.
<a> 태그, href속성-링크 만들기
우리가 흔히 보이는 웹사이트에서 클릭했을 때 다른 페이지로 넘어가는 요소가 이 태그와 속성에 해당됩니다.
이러한 <a> 태그에서 가장 중요한 속성은 바로 링크(link)의 목적지를 가리키는 href 속성입니다.
따라서 href 속성이 없다면, target, download, rel, rev, hreflang, type, referrerpolicy 속성들도 사용할 수 없습니다.
|
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a href="http://naver.com">네이버 사이트로 이동!</a>
</body>
</html>
|
cs |
링크는 모든 브라우저에서 다음과 같은 기본 스타일을 가지게 됩니다
- 아직 방문하지 않은 링크:밑줄, 파란색(blue)
- 방문했던 링크:밑줄, 보라색(purple)
- 활성화된(현재 마우스가 클릭하고 있는) 링크:밑줄, 빨간색(red)
HTML에서 <a>링크에 새롭게 추가된 속성은 다음과 같습니다.
target 속성-새탭에서 링크 열기
<a href="링크"> 속성을 사용한 태그는 클릭할 시 문서가 있던 현재 브라우저 창에서 홈페이지가 나타납니다.
하지만 target속성을 사용하면 현재 화면뿐만 아니라 새로운 화면에서도 링크를 열 수 있습니다.
<예제>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2><a href="http://naver.com" target="_blank">blank</a></h2>
<h2><a href="http://naver.com" target="_self">self</a></h2>
<h2><a href="http://naver.com" target="_parent">parent</a></h2>
<h2><a href="http://naver.com" target="_top">top</a></h2>
<h2><a href="https://www.daum.net/" target="myframe">myframe</a></h2>
<iframe name="myframe" style="width:50%; height: 330px"></iframe>
</body>
</html>
|
cs |
<결과>
한 페이지 안에서 점프하는 앵커 만들기
다른 페이지 말고 한 페이지 내에서도 링크 만들기가 가능합니다.
앵커(anchor)라고 불리는 이 기능은 페이지가 긴 웹 문서에서 특정 요소를 클릭할 시 그 위치로 한 번에 이동하도록 도와주는 역할을 합니다.
앵커를 사용하려면 우선 이동하고 싶은 위치마다 id속성을 이용해 앵커를 만들고 각각 다른 이름을 지정해야 합니다.
이렇게 붙여놓은 앵커 이름들은 마치 링크를 만들 때처럼 <a>태그의 href 속성을 사용해 링크합니다.
다만 앵커 이름 앞에 #을 붙여 앵커를 표시해야 합니다.
|
1
2
|
<태그 id="앵커 이름"> 스트 또는 이미지 </태그>
<a href="#앵커 이름"> 텍스트 또는 이미지 </태그>
|
cs |
앵커 기능은 제이쿼리 모바일을 이용해 모바일 웹사이트나 웹앱을 만들때 자주 사용합니다.
특히 긴 페이지에서 목차를 만들 때도 유용하고, 블로그에서는 ‘댓글 쓰기 바로 가기’ 등에 사용됩니다.
다음은 <a> 태그와 href 속성을 사용해 각 앵커로 연결하는 링크를 만들어 연결한 예제입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<h1>앵커 만들기</h1>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<ul id="menu">
<li><a href="#content1">메뉴1</a></li>
<li><a href="#content2">메뉴2</a></li>
<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
</body>
</html>
|
cs |
<출력 결과>
앵커의 작동원리는 아래와 같습니다.
링크의 상태
HTML링크의 상태는 다음과 같이 네 가지로 구분할 수 있습니다.
해당 요소는 CSS에서 스타일 지정이 가능합니다.
웹브라우저에서 링크가 연결되어 있는 텍스트의 색상은 다음과 같습니다.
- 기본적으로 링크가 걸린 텍스트는 밑줄에, 텍스트 색상이 파란색으로 변경됩니다.
- visited 상태의 링크는 밑줄에, 텍스트 색상이 보라색으로 변경됩니다.
- active 상태의 링크는 밑줄에, 텍스트 색상이 빨간색으로 변경됩니다.
주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 a:hover 뒤에 와야 한다는 것입니다.
따라서, 아래 예제 순서를 그대로 따르는 것이 좋습니다.
|
1
2
3
4
5
6
|
<style>
a:link { color: blue; text-decoration: none; }
a:visited { color: purple; text-decoration: none; }
a:hover { color: red; text-decoration: underline; }
a:active { color: white; background-color: green; }
</style>
|
cs |
해당 예제를 실행시켜 보면 방문하지 않은 링크의 색은 파란색이고 밑줄이 없습니다.
마우스 포인터를 링크 위에 올리면 글자색이 빨간색으로 변하고 밑줄이 생깁니다.
클릭하는 순간 글자색은 흰색으로, 배경은 녹색으로 변합니다.
클릭했던 링크는 보라색에 밑줄 없이 나옵니다.
'HTML' 카테고리의 다른 글
| 테이블 태그 다루기 / <table> (0) | 2020.04.11 |
|---|---|
| 폼 태그 다루기 / <Form> (0) | 2020.03.22 |
| 이미지 태그 다루기 / <img> (0) | 2020.03.22 |
| 목록 태그 다루기 (0) | 2020.03.22 |
| HTML 색 (0) | 2020.03.22 |
