• Q&A
  • 회원가입
  • 로그인

[link] HTML - <a> 태그 ★ - 링크걸기 (= 주소이동 = a태그 = a요소 = 에이태그 = 앵커태그 = 하이퍼링크태그) - (전화링크 + 이메일링크 + 특정지점이동), id속성 vs name속성 차이점

25,610  
목차
  1. <a> 예제 - 링크 걸기
  2. <a> 정의
  3. <a> 구문
  4. <a> 속성값
  5. 절대주소 vs 상대주소
  6. 요소의 (id속성 vs. name속성) 차이점
  7. <a> 예제 - 같은 웹문서 내 특정 위치로 이동 (= 동일문서 특정지점이동, 특정위치이동)
  8. <a> 예제 - 다른 웹문서 특정위치로 이동 (= 다른문서이동, 특정지점이동 특정위치이동)
  9. <a> 예제 - 전화링크
  10. <a> 예제 - 이메일링크
  11. <a> 예제 - 맨위로 이동 링크 (= 탑버튼)
  12. <a> 예제 - 맨위로 이동 링크 작동 금지
  13. <a> 예제 - 부모창으로 띄우기
  14. <a> 예제 - 요소 전체에 링크 걸기
  15. <a> 예제 - 공백 처리 특징
  16. <a> 예제 - 링크 표시 주소와 실제 이동 주소 다르게 하기
  17. <a> 예제 - (상단이동 / 무반응) 설정
  18. target="_blank" 보안 이슈

 

<a> 예제 - 링크 걸기 


<a href="https://homzzang.com">홈짱닷컴</a>
<a href="https://homzzang.com"><img src="이미지주소"></a>
 
 

<a> 정의

 
하이퍼링크 (=다른 웹페이지의 문서로 이동)
또는,
앵커 (=현재 페이지의 다른 위치로 이동) 의미.

※ href (Hyperlink Reference : 연결고리 참조) 
※ hyper 초월한, 저 건너 / 들뜬, 흥분한
 

 
1. 
<a>anchor 의 첫 글자 땀.

2. 
필수속성으로 href (=이동할 다른 웹페이지 주소) 또는 name (또는 id) 사용. 즉, 이동 목적지를 지정하는 속성은 필수.
 
3. 
<a> 태그 걸린 링크 글씨는 기본적으로 브라우저에서 다음과 같음. 
(단, 익스플로러는 다르게 보일 수 있음)

    (1) 아직 방문하지 않은 링크 : 밑줄 있는 파란 글씨
    (2) 이미 방문한 링크 : 밑줄 있는 자줏빛 글씨
    (3) 클릭하는 순간의 링크 : 밑줄 있는 빨간 글씨
 
4. 
download, hreflang, media, rel, target,  type 속성은 href 속성이 존재할 경우에만 사용 가능.

5. 
특별히 띄울 창을 target 속성을 이용해 정의하지 않으며, 현재 창에서 이동

6. 
<a> 태그에 스타일을 주려면, 되도록 CSS 이용.
 
7. 
HTML4.01 : 
하이퍼링크 (=다른 웹문서로의 이동)나 앵커(=현재 웹문서의 특정 위치로 이동)로도 사용 가능.

HTML5 : 
반드시 하이퍼링크로만 사용. 
만약 href 속성 없이 사용된다면, 이는 하이퍼링크 대신해 자리를 치지한 것일 뿐.

8. 
HTML5에서 몇몇 속성이 추가 및 제거되었음.

9.

HTML5 경우, 인라인요소가 블럭요소를 포함 불가.

(예)

<h2><a href="//homzzang.com">홈짱닷컴</a></h2> (O)

<a href="//homzzang.com"><h2>홈짱닷컴</h2></a> (X)


10. 
시작태그와 종료태그로 구성
 
11.
 
 

<a> 구문 

 
<a href="URL 주소" 속성="속성값">글자 or 이미지</a>
 
 

<a> 속성값

 속성
속성값
 쓰임새  비고
href
URL 주소

연결할 웹페이지 주소

#id명
연결할 아이디 지점

#name명
연결한 네임명 지점

#
별도 웹페이지 없을 때 사용.
(404에러가 발생 않도록 함)
페이지 맨위로 이동할 때도 사용.
 
 이동할 타 웹페이지 주소
※ hyperlink reference (하이퍼링크 참고)
 
 
target
 
_blank
(새창이나 새탭에 띄움)
보안 이슈 존재. (하단 참고)

_parent
(부모 창에 띄움)

_self
(현재 창에 띄움)

_top
(가장 상단 프레임 창에 띄움)

framename
(특정 프레임 창에 띄움)
 
링크를 어떤 창에 띄울지 결정.

※ 링크 타겟 변경 (현재창・새창)
https://homzzang.com/b/jquery-290
 
name  섹션 이름
 
 현재 웹페이지의 특정 네임 이름
 (앵커로 사용되는 경우)
 
 HTML5  X
charset
 
UTF-8
유니코드를 위한 문자
 
EUC-KR
한글,영문으로 구성 문서

