a(anchor) 요소 란?
하이퍼 링크, 책갈피, javascript 등을 수행할때 사용한다.
anchor 요소의 기본양식
<a href=""></a>
a href= ""
" "사이에 하이퍼 링크를 작성하면 해당 페이지로 이동 가능하다.
적용 예시)
실제 결과)
네이버 텍스트 클릭 시 https://www.naver.com 페이지로 이동됨.
활용 예시
1. 이미지를 클릭하여 해당 링크로 이동하기
<div>
<h1>anchor 테스트</h1>
<p>
</p>
</div>
anchor innertext 입력칸에 img 요소를 작성한다.
실제 결과)
해당 NAVER 로고를 클릭하면 링크에 작성 된 https://www.naver.com 페이지로 이동된다.
2. 동일한 페이지 내에서 이동(책갈피 기능)
<div>
<h1>anchor 테스트</h1>
<ul>
<li><a href="#one">하나</a></li>
<li><a href="#two">둘</a></li>
<li><a href="#three">셋</a></li>
</ul>
<img src="images/background1.png">
<p id="one">one</p>
<img src="images/background1.png">
<p id="two">two</p>
<img src="images/background1.png">
<p id="three">three</p>
<img src="images/background1.png">
</div>
실제 결과)
'하나' 링크 클릭 시
하단에 one 내용이 작성된 지점까지 바로 이동 됨.
'둘' 링크 클릭 시 two 내용이 작성된 지점 까지 이동.
3. 자바스크립트 기능 사용하기
<div>
<h1>anchor 테스트</h1>
<p>
<a href="javascript:alert('알림창')">알림창 보기</a>
</p>
</div>
자바스크립트의 언어의 alert 사용하여 알림 팝업 노출시키기
예시) javascript:(자바스크립트 언어 입력)
실제 결과)
'알림창 보기' 텍스트 클릭 시 성공적으로 알림창 팝업 노출
'HTML' 카테고리의 다른 글
| HTML form 요소 (0) | 2023.04.06 |
|---|---|
| HTML 기초 (2023.04.05) (0) | 2023.04.05 |
