공부 참고 : http://tcpschool.com/html/html_basic_links
▶ 링크
▣ HTML 링크(link)
- 웹 페이지에서 다른 페이지나 사이트로 연결되는 수많은 하이퍼링크가 존재.
- 이러한 하이퍼 링크를 간단히 링크(link)로 부름.
- HTML에서는 <a> 태그로 표현. (<a>태그는 텍스트나, 단락, 이미지 등 다양한 HTML 요소에 사용가능)
- 문법 : <a href="링크주소">html 링크</a>
링크 클릭하세여~
- 결과 화면
링크 클릭하세여~
▣ target 속성
- <a>태그의 target 속성은 링크로 연결된 문서를 어디에서 열지 명시.
target 속성값 |
설명 |
_blank |
링크로 연결된 문서를 새 창이나 새탭에서 연다 |
_self |
링크로 연결된 문서를 현재 프레임에서 연다(기본 설정) |
_parent |
링크로 연결된 문서를 부모 프레임에서 연다 |
_top |
링크로 연결된 문서를 현재 창의 가장 상위 프레임에서 연다 |
프레임 이름 |
링크로 연결된 문서를 지정된 프레임에서 연다 |
- 예제
balnk
self
parent
top
myframe
- 결과 화면
balnk
self
parent
top
myframe
▣ 링크의 상태
- 다음과 같이 4가지로 구분 가능.
1. link : 아직 한 번도 방문한 적 없는 상태(기본설정)
2. visited : 한 번이라도 방문한 적이 있는 상태
3. hover : 링크 위에 마우스를 올려놓은 상태
4. active : 마우스로 누르고 있는 상태
- 기본적인 상태
☞ 기본적으로 링크가 걸린 텍스트는 밑줄에, 텍스트 색상이 파란색으로 변경됩니다.
☞ visited 상태의 링크는 밑줄에, 텍스트 색상이 보라색으로 변경됩니다.
☞ active 상태의 링크는 밑줄에, 텍스트 색상이 빨간색으로 변경됩니다.
- 예제
<head>
<meta charset="UTF-8">
<title>HTML Links</title>
<style>
a:link { color: teal; }
a:visited { color: maroon; text-decoration: none }
a:hover { color: yellow; text-decoration: none }
a:active { color: red; text-decoration: none }
</style>
</head>
<body>
<h1>링크의 상태</h1>
<h2><a href="/html/intro">링크의 상태에 따라 스타일을 다르게 설정합니다!</a></h2>
</body>
▣ 페이지 책갈피
- <a> 태그의 name 속성을 이용하면 책갈피를 만들 수 있음.
- 책갈피를 통해 가고 싶은 위치에 <a>태그 만들고 name 속성을 작성.
- name 속성값을 이용하여 다른 <a>태그에서 링크를 걸면 됨.
- 예제
제목 3으로 갑시다!!!
...제목 3
'WEB > HTML' 카테고리의 다른 글
| [HTML 기본 요소] 테이블 (0) | 2017.06.22 |
|---|---|
| [HTML 기본 요소] 이미지 (0) | 2017.06.22 |
| [HTML 기본 요소] 배경 (0) | 2017.06.22 |
| [HTML 기본 요소] 색 (0) | 2017.06.21 |
| [HTML 기본 요소] 스타일 (0) | 2017.06.21 |
