<a>와 <button>의 속성 / a태그에서 onclick 사용 / button태그에서 href 사용 / href, onclick, target, type

<a> 태그와 <button> 태그 등에서 클릭 시 URL 주소로 이동 경로를 넘기는 방법도 있지만,

Script를 사용하여 함수를 호출하여 이동하거나, Ajax를 사용하는 방법, 페이지 내에서 화면의 위치를 이동하거나, 클릭 시에 스크립트 문을 실행할 수도 있습니다. <a> 태그와 <button> 태그에서 사용되는 속성과 사용방법에 대해서 알아보겠습니다.

 

<a> 태그

<a> 태그는 앵커(anchor) 닻을 뜻합니다. url을 연결하기 위한 목적으로 사용되며, 하이퍼링크를 연결해 주는 태그로 인터넷주소와 동영상, 이미지, 음악, 그림 등의 특정 위치로 지정할 수 있습니다.

href와 target 속성이 있으며, href 속성은 클릭 시 이동할 링크를 값으로 가질 수 있고, target은 href의 링크로 이동하는 방법 지정하는 속성으로 _self, _blank, _parent, _top 등이 있습니다.

target 속성값
_self	현재 페이지에서 이동
_blank	새로운 탭에서 이동
_parent	부모 페이지에서 이동
_top	최상위 페이지에서 이동
프레임 이름	직접 명시헤서 이동

 

href와 target 사용하기

a 태그에서  target 속성으로 '_blank'을 사용하게 되면 새로운 탭으로 href에 명시된 위치로 이동하는 것을 확인할 수 있습니다.

<a href="http://www.naver.com" target="_blank">네이버</a>

 

<a>태그에서 target 속성 값으로 '_blank'를 사용한 하이퍼링크텍스트를 클릭한 사진(좌: 클릭 전, 우: 클릭 후)

 

<a> 태그로 페이지의 특정 위치로 이동하기

페이지의 길이가 긴 사이트에서 흔하게 페이지 가장자리에서는 '맨 위로', '맨 아래로'와 같은 버튼을 볼 수 있습니다.

이 외에도 인터넷쇼핑몰 사이트에서도 제품 상세보기, 리뷰 보기, 배송 안내, Q&A의 위치로 스크롤의 위치를 한 번에 이동해 주는 버튼을 만드는 방법입니다.

<p id="top"> //
<a href="#button">맨 아래로</a> <!--'button'이라는 id값을 가진 위치로 이동-->
<br>
.
.
.
.
<a href="#top">맨 위로</a>
<p id="button">

 

<a> 태그에서 자바스크립트 실행, 함수 호출

<a> 태그에서 스크립트 문을 실행하는 방법입니다. 버튼 태그는 onclick 속성을 사용하여 함수를 호출하지만, a 태그는 'javascript:함수'와 같이 scirpt를 실행할 수 있습니다.

 

alert 텍스트를 클릭 시 alert을 실행하는 방법의 예시입니다.

<a href="javascript:alert('자바스크립트 함수 실행!')"> alert </a>

a태그에서는 매소드를 실행시키거나, onclick 속성을 사용할 수도 있습니다.

<a href="javascript:callFunction();"> callFunchtion </a>
<a href="javascript:void(0)" onclick="callfunctuin()"> callFunction </a>

반응형

 

button 태그

클릭할 수 있는 버튼을 정의할 때 사용하며, 폼(form)을 컨트롤하거나 다른 페이지로의 전송을 하는 기능과 입력창을 리셋하거나, 여러 동장을 실행할 수 있으며, a태그와 같이 url 주소로 연결할 수도 있습니다.

속성으로는 type과 onclick 속성이 있습니다.

 

button 태그에서 href 사용

a태그와 같은 href 속성의 기능을 button 태그에서 사용하는 방법입니다.

버튼 태그에서는 onclick 속성에 "location.href='url'"을 사용하여 a 태그의 href와 같은 역할을 합니다.

<button onclick="location.href='http://www.naver.com'">네이버로 이동</button>

 

버튼 클릭 시 메소드 호출하기

<button onclick="location.href='callFunction()'"> button </button>

 

 

버튼 클릭 시 페이지내의 위치로 이동하기

<p/ id="top">
.
.
.
.
<button type="button" onclick="location.href='#top'"> 맨 위로 </button>

 

 

<a>와 <button> 태그를 사용하다가 속성 값에 ""(큰따옴표)와 ''(작은따옴표)를 자주 사용하게 됩니다.
꼭 큰따움표 안에서는 작은따옴표를 사용해야 합니다.
정말 사소한 것이지만 이 문제로 오랫동안 문제를 해결하지 못할 수 있습니다... 저처럼...