a 태그 속성값에 대하여 (짧은 지식)

이 글은 코딩을 하다 문득 A(anchor) 태그에 #, #none, #javascript:void(0); 의 의미가 궁금해 찾다가 작성한 글입니다.

 

<a> 태그의 속성은 크게 세 가지

간단하게 설명해보자면,

1.  href : 연결하고 싶은 주소를 적는다.
2.  target : 링크 클릭 시, 윈도우를 어떻게 오픈할 건지 정한다. (blank, self, top, bottom)
3.  title: 링크에 대한 설명을 넣는다.

 

---

href

href = Hypertext Reference의 약자

<a href="주소">원하는 주소로 가버렷</a>

 

 

href 안에 주소를 넣으면 원하는 경로로 이동 가능하다. 또한 href는 어떤 값이라도 있으면 해당 값을 새 페이지로 읽으려 하기 때문에 그걸 방지하기 위해 다른 속성 값들을 부여한다

다른 것은 무얼 넣을 수 있는지 확인해보자

• # : 아무것도 실행하지 않음.  화면 최상단으로 스크롤된다
• #id : 지정해준 id 값으로 포커스 이동
• #none : 아무것도 실행하지 않음.  최상단 이동 안 함!
• #javascript:void(0); :  자바스크립트 뒤에 숫자나 영어도 사용 가능하다. 하지만 아무 일도 일어나지 않을 것이다. void는 undefined를 리턴하는 연산자이기 때문에 a 태그의 이동을 무력화시킨다.

<a> 태그의 기본 속성 값을 제어하려면 자바스크립트에서 이벤트 핸들러로 preventDefault() 를 호출해야 한다.

또한 href="" 이런 식으로 공란으로 두게 되면 페이지가 새로고침 되기 때문에 공란으로 두지 말자~

 

---

target

가장 많이 쓰는 두 가지 속성

• _blank : 새 창이나 새로운 탭으로 열림
• _self : 현재 열린 창에서 열림 (기본 속성)

---