a 태그는 하이퍼링크라 불리며 html 에서 메뉴 이동에 사용되거나 혹은 다른 웹페이지에 이동하는데 사용된다. 혹은 참고 정보를 위한 외부링크로써 사용되는데 이 때 다른 웹사이트로 이동하기 위해 사용된다. a 태그를 사용하면 여러모로 활동도가 높고 사용자가 원하는 연관된 정보들을 탐색하는데 도움을 준다.
html 링크 태그 a href 사용
using html a tag
현재의 웹페이지에서 다른 웹페이지나 또는 웹사이트로 이동할 때 사용하는 기능은 유용하다.
사용자는 연관되는 정보들을 편하게 보고 싶어 하기 때문이기도 하지만, 혼재된 다양한 정보들을 주제별로 모와 보여주는 것이 좋기도 하다.
하이퍼 링크라고 불리는 링크 태그는 이러한 역할을 하는데 현재의 웹페이지에서 다른 웹페이지나 또는 다른 웹사이트로 이동하도록 해준다.
a 태그는 SEO의 영향에도 주고 메타 태그의 로봇의 영향을 줄 수도 있다.
a 태그 사용
a 태그를 사용하는 것은 간단하다. 원하는 페이지로 이동할 url 과 url 의 의미를 알 수 있는 텍스트를 구문에 넣어주면 된다.
아래는 하이퍼 링크인 a 태그 사용을 위한 구문이다.
이동할 url은 정확히 기재하는 것이 좋고, url 을 설명할 간단한 명사어구를 사용해 주면 된다.
<a href="이동할 url">url 설명</a>샘플코드
a 태그를 사용하는 목적은 이미 언급했듯이 현재의 웹페이지에서 다른 웹페이지로 이동하거나 또는 다른 웹사이트로 이동할 때 사용된다.
카테고리 메뉴에도 사용될 수 있고, 참고 문헌을 연결하는데도 사용될 수 있다.
이 외에도 사용되는 범위는 많다.
이제 a 태그를 사용한 html 예제를 만들어 본다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<style>
</style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<p>
<a href="https://www.naver.com">네이버</a>
</p>
<p>
<a href="https://www.daum.net">다음</a>
</p>
<p>
<a href="https://www.google.com">구글</a>
</p>
<p>
<a href="https://www.zum.com">줌</a>
</p>
<p>
<a href="https://www.bing.com">빙</a>
</p>
</div>
</body>
<!-- // -->
</html>
<!-- // -->코드를 보면 공통점이 있다.
href 요소에 url 을 정확히 작성해 주고 어디로 이동할 것인지 텍스트를 작성해 주었다.
위의 코드는 우리나라에서 서비스하고 있는 5가지 검색엔진으로 이동하기 위해 a 태그를 사용한 것이다.
결과 화면을 보자.
정말 조촐한 결과이다. 링크 태그인 a 태그를 사용하면 기본적으로 파란색 글씨에 밑줄이 붙어 있으면 한번이상 클릭했다면 보라색으로 변경된다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 do while 반복문 사용 using javascript do while loop (0) | 2022.05.10 |
|---|---|
| 자바스크립트 while 반복문 사용 using javascript while loop statement (0) | 2022.05.02 |
| 자바스크립트 반복문 for of 사용 방법 using javascript for in loop (0) | 2022.04.26 |
| 자바스크립트 반복문 for in 사용 방법 using javascript for in loop statement (0) | 2022.04.24 |
| 자바스크립트 반복문 for 사용 방법 using javascript loop for statement (0) | 2022.04.22 |
댓글