ISO-8859-1
라틴어로 된 문서
 
 링크된 문서의 문자셋 정보
 HTML5  X
coords
 
x1,y1,x2,y2
사각형
 
x,y,radius
 
x1,y1,x2,y2,..,xn,yn
다각형
 x1,y1,x2,y2 : 
 왼쪽, 상단, 오른쪽, 하단 코너 좌표값
(사각형 모양)
 
 x,y,radius :
 원의 중심 좌표값과 둥근 정도 표시값
(원 모양)
 
 x1,y1,x2,y2,..,xn,yn :
 각 다각형의 코너 좌표값 (다각형 모양)
 만약,
 처음과 마지막 좌표값 짝이 다를 경우,
 브라우저가 자동으로 마지막 좌표값 추가.
 HTML5  X
download  파일 이름
유저가  링크를 클릭했을 때
다운될 파일명을 입력.
 
 HTML5 추가
hreflang  언어 코드
 
 링크된 페이지가 어떤 언어로 된
 페이지인지 정의
 
 
media   미디어 쿼리
  (media query)
 
 링크된 페이지가 어떤 매체나 장치에
 최적화된 페이지인지 정의
 
 HTML5 추가
rel  alternate
 author
 bookmark
 help
 license
 next
 nofollow
 noopener
 noreferrer
 prefetch
 prev
 search
 tag
 
 링크된 페이지가 현재 웹문서와
 어떤 관계인지를 표시하는 속성
 
 alternate : 대체문서로 링크.
 author : 작성자로 링크.
 bookmark : 북마크로 사용될 링크.
 help : 도움되는 문서로 링크.
 license : 문서 저작권 페이지로 링크.
 next : 다음 문서로 링크.
 nofollow : 가서는 안되는 페이지 링크.
 noopener : js 이용한 주소 변경 거부 링크
 noreferrer : HTTP referer header 숨기며 링크
 prefetch : 타켓 페이지를 캐쉬로 저장.
 prev : 이 문서의 이전 문서로 링크.
 search : 문서 검색 페이지로 링크.
 tag : 현 문서의 태그나 키워드 페이지로 링크.
 
 
rev  글자
 
 현재 문서와 링크된 문서와의 관계 설명
 
 HTML5  X
shape
 
default
전체 영역
 
rect
직사각형 모양 영역

circle
원 모양 영역
 
poly
다각형 모양 영역
 
 링크 걸 영역의 모양  HTML5  X
type   MIME type
 
 링크 페이지의 MIME type를 지정
 
 ※ MIME type : 메세지의 종류.
                         쉽게 말해, 확장자 의미
 
HTML5 추가
<a> 태그는 전역속성・이벤트속성 지원.
 

 

절대주소 vs 상대주소

[절대주소]

 
1.
http(s) 프로토콜로 시작하는 주소
(예) <a href="https://homzzang.com">홈짱닷컴</a>

 

2.

단점: 내 도메인 주소 변경 시, 새로 변경해야 하는 불편 존재.

장점: 현재 웹문서 파일의 경로가 바뀌더라도 상관 없음.

 


[상대주소]
 
1.
현재 문서 파일을 기준으로 표현한 타겟 파일의 상대 주소.
(예) 
아래 구조로 파일 존재 가정 시, /root/index.php 파일에서 각 파일 링크 걸기
/index.html  : <a href="../index.html">상위 폴더 안 파일</a>
/root/index.php 
/root/a.php  :  <a href="a.php">현재 폴더 안 파일</a>
/root/sub/b.php  :  <a href="sub/b.php">서브 폴더 안 파일</a>

 

2.

단점: 현재 웹문서 파일의 경로가 바뀐 경우 링크 에러 발생 가능.

장점: 내 도메인 주소가 바뀌면 자연스레 반영.

 

cf. 상대경로 설정법 (Lv.4 회원 전용) : https://homzzang.com/b/g5-28

 

요소의 (id속성 vs. name속성) 차이점

[id = "id명"]

 

<a> 태그의 목적지 요소가 <a>, <div> , <span> 등 모두 가능.

중복 가능 X (※ 전체 웹문서에서 유일해야 함.)

특정 요소에 고유한 CSS 스타일 줄 때 유용.

 


[name = "name명"]

<a> 태그의 목적지 요소가 오직 <a>일 때만 가능.

중복 가능 O (※ 여러 요소를 한번에 제어 용이)
<form> 태그 통해 값을 서버로 넘길 때 유용.

 

관련글: 
Policia 님 (190221) https://sir.kr/qa/292133
애드프로 님 (210531) https://sir.kr/qa/415016
 

<a> 예제 - 같은 웹문서 내 특정 위치로 이동 (= 동일문서 특정지점이동, 특정위치이동)

[ID 이용] - 목적지 요소가 a, div, span 등 모두 가능

 

목적지 :  id="아이디 명" 표시 (예) <div id='hz'>목적지</div>
출발지 : href="#아이디 명"  입력 (예) <a href="#hz">출발지</a>

예제보기


