웹 개발/HTML

[HTML] a태그이동, javascript:void(0)?

코딩하는흑구 2019. 3. 29. 22:31

<a> 태그

- Link, 링크 : link, anchor(닻)

- <a></a>

- 클릭하면 미리 지정한 URL로 이동하는 역할

- href ="이동할 url" , reference a hyperlink

- 인라인 태그(<-> 블럭 태그)

- target ="열거형 + 기입형"

a. _self //(default) 기존창에서 이동

b. _top

c. _parent

d. _blank(새창 만들어서 이동)

e. 프레임명


내부링크와 외부링크


- 외부링크

<a href ="http://www.naver.com" target ="_blank">네이버로 이동합니다.(외부링크)</a><br>


- 내부링크

<a href ="ex11_list.htm" target = "_self">11번 예제로 이동합니다.(내부링크)</a><br>

<a href="id">id가 id인 태그로 이동합니다.</a>



브라우저(뷰어)


1. HTML 문서 뷰어

2. 이미지 뷰어

3. Text 문서 뷰어

4. 동영상 뷰어

5. 기타 등등 뷰어


<a href ="http://eurofriends.kr/web/product/big/201506/564_shop1_530953.jpg">아기호랑이</a>

<a href ="주소록">주소록 파일</a> <!-- 텍스트파일(인코딩 맞아야함) -->

<a href ="WebContent.zip">수업자료</a> <!-- 다운로드 -->

<a href="mailto:doqndnffo@gmail.com">홍길동</a>


<a href="javascript:alert('안녕하세연');">안녕하세요.</a>


<!-- 현재 시점에서 링크의 URL을 결정짓지 못하는 경우... 나중에... 특정상황 발생 -->

<a href="?">빈링크</a>

<a href="ex14_link.htm#item3">자바 > 생성자</a>



a태그 내부 이동 사용 예제


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
32
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <h1><a id = "menu">Java</a></h1>
    <ul>
        <li><a href="#item1">클래스</a></li>
        <li><a href="#item2">메소드</a></li>
        <li><a href="#item3">생성자</a></li>
        <li><a href="#item4">인터페이스</a></li>
 
    </ul>
 
    <h2><a id = "item1">클래스</a></h2>
    <p>내용물입니다.내용물입니다.내용물입니다.</p>
    <p align = "right"><a href ="#menu">위로이동</a></p>
    
    
    <h2><a id="item2">메소드</a></h2>
    <p>내용물입니다.내용물입니다.내용물입니다.</p>
<p align = "right"><a href ="#menu">위로이동</a></p>
    <h2><a id ="item3">생성자</a></h2>
    <p>내용물입니다.내용물입니다.내용물입니다.</p>
<p align = "right"><a href ="#menu">위로이동</a></p>
    <h2><a id="item4">인터페이스<a></a></h2>
    <p>내용물입니다.내용물입니다.내용물입니다.</p>
<p align = "right"><a href ="#menu">위로이동</a></p>
</body>
</html>
cs



<a href="javascript:void(0);" >


- a태그의 페이지 이동의 기능은 제거하고 a태그의 모양만을 가져가고 싶을 때 사용한다.