반응형
1. <a>태그란 무엇인가?
-<a>...</a>는 anchor(닻) 의 약자로, url 링크로 연결할 때 쓰인다.
2. <a>태그 속성 종류
-href : 원하는 url로 연결되도록 지정할 수 있다.
-target : 링크 클릭 시 창을 어떤 방식으로 열지 설정할 수 있다.
-title : 링크 위로 마우스 커서를 올릴 시 설명할 말을 설정할 수 있다.
1) href 속성
>절대경로 : 웹페이지 주소
|
1
|
<a href="https://www.naver.com"> 네이버로 </a>
|
cs |
>상대경로 : 프로젝트 내 경로
|
1
|
<a href="board/list"> 게시판 </a>
|
cs |
>element id를 이용한 url : 같은 문서 내에서 가리키는 id
|
1
2
3
4
5
|
<div id="#first_top"> 문단1 </div>
<div id="#second_top"> 문단2 </div>
<a href="#first_top"> 첫 번째 문단으로 </a>
<a href="#second_top"> 두 번째 문단으로 </a>
|
cs |
2) target 속성
>_blank : 링크 클릭 시 새창에서 열린다.
|
1
|
<a href="https://www.naver.com" target="_blank"> 네이버로 </a>
|
cs |
>_self : 링크를 클릭한 창에서 설정된 링크로 이동한다.
3. <a>태그 href 속성 사용 예시
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>url 링크 태그에 대해 알아보자</title>
</head>
<body>
<div>
<p> 특수 소스가 들어간, 한번 먹으면 매일매일 생각나는 김피탕을 판매합니다.</p>
<p> 1인당 1 주문 가능합니다.</p>
<p> 네이버에서 "어떡하지 김피탕"을 검색해주세요.</p>
<a href="https://www.naver.com" target="_self">네이버로 가기</a>
</div>
</body>
</html>
|
cs |
4. <a>...</a> 태그 사용 결과
반응형
'Programming Language > HTML' 카테고리의 다른 글
| [HTML] 이미지에 링크 삽입하기(이미지 태그에 링크 삽입하기) (1) | 2022.12.07 |
|---|---|
| [HTML] <img> 태그란? (image) (0) | 2022.12.07 |
| [HTML] <h> 태그란? (heading) (0) | 2022.01.11 |
| [HTML] <p> 태그란? (paragraph) (0) | 2022.01.11 |
| [HTML] html이란? (html 개념 및 기본 구조) (0) | 2022.01.11 |
댓글