a 태그를 사용하면 다른 웹페이지를 열 수 있습니다.
a 태그는 HTML에서 사용되는 하이퍼링크를 정의하는 태그입니다.
a 태그를 통해 현재 있는 웹페이지에서 다른 웹페이지로 이동할 수 있습니다. 이동할 수 있는 다른 웹페이지는 같은 사이트 내 다른 url을 가진 페이지일 수도 있고, 전혀 다른 도메인을 가진 다른 사이트의 url을 가진 페이지일 수도 있습니다. 또한 다른 페이지로 이동할 때에는 같은 브라우저 탭 내에서 현재 페이지를 이전 히스토리로 남기고 다음 페이지로 이동하게 만들 수도 있고, 아니면 현재 페이지는 현재 탭에 남겨두고 새 탭에서 다른 페이지를 열도록 만들 수도 있습니다. 혹은 같은 페이지 내에서 특정 위치로 스크롤을 이동시킬 수도 있습니다. 이런 기능들을 수행하는 하이퍼링크를 a 태그를 이용해서 간단하게 정의할 수 있습니다. 자식 요소로 텍스트가 들어가면 하이퍼링크 텍스트가 되고, 이미지를 넣어 하이퍼링크 이미지를 만들 수도 있습니다.
사전 지식: 절대 경로와 상대 경로에 대해 알아보자.
웹페이지를 만들 때, 이미지파일이나 css파일 혹은 javascript파일 등 리소스가 있는 위치를 접근하기 위해서 파일이 위치한 경로 값을 넣어줘야 하는 경우가 많습니다.
1. 절대 경로
파일이 있는 위치까지 root부터 쭉 따라간 전체 경로 값. 따라서 하나밖에 없습니다. 유일한 경로 값이기 때문에 절대 경로라고 부릅니다.
* 예시
ex1) https://www.google.com
ex2) C:\users\document\myimage.jpg
2. 상대 경로
현재 위치한 곳에서 시작해서 파일이 있는 위치까지 쭉 따라간 경로. 따라서 현 위치에 대해 상대적이다. 그래서 상대 경로라고 부릅니다. 이건 접근방법을 몇 가지 익혀야 합니다.
- /: root directory
- ./: 현재 디렉토리
- ../: 현재보다 한 단계 상위 디렉토리
- ../../: 현재보다 두 단계 상위 디렉토리(n단계는 굳이 말안해도..)
- /dir1/dir2: root directory의 하위 디렉토리 dir1의 하위 디렉토리 dir2
- ./dir1/dir2: 현재 디렉토리의 하위 디렉토리 dir1의 하위 디렉토리 dir2
- ../dir1: 현재 디렉토리의 상위 디렉토리의 하위 디렉터리 dir1
html 태그 중에는 그 속성 값으로 이런 경로 값들을 요구하는 것들이 있습니다.
a 태그로 외부 사이트의 페이지 열기
a 태그를 사용할 때 꼭 필요한 속성은 href 입니다. 속성 값으로 링크의 url을 넣어줘야 하기 때문입니다.
다른 웹사이트인 외부 페이지를 열 때에는 절대 경로를 사용합니다.
* a tag 기본 사용법
<a href="이동할 웹페이지 url">링크텍스트</a>
링크 텍스트를 누르면 href 속성값으로 지정한 url로 이동합니다.
새 탭에서 열고 싶으면 속성 target="_blank"를 추가합니다.
실습
링크텍스트를 누르면 새 탭에서 구글이 열리도록 만들어보겠습니다.
* 예시 코드
<a href="https://www.google.com" target="_blank">구글 열기</a>
* 결과
a 태그로 같은 사이트 내 다른 페이지로 이동하기
하나의 페이지만으로 존재하는 웹사이트들도 있지만 많은 웹사이트들은 여러 개의 페이지를 가지고 있습니다.
지금은 여러 개의 페이지를 가지고 있는 웹사이트를 만들어보고 이들을 a tag를 사용해서 서로 연결하는 내부 링크를 만들어보겠습니다.
1) 프로젝트 폴더를 하나 만들고 그 안에 index.html 파일을 만듭니다.
index.html은 웹사이트의 홈 역할을 할 html문서의 이름을 지을 때 관용적으로 쓰는 파일명입니다.
2) 그리고 같은 폴더 안에 다른 페이지를 위한 html 파일을 하나 더 만듭니다. 파일명은 login.html 이라고 짓겠습니다.
이제 각각의 html파일 안에 아래 코드를 따라서 작성해주세요.
* 예시 코드
index.html
<!doctype html>
<html>
<head>
<title>나의 홈페이지</title>
</head>
<body>
<h1>cocoder의 홈페이지입니다.</h1>
<p>login을 하려면 아래 링크를 눌러주세요.</p>
<a href="login.html">Log in</a>
</body>
</html>
login.html
<!doctype html>
<html>
<head>
<title>나의 홈페이지 - 로그인</title>
</head>
<body>
<h1>cocoder의 홈페이지입니다.</h1>
<p>홈으로 가려면 아래 링크를 눌러주세요.</p>
<a href="index.html">home</a>
</body>
</html>
예시 코드에서 a 태그의 href속성 값을 보면 절대 경로가 아니라 상대 경로라는 것을 알 수 있습니다.
같은 프로젝트 폴더 내에서 접근하기 때문에 경로의 구조가 복잡하지 않은 웹사이트라면 상대 경로를 쓰는 것이 훨씬 간편할 수도 있습니다. 하지만 경로의 구조가 복잡하면 절대 경로를 사용하는 것이 더 편리할 수도 있습니다.
예시 코드를 작성하고 파일을 저장하셨으면 이제 웹브라우저로 html 파일을 실행해보고 링크가 잘 작동하는지 확인해봅니다.
* 결과
a 태그로 북마크 기능을 구현해보겠습니다.
a태그는 다른 페이지로 이동할 수 있을 뿐만 아니라, 원하는 id값을 가진 엘리먼트(HTML 태그)가 있는 위치로도 이동할 수 있습니다.
이것을 구현하면 북마크 기능이 됩니다.
북마크 기능은 크게 두 가지로 나눠볼 수 있습니다. '같은' 페이지 내 북마크 이동과 '다른' 페이지 내 북마크 이동입니다.
같은 페이지 내 북마크 이동
코드에서...
a 태그의 href 속성 값을 넣을 때 '#id명'을 붙여 넣습니다. #은 태그의 id명을 식별하는 역할을 합니다.
사용자는...
a 태그(링크)를 누르면 같은 페이지 내에서 해당 id의 태그가 있는 위치로 화면을 이동합니다.
<a href='#myTag'>id 값이 myTag인 태그로 이동</a>
같은 페이지 내 최상단으로 이동
id값이 없어도 href 속성 값으로 #top을 넣으면 a 태그를 누를 때 같은 페이지 내 최상단으로 화면을 이동합니다.
<a href='#top'>최상단으로</a>
다른 페이지 내 북마크 이동
a 태그의 href 속성값으로 다른 페이지의 url주소를 넣고 끝자리에 '#id명'을 붙여 넣습니다.
a 태그를 누르면 다른 페이지로 이동할 뿐만 아니라 해당 id의 태그가 있는 위치로 화면을 이동합니다.
<a href='/another#myTag'>/another url 이동 후 id값이 myTag인 태그로 이동</a>
실습
index.html과 book.html을 같은 폴더 내에 생성하고 다음 코드를 똑같이 작성합니다.
* 예시 코드
index.html
<head>
<style>
#greatbox {
background-color:forestgreen;
width:500px;
height:2000px;
}
</style>
</head>
<body>
Here is top and have no id.
<div id="greatbox"></div>
<span id="target">Hello. my id is target.</span>
<div id="greatbox"></div>
<a href="#target">go to the target</a><br>
<a href="#top">go to the top with no id</a><br>
<a href="book.html#bookmark">go to the another page's bookmark</a>
</body>book.html
<head>
<style>
#greatbox {
background-color:forestgreen;
width:500px;
height:2000px;
}
</style>
</head>
<body>
Here is another page.
<div id="greatbox"></div>
<h1 id="bookmark">bookmark at another page</h1>
<div id="greatbox"></div>
</body>
index.html을 웹브라우저에서 실행시킨 후에
1. href값이 #target인 a태그, go to the target을 누르면 같은 페이지 내에서 id="target"인 태그를 찾아 화면을 이동합니다.
2. href값이 #top인 a태그, go to the top with no id를 누르면 같은 페이지 내에서 최상단으로 화면을 이동합니다.
3. href값이 book.html#bookmark인 a태그, go to the another page's bookmark를 누르면 다른 페이지(book.html) 내에서 id="bookmark"인 태그를 찾아 화면을 이동합니다.
a tag를 누르면서 주소창을 보시면 해당 id값이 url값에 그대로 포함되어 노출된다는 사실도 덤으로 확인해보시길 바랍니다.
1. index.html#target
2. index.html#top
3. book.html#bookmark
최근댓글