목차
<a> 예제 - 링크 걸기 <a> 정의 <a> 구문 <a> 속성값 절대주소 vs 상대주소 요소의 (id속성 vs. name속성) 차이점 <a> 예제 - 같은 웹문서 내 특정 위치로 이동 (= 동일문서 특정지점이동, 특정위치이동) <a> 예제 - 다른 웹문서 특정위치로 이동 (= 다른문서이동, 특정지점이동 특정위치이동) <a> 예제 - 전화링크 <a> 예제 - 이메일링크 <a> 예제 - 텔레그램 링크 <a> 예제 - 맨위로 이동 링크 (= 탑버튼) <a> 예제 - 맨위로 이동 링크 작동 금지 <a> 예제 - 부모창으로 띄우기 <a> 예제 - 요소 전체에 링크 걸기 <a> 예제 - 공백 처리 특징 <a> 예제 - 링크 표시 주소와 실제 이동 주소 다르게 하기 <a> 예제 - 이동 확인창 띄운 후, 동의 시에만 이동시키기 <a> 예제 - (상단이동 / 무반응) 설정 <a> 예제 - (뒤로가기/앞으로가기/새로고침/창닫기/인쇄) 링크 <a> 예제 - 앵커 태그 중첩적 사용 경우 <a> 예제 - target="_blank" 보안 이슈
<a> 예제 - 링크 걸기
<a href="https://homzzang.com">홈짱닷컴</a>
<a href="https://homzzang.com"><img src="이미지주소"></a>
<a> 정의
※ hyper 초월한, 저 건너 / 들뜬, 흥분한
1.
<a> :
a nchor 의 첫 글자 땀.
href (=이동할 다른 웹페이지 주소) 또는 name (또는 id) 사용. 즉, 이동 목적지를 지정하는 속성은 필수.
3.
<a> 태그 걸린 링크 글씨는 기본적으로 브라우저에서 다음과 같음.
(단, 익스플로러는 다르게 보일 수 있음)
(1) 아직 방문하지 않은 링크 : 밑줄 있는 파란 글씨
(2) 이미 방문한 링크 : 밑줄 있는 자줏빛 글씨
(3) 클릭하는 순간의 링크 : 밑줄 있는 빨간 글씨
4.
download, hreflang, media, rel, target, type 속성은 href 속성이 존재할 경우에만 사용 가능.
5.
특별히 띄울 창을 target 속성을 이용해 정의하지 않으며, 현재 창에서 이동
6.
<a> 태그에 스타일을 주려면, 되도록 CSS 이용.
7.
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 #id명 #name명 # 별도 웹페이지 없을 때 사용.404에러 가 발생 않도록 함)
이동할 타 웹페이지 주소h yperlink ref erence (하이퍼링크 참고)
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 :
왼쪽, 상단, 오른쪽, 하단 코너 좌표값
x,y,radius :
원의 중심 좌표값과 둥근 정도 표시값
x1,y1,x2,y2,..,xn,yn :
각 다각형의 코너 좌표값 (다각형 모양)
HTML5 X
download 파일 이름
유저가 링크를 클릭했을 때
다운될 파일명을 입력.
HTML5 추가
hreflang 언어 코드
링크된 페이지가 어떤 언어로 된
페이지인지 정의
media 미디어 쿼리
링크된 페이지가 어떤 매체나 장치에
최적화된 페이지인지 정의
HTML5 추가
rel alternatenoopener noreferrer prev
링크된 페이지가 현재 웹문서와
어떤 관계인지를 표시하는 속성
alternate : 대체문서로 링크.
noopener : js 이용한 주소 변경 거부 링크noreferrer : HTTP referer header 숨기며 링크prev : 이 문서의 이전 문서로 링크.
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> 태그 통해 값을 서버로 넘길 때 유용.
관련글:
<a> 예제 - 같은 웹문서 내 특정 위치로 이동 (= 동일문서 특정지점이동, 특정위치이동)
[ID 이용] - 목적지 요소가 a, div, span 등 모두 가능
목적지 : id="아이디명" href="#아이디명" 입력 (예) <a href="#hz">출발지</a>예제보기
[NAME 이용] - 목적지 요소가 오직 a 인 경우에만 가능
목적지 : name="네임명" a name='hz'>목적지</a >href="#네임명" 입력 (예) <a href="#hz">출발지</a>
예제1 보기
예제2 보기
예제1 보기 예제2 보기
PS1. 특정 코멘트 위치로 이동시킬 때 사용 가능.
<a> 예제 - 다른 웹문서 특정위치로 이동 (= 다른문서이동, 특정지점이동 특정위치이동)
[URL과 ID 혼용]href="URL 주소#아이디명" href="URL 주소#네임명" <a href="목적지타문서주소#hz">출발지</a>
PS.
#아이디 해시 링크 경우 , 브라우저에 내용이 모두 로딩된 후 해당 위치로 가는 거라서 PHP에서는 해당 id값을 받을 수 없음 . (단, $_SERVER['REQUEST_URI'] 슈퍼전역변수엔 포함되므로, 구문분석 통해 추출은 가능함.)JS로 해당 해시값을 확인하려면, document.location.hash 속성 사용해 요소에 넣거나 ajax 이용해 서버에 전달 가능.
PHP로 id값 바로 받으려면, URL&id=id 형태의 GET방식으로 넘기거나 폼 post 방식 이용해야 함.
설국열차 님 (221216) https://sir.kr/qa/483426
<a> 예제 - 전화링크
tel: 전화번호">전화걸기</a>
[예제] - 아래 2가지 모두 가능. (하이픈 넣는 걸 권장)
<a href="tel:02-1234-5678">전화걸기</a> <a href="tel:0212345678">전화걸기</a>
<a> 예제 - 이메일링크
<a href="mailto: 이메일주소">이메일보내기 </a>
[예제]
<a> 예제 - 텔레그램 링크
<a href="tg://resolve?domain=텔레그램ID ">텔레그램 보내기</a>
[예제]
<a href="tg://resolve?domain=homzzang">텔레그램 보내기</a>
<a> 예제 - 맨위로 이동 링크 (= 탑버튼)
<a href="# ">맨 위로</a>
또는,
<a onclick="window.scrollTo (0,0); return false;" href="#">맨위로</a>
#아이디 경우 특정 아이디 위치로 이동하나, #만 사용하면 현재 웹문서 맨 위로 이동.
<a> 예제 - 맨위로 이동 링크 작동 금지
<script src="https://code.jquery.com/jquery-latest.js"></script>
<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>
<a> 예제 - 이동 확인창 띄운 후, 동의 시에만 이동시키기
<a href="javascript:goto() ">클릭</a>
<script>
function goto() {
if (confirm ("이동?")) {
location .href = "https://homzzang.com";
}
}
</script>
<a> 예제 - (상단이동 / 무반응) 설정
[맨상단으로 이동]
<a href="#">클릭</a>
상태표시줄 표시내용: 「현재주소/#」
페이지상단 이동 O
[무반응]
<a href="javascript:;">클릭</a>
<a href="javascript:void(0);">클릭</a>
상태표시줄 표시내용: javascript:; , javascript:void(0);
페이지상단 이동 X
[함수 실행 후, 페이지 상단 이동 X]
<a href="#;
<a href="#" onclick="alert('Hz'); return false; ">클릭</a>
상태표시줄 표시내용: 도메인주소/#; 도메인주소/#
페이지상단 이동 X
PS. onclick 수행 후 href 수행하는데, return false 있으면 href 수행 X
<a> 예제 - (뒤로가기/앞으로가기/새로고침/창닫기/인쇄) 링크
<a href="javascript:history.go (-1); ">뒤로가기</a>
<a href="javascript:history.back(-1)">뒤로가기</a>
<a href="javascript:history.go(1)">앞으로가기</a>
<a href="javascript:location.reload()">새로고침</a>
<a href="javascript:window.close()">창닫기</a>
<a href="javascript:window.print()">인쇄하기</a>
PS. 「새로고침」 경우, 아래 코드도 가능
<a href="">새로고침</a>
<a> 예제 - 앵커 태그 중첩적 사용 경우
※ 맨 안의 것이 적용됨. (즉, 구글닷컴이 새창으로 열림.)
<a href="https://naver.com" target="_self">
<a href="https://google.com" target="_blank">
난 어디로 가지?
</a>
</a>
PS. 이런 구조는 바람직한 코드가 아니니 사용 금지
<a> 예제 - target="_blank" 보안 이슈
target="_blank" 사용 시, 아래 파란색 추가해야 피싱 예방 가능.
파란색 코드 없을 시, 새창에서 부모창 링크를 조작해 피싱 가능함.
※ 아래 3가지 중 하나 이용.
<a href= '링크주소' rel="noopener" target="_blank">...</a>
<a href= '링크주소' rel="noreferrer" target="_blank">...</a>
<a href= '링크주소' rel="noopener noreferrer" target="_blank">...</a>
관련글
