반응형
HTML문서를 작성하여 웹 페이지를 구성할 때, 문자를 클릭했을 때 내가 원하는 페이지로 이동해야 하는 상황이 있다.
이 때, 가장 대표적으로 이용하는 태그를 링크태그 라고 하고 <a></a> 로 사용한다.
링크태그: 현재 페이지에서 다른 페이지로 이동하고자 할 때 하이퍼링크를 사용한다.
간단한 사용방법: <a href="원하는 페이지의 주소">[클릭하기 위한 출력 문자열]</a>
1. <a>태그 사용하기
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>블로그 포스트</title>
</head>
<body>
<a href="http://www.naver.com">네이버로 이동하기</a>
</body>
</html>
|
위와 같이 <a>태그 안에 href속성으로 네이버의 주소를 넣어주고, 출력되는 문자는 "네이버로 이동하기"로 지정했다.
실제 브라우저에서도 정상적으로 링크 연결이 되었다.
2. target 속성
target 속성은 링크를 클릭했을 때, 새로 열리는 창이 어디서 생성될 지를 선택하는 속성이다.
<a target="[속성]"> 형태로 작성하며,
"_blank" : 새로운 윈도우나 새로운 탭에서 열기
"_self" : 현재 위치한 창에서 열기 (default)
"_parent" : 현재 프레임의 부모 프레임에서 오픈
"_top" : 현재 윈도우 전체에서 오픈
3. a태그 스타일
<a>태그는 <style>태그를 이용하여 상황에 따라 글자색 변경이 가능하다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>블로그 포스트</title>
<style>
a:link {color:green; text-decoration: none}
a:visited {color: blue; text-decoration: none;}
a:hover {color: yellow; text-decoration: none;}
a:active {color: cyan; text-decoration: none;}
</style>
</head>
<body>
<a href="http://www.naver.com">네이버로 이동하기</a>
</body>
</html>
|
a:link : 처음 방문 하였을 때
a:visited : 이미 방문한 링크일 때
a:hover : 마우스를 올렸을 때
a:active : 클릭했을 때(누른상태)
각각 위와 같이 상태별로 설정 가능하다.
text-decoration란 링크텍스트에 밑줄을 표시할지 안 할지를 선택하는 속성이다.
반응형
'JS & TS > Frontend' 카테고리의 다른 글
| [HTML] anchor태그, <a>, 페이지 내에서 이동 링크 (0) | 2021.02.04 |
|---|---|
| [HTML] HTML의 요소 (0) | 2021.02.03 |
| [HTML] 테이블, table (0) | 2021.02.03 |
| 3. HTML 태그의 종류와 이용방법(List 태그, Divisioin, 특수문자) (0) | 2021.01.19 |
| 2. 이클립스에서의 서버 설정, HTML 환경, 기본 구성 (0) | 2021.01.19 |
| 1. HTML의 시작, Tomcat설치, 환경설정 (0) | 2021.01.19 |
