html <a>태그에 대해 알아보겠습니다.
<a>태그는 링크를 걸 때 사용합니다.
속성, 주소 체계, 종류에 대해 알아보겠습니다.
속성
#1 href 속성
링크를 걸어 줄 주소를 넣는 기본속성입니다.
<a>태그 안에 href 속성을 넣어주면 됩니다.
태그 안 글자를 누르면 티스토리 홈페이지로 가도록 해보겠습니다.
표시방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>링크</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a href="http://www.tistory.com">티스토리</a>
</body>
</html>
실제 웹페이지
'티스토리' 글자 안에 링크를 걸어주었습니다.
글자에 마우스를 갖다 대면 커서가 손모양(포인터)으로 바뀌는 것을 확인할 수 있습니다.
조금 더 보기 좋게 CSS를 사용해 꾸며보았습니다.
글자를 누르면 티스토리 홈페이지로 이동하게 됩니다.
그런데 티스토리로 이동하면서 그 전의 페이지가 없어졌습니다.
좀 더 정확히 말하면 뒤로 가기 버튼을 눌러야 원래 페이지로 돌아가는 것이죠.
그렇다면 링크페이지가 새 탭에서 열리게 하려면 어떻게 해야 할까요?
target 속성을 알아야 합니다.
#2 target 속성
① _self |
default값(기본값)으로 굳이 안 써도 됨 |
② _blank |
새창, 새탭에서 열림 |
③ _parent |
프레임 사용시 전체 열림 |
④ _top |
전체 윈도우로 열림 |
새탭에서 링크 페이지를 열게 하려면 target 속성 중 _blank를 사용합니다.
1, 2번만 알고 계시면 됩니다. 특히 _blank가 활용도가 높습니다.
그럼 _blank를 이용해 티스토리 링크를 걸어보겠습니다.
표시방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>링크</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a href="http://www.tistory.com" target="_blank">티스토리(블랭크)</a>
</body>
</html>
기본 속성인 href 속성 옆에 target 속성을 입력합니다.
실제 웹페이지
커서를 갖다대고 클릭하게 되면
티스토리 홈페이지가 새탭에서 열리는 것을 확인할 수 있습니다.
간단하죠?
주소 체계
<a>태그 안 href 속성을 이용해 주소를 넣을 때 어떻게 넣어야 할까요?
2가지 방법이 있습니다.
#1 절대 주소
- 외부 파일의 경우 : 프로토콜로 시작합니다.
예) <a href="http://xxx.com"></a>
- 해당 도메인에 있는 파일인 경우 : 해당서버 도메인부터 시작합니다.
예) <a href="/"></a>
- 해당 서버 도메인 안의 ooo 폴더 안의 index.html 파일을 불러오려면 다음과 같이 입력합니다.
예) <a href="/ooo/index.html"></a>
#2 상대 주소
해당 도메인에서부터 링크를 시작합니다.
- 해당 폴더인 경우(.)
예) <a href="./index.html"></a>
- 상위 폴더인 경우(..)
예) <a href="../index.html"></a>
절대 주소와 상대 주소 중 절대 주소를 사용하는 것을 추천합니다.
링크 종류
링크를 티스토리 등 웹사이트 홈페이지만 링크를 걸 수 있는 건 아닙니다.
#1 메일 전송(mailto:~)
<a>태그를 이용해 메일을 전송하게 할 수 있습니다.
예) <a href="mailto:ooooo@ooo.com">메일보내기</a>
실제 웹페이지
클릭하면 다음과 같이 창이 뜹니다.
#2 전화 연결(tel:~)
<a>태그를 이용해 전화 연결도 가능합니다.
예) <a href="tel:000-000-0000">전화 걸기<a>
실제 웹페이지
<a>태그 안 글자를 클릭하면 PC에서는 사용가능한 전화 서비스(앱)로 연결되고
모바일에서는 바로 통화 가능하게 연결됩니다.
#3 아이디 활용(북마크)
내 문서(화면) 내에서 이동할 경우 아이디를 활용합니다.
이동할 요소의 아이디를 정해주고 <a>태그 href 속성을 활용해 주소 대신 이동할 요소의 아이디를 입력해주면 됩니다.
간단하게 각각 태그를 클릭하면 위, 중간, 아래로 화면이동하게 만들어보겠습니다.
표시 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>링크</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css"> -->> CSS로 위치 변경
body{
height: 3000px;
position: relative;
}
a{
text-decoration: none;
color: white;
background-color: green;
padding: 10px 20px;
}
#toup{
position: absolute;
bottom: 0;
}
#todown{
position: absolute;
top: 50px;
left: 0;
}
#middle{
position: absolute;
top: 50%;
}
#dpdown{
position: absolute;
bottom: 50px;
}
</style>
</head>
<body>
<p id="top">top</p>
<br><br>
<a href="#top" id="toup">위로</a>
<a href="#middle">중간으로</a>
<p id="middle">middle</p>
<a href="#dpdown" id="todown">아래로</a>
<p id="dpdown">footer</p>
</body>
</html>
실제 웹페이지
높이가 조금 축소하긴 했는데 전체 페이지는 이렇고 실제로는 스크롤이 생성되게 CSS로 body의 height를 늘려줬습니다.
top 위치에 있는 [아래로]를 클릭하면 footer 위치로 화면이 이동합니다.
또한 footer 위치의 [위로]를 클릭하면 top 위치로 화면이 이동합니다.
top 위치에 있는 [중간으로]를 클릭하면 middle 위치로 이동하게 됩니다.
#4 버튼 이벤트 활용
<a>태그를 사용하지 않고도 button을 이용해 링크를 걸 수 있습니다.
- 외부 주소 입력 시
예) <button onclick="document.location='http://www.tistory.com'">티스토리</button>
- 해당 파일 내 화면 이동 시
위의 #3 화면 위치 이동에서 버튼 이벤트를 활용할 수도 있겠습니다.
예) <button onclick="document.location='#top'">위로</button>
실제 웹페이지(외부 주소 입력 시)
티스토리 버튼을 누르면 티스토리 홈페이지로 이동하는 것을 확인할 수 있습니다.
'IT > HTML' 카테고리의 다른 글
| HTML5 - 테이블 태그 (0) | 2020.11.26 |
|---|---|
| HTML5 - 리스트(목록) 태그 (0) | 2020.11.26 |
| HTML&CSS-위치 변경하기 (0) | 2020.11.25 |
| HTML-글자 태그 (0) | 2020.11.25 |
| HTML 태그 (0) | 2020.09.29 |
댓글