<a>태그 href 속성 #, #none 및 taget, title 속성 파해치기

 

 

 

 

1. <a>태그 속성 종류

 

● href : 연결하고 싶은 주소를 지정한다.

● target : 링크 클릭 시, 창의 형태를 지정한다 [ _blank, _self, _top, _bottom ]

● title : 링크에 대한 설명을 넣는다.

 

 

 

---

 

2. <a>태그의 href 속성

 

href = Hypertext Reference의 약자

- href="연결 주소" 주소 링크를 넣어서 속성의 값으로 경로를 이동시킨다.

  코딩을 하다보면 href 안에 #, #none, / 넣는경우가 있는데 차이점을 알아보자.

 

<a href="#"></a>
<a href="#ID" title="href ID값 넣기"></a>
<a href="#none"></a>
<a href="/"></a>
<a href="javascript:;"></a>
<a href="javascript:void(0);"></a>

 

◎ # : 아무것도 실행하지 않지만 페이지 최상단으로 이동 

◎ #ID : 지정된 id 값으로 포커스 이동 

◎ #none : 아무것도 실행하지 않고 페이지 최상단으로도 이동하지 않는다.

◎ javascript:; : 자바스크립트라고 작성되었지만 아무런 일 없다. 스크롤 이동, undefined도 발생 없다.

◎ javascript:void(0); : void 안에 0 말고도 영문, 숫자도 가능하다. <a>태그의 이동을 무력화한다.
  그러나 void는 undefined를 리턴하는 연산자다. 
  브라우저에게 뒤에 작성된 함수를 실행시키는 의미를 담고있는데,
  <a>태그의 기본 기능은 작동되지않지만 undefined 리턴하기에 좋은 방법이다.

 

 

---

 

3. <a>태그의 target 속성

 

◎ _blank : 새로운 탭에 연결된 사이트 창이 열린다.
◎ _self : 열려진 창에서 주소창으로 새로운 페이지가 열린다.
◎ _top : 부모 창에서 열리며 부모창이 없다면 _self와 같다.
◎ _bottom : 가장 사우이 창에서 열린다. 없다면 _self와 같다.

 

 

 

 

※참고 : href와 유사한 onclick="" 속성도 있는데 이것은 tab키로 버튼이 선택 안되는 효과를 낼 수 있다.

( 단, IE6, 7에서는 hover가 안먹힐 수 있음 )