[NAME 이용] - 목적지 요소가 오직 a 인 경우에만 가능

목적지 :  name="네임 명" 표시 (예) <a name='hz'>목적지</a >
출발지 : href="#네임 명" 입력 (예) <a href="#hz">출발지</a>

 
※ 목적지 요소가 a라서 이동 O
예제1 보기 

예제2 보기


※ 목적지 요소가 div나 span이라서 이동 X
예제1 보기
예제2 보기

 

PS1. 특정 코멘트 위치로 이동시킬 때 사용 가능. 
PS2. 「원페이지 스크롤 이동」 키워드로 구글링하면 더 많은 정보 열람 가능.
 

<a> 예제 - 다른 웹문서 특정위치로 이동 (= 다른문서이동, 특정지점이동 특정위치이동)

 

[URL과 ID 혼용]
href="URL 주소#아이디명" 

[URL과 NAME 혼용]
href="URL 주소#네임 명" 

(예) 타 웹페이지 문서의 특정 위치 id나 name이 hz인 경우
<a href="목적지타문서주소#hz">출발지</a>

 


<a> 예제 - 전화링크

 

<a href="tel:전화번호">전화번호</a>

 

 

<a> 예제 - 이메일링크

 

<a href="mailto:이메일주소">이메일주소</a>

 

 

<a> 예제 - 맨위로 이동 링크 (= 탑버튼)

 

<a href="#">맨 위로</a>

 

#아이디 경우 특정 아이디 위치로 이동하나, #만 사용하면 현재 웹문서 맨 위로 이동.
 

<a> 예제 - 맨위로 이동 링크 작동 금지


<script src="https://code.jquery.com/jquery-latest.js"></script>

<a href="#">위로</a>

<script>

$("a").click(function(e) {

    e.preventDefault();

});

</script>

 

※ jquery 외부링크 (핑크색) 이미 사용 중인 경우엔 맨 밑 파란색 코드만 추가 !!
 

<a> 예제 - 부모창으로 띄우기

 

<a href="hz.html" target="_parent">링크</a>

 

 

<a> 예제 - 요소 전체에 링크 걸기

 

<a> 예제 - 공백 처리 특징

1. 공백 없이 나란히 배치한 경우, 두 요소간 딱 달라붙음.


<style>

a {border:1px solid red;}

</style>

 

<a>홈짱닷컴 Homzzang.com</a><a>홈짱닷컴 Homzzang.com</a>

 

결과보기


2. Enter키로 줄바꿈해서 배치한 경우, 두 요소간 약간의 간격 생김.

 

<style>

a {border:1px solid red;}

</style>

   

<a>홈짱닷컴 Homzzang.com</a>

<a>홈짱닷컴 Homzzang.com</a>

 

결과보기


3. 콘텐츠 안 내용을 줄바꿈해도 별반 다르지 않음.

 

<style>

a {border:1px solid red;}

</style>


<a>홈짱닷컴 Homzzang.com</a>

<a>

    홈짱닷컴 Homzzang.com

</a>

 

결과보기


4. 위 3번째 예제 맨 뒤에 세번째 요소 추가 시, 2번째 요소 끝에 공백 생기면서 2번째와 3번째 요소가 딱 달라붙음.

 

<style>

a {border:1px solid red;}

</style>


<a>홈짱닷컴 Homzzang.com</a>

<a>

    홈짱닷컴 Homzzang.com

</a>

<a>홈짱닷컴 Homzzang.com</a>

 

결과보기 

 
<a> 예제 - 링크 표시 주소와 실제 이동 주소 다르게 하기

 

<a href="표시URL"  onclick="window.open('이동URL');return false;" >이동!!</a>

 

슈와이 님 (141202) https://sir.kr/qa/50088
 
<a> 예제 - (상단이동 / 무반응) 설정

 

[맨상단으로 이동]

 

<a href="#">클릭</a>

상태표시줄 표시내용: 「현재주소/#」

페이지상단 이동 O

 


[무반응]

 

<a href="javascript:;">클릭</a>

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

상태표시줄 표시내용: javascript:; , javascript:void(0);

페이지상단 이동 X

 


[함수 실행 후, 페이지 상단 이동 X]

 

<a href="#;" onclick="alert('Hz');">클릭</a> 

<a href="#" onclick="alert('Hz'); return false;">클릭</a>

상태표시줄 표시내용: 도메인주소/#; 도메인주소/#

페이지상단 이동 X 

 

PS. onclick 수행 후 href 수행하는데, return false 있으면 href 수행 X
 

target="_blank" 보안 이슈

target="_blank" 사용 시, 아래 파란색 추가해야 피싱 예방 가능.

파란색 코드 없을 시, 새창에서 부모창 링크를 조작해 피싱 가능함.


<a href= '링크주소' rel="noopener" target="_blank"/>
또는,

<a href= '링크주소' rel="noreferrer" target="_blank"/>

또는,

<a href= '링크주소' rel="noopener noreferrer" target="_blank"/>

 

관련글 
 

찾아주셔서 감사합니다. Since 2012