a 태그 / href, id, anchor, target

 a 태그 : 클릭 이벤트로 다른 웹문서(웹프로그램)을 요청하기 위한 태그 

• GET 방식의 요청이다. (a 태그는 무조건)
• 하이퍼링크(Hyper Link) 기능을 제공하는 태그 ---> 페이지 이동

 

* href 속성 : 클릭 이벤트가 발생될 경우 요청한 웹문서(웹프로그램)의 URL 주소를 속성값으로 설정

태그내용(텍스트 또는 이미지)을 클릭한 경우, 클라이언트 브라우저의 주소창의 URL 주소가 href 속성값으로 변경되어 요청하고 웹문서(웹프로그램)의 결과를 응답받아 출력한다.

 

<a href="https://www.google.com">구글</a>

 

 

 

* id 속성 : 태그를 구분하기 위한 식별자를 속성값으로 설정. 

식별자는 중복되면 안된다. 따라서, id는 중복이 안되어서 사용 가능하지만, 이름은 중복되니까 사용하면 안된다.

 

<h3 id="product">제품소개

 

 

 

* 앵커(Anchor) : 출력 페이지에서 특정 태그의 위치로 스크롤을 이동하는 기능

• URL 주소뒤에 #기호를 사용하여 태그 식별자(id 속성값)를 설정하면 해당 식별자의 태그로 출력위치를 이동
• 동일한 웹문서에서 스크롤을 이동할 경우 웹문서 요청 웹문서의 URL 주소 생략 가능

<a href="/web/html/08_anchor.html#product">제품소개

<a href="#message">주의사항

 

 

 

* 요청 URL 주소 뒤에 ? 기호를 붙이고 [이름=값&이름=값&...] 형식으로 요청 웹프로그램에게 값 전달이 가능하다.

• 질의문자열(QueryString)를 이용한 값 전달

<a href="/web/html/example1.html?name=kim"><img alt="kor" src="/web/html/images/kor.png"></a>

 

 

 

 

* target 속성

• self (현재 브라우저 - 기본)
• _blank (새로운 브라우저)
• _top (최상위 브라우저)
• _parent (부모 브라우저)
• _child (자식 브라우저)
• 내부 브라우저(iframe 태그)의 name 속성값

<a href="expample1.html" target="_blank"><img alt="eng" src="images/eng.png"></a>