anchor 태그에 대해 알아보려고 한다.
1. anchor 태그?
HTML 문서는 태그를 사용해서 문서의 구조를 정한다.
링크를 추가할 때 사용하는 태그는 <a> 태그
<a> 태그는 ‘닻’을 뜻하는 영어단어 anchor의 첫 글자를 딴 것으로 anchor 태그라고 부름
수많은 웹페이지로 이루어진 인터넷 바다의 어느 한 목적지, 페이지에 "닻을 내린다"는 의미
1) 이동하려는 실제 웹페이지 주소(=URL)와 내가 만든 웹페이지에서 보이는 링크 이름을 입력
2) 링크 이름은 URL 주소 또는 원하는 단어를 쓴다
예를 들어
실제 URL은 'https://www.tistory.com'이지만, 링크 이름은 ‘티스토리로 이동하기’라고 정할 수 있음
웹페이지에서 ‘티스토리로 이동하기’라고 쓰인 링크를 클릭하면 'https://www.tistory.com'이라는 주소의 티스토리 메인 페이지로 이동하게 된다.
URL 주소와 링크 이름은 <a>태그와 함께 아래와 같은 방법으로 입력.
<a href=”URL주소”> 보이는 링크 이름 </a>
URL 주소는 웹페이지에 직접 보이는 부분이 아니므로 시작 태그에 넣음
여기서 href는 Hypertext Reference의 약자로 그다음에 실제 URL 주소를 써준다.
이때 URL 주소는 약속된 코드가 아니므로 문자열로 취급하여 반드시 큰따옴표(“ “)로 감싸야한다.
링크 이름은 웹페이지의 본문에 보여야 하는 부분이므로 <a>, </a> 태그 사이에 넣음
2. 링크 태그 : <a href="#"> Click </a>
| 태그 | 설명 | |
| <a> | href(링크 주소 지정) 속성 값을 이용하여 하이퍼텍스트 설정(텍스트에 링크 설정) | |
| 절대 경로 : http://로 시작하는 주소 (외부 사이트로 이동) | ||
| 상대 경로 : index.html (동일한 사이트 안에서의 페이지 이동) | ||
| ㄴ 기준파일과 같은 위치시 : img.jpg | ||
| ㄴ기준파일보다 하위폴더에 위치시 : 폴더명/ img.jpg | ||
| ㄴ 기준파일보다 상위폴더에 위치시 : ../img.jpg | ||
| 인라인 요소이나 html5부터 블록요소의 태그들도 포함할 수 있음 | ||
| _blank(새창 |
||
| - target |
||
3. 링크 삽입하기
<! DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 앵커 anchor 태그 a </title>
</head>
<body>
<h1> 앵커 anchor 태그 a </h1>
<p><strong> href 속성을 이용하여 <mark> 하이퍼 텍스트 </mark> 설정 <br> **인라인 요소 </strong></p>
<a href="http://www.w3.org"> w3 바로가기
<ul>
<li> 링크를 의미하는 밑줄로 표기 </li>
<li> 기본 색상은 파란색 </li>
<li> 방문한 적이 있는 곳은 보라색 </li>
<li> 마우스로 누르고 있으면 빨간색 </li>
<li> a의 속성 값을 ""의 형태로 비워두지 않음 <br> href="#"처럼 임시 링크 기호로 대체 표기 </li>
</ul>
<h2> 절대 경로 </h2>
<p>반드시 <strong> http://</strong>으로 시작하는 주소로 외부 사이트 이동시 사용. </p>
<ul>
<li><a href="http://www.google.com" target="_blank">구글 바로가기 </a></li>
<li><a href="http://www.naver.com" target="_blank">네이버 바로가기 </a></li>
<li><a href="http://www.daum.net" target="_blank">다음 바로가기 </a></li>
</ul>
</body>
</html>
① 메모장을 열고 <! doctype html>을 입력
② URL 주소를 복사해서 큰따옴표 사이에 붙여 넣고, anchor 태그 사이에 [000 가기]라는링크 이름을 입력
③ [파일] > [다른 이름으로 저장]을 선택
④ 저장 위치를 선택하고, 파일 이름을 [파일명. html]이라고 입력 후 [저장]
⑤ 저장한 html 파일을 더블 클릭
⑥ 입력한 링크 이름을 클릭하고 해당 페이지로 이동하는 것을 확인
( 참조:URL 주소 자리에 ‘#’을 입력할 수도 있는데, 이것은 현재의 웹페이지 자체에 링크를 건 것임)
그의 지식으로 깊은 바다를 갈라지게 하셨으며
공중에서 이슬이 내리게 하셨느니라
-잠언 3:20-
'일과공부' 카테고리의 다른 글
| [HTML 기초 강의] ⑧ 이미지에 링크 걸기 (0) | 2021.08.02 |
|---|---|
| [HTML 기초 강의] ⑦이미지태그 (0) | 2021.07.31 |
| [HTML 기초 강의] ⑤HTML문서,구조화태그 (0) | 2021.07.28 |
| [HTML기초 강의] ④ 자주 사용하는 텍스트 태그1 (0) | 2021.07.27 |
| [HTML 기초 강의] ③ HTML이란? (0) | 2021.07.26 |
