안녕하세요.
콤퓨타 학원에 원장을 하고 있는 이프로입니다. 헤헴 ^^
이번 강의는 하이퍼링크에 대하여 이야기 할 건데요.
우리가 흔히 네이버 같은 사이트에 들어가게 되면 여러 메뉴들을 볼 수 가 있는데요.
그걸 클릭하면 새로운 화면으로 이동하게 되는데요.
이런 기능을 html에서 하이퍼링크라고 해요.
특정 글자나 이미지 같은 태그를 클릭하면 지정된 화면으로 이동되는 특징이 있어요.
사전작업
하이퍼링크를 공부하기전에 준비해야할 것이 잇는데요. 하이퍼링크가 특정 문구나 이미지 같은 걸 클릭하면 지정된 다른 화면으로 이동하는 기능이라고 말씀드렸는데요.
그렇게 할려면 이동될 화면이 필요해요.
기존에 index.html파일만 만들었으니 추가로 test.html파일을 하나 추가로 만들고html5 형식을 맞춘 다음에 test라고 입력해둘거에요.
그렇게되면 화면을 이동했을때 이동이 잘 되었는지 확인을 할수 있으니까요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
test
</body>
</html><test.html 파일>
A태그 문법
<a href="이동할페이지">하이퍼링크 처리할 텍스트 영역</a><br>
<a href="test.html">테스트 페이지 이동</a>
href는 이동하려는 목적지 주소를 입력하는 부분이에요.
<a>에서 </a> 사이에 있는 영역은 브라우저에 보여줄 부분이에요.
브라우저에서 보시면 파란색에 밑줄이 있는데요.
'테스트 페이지 이동' 링크를 클릭하면 test.html화면으로 이동되는걸 확인 할수 있어요.
href 경로 사용법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
sub page<br>
<a href="../index.html">main 화면으로 이동</a>
</body>
</html><sub.html>
테스트를 위해서 subpage/sub.html 파일을 생성했어요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="이동할페이지">하이퍼링크 처리할 텍스트 영역</a><br>
<a href="test.html">테스트 페이지 이동</a><br>
<a href="subpage/sub.html">sub 페이지 이동</a><br>
<a href="http://naver.com">네이버로 이동</a><br>
</body>
</html><index.html 파일 수정>
우선 index.html에서 subpage/sub.html 부분을 살펴볼께요.
화면에서 sub페이지 이동을 클릭하면 subpage/sub.html 파일을 불어오는 걸 확인 하실수 있는데요.
VS Code경로와 같은 구조를 사용한다는걸 아실수 있을 거에요.
'main 화면으로 이동' 부분을 클릭하면 다시 메인 화면(index.html)로 이동되는 걸 아실수 있는데요.
이부분의 경로를 다시 한번 보도록 하겠습니다.
<a href="../index.html">main 화면으로 이동</a>href부분이 ../index.html로 되어 있습니다.
상대 경로를 이용해서 상위 위치의 index.html파일을 불러오도록 설정된 것을 아실 수 있을 거에요.
상대 경로 말고 절대 경로도 있는데요. 자세한 것은 별도 강의를 만들도록 할께요.
'sub 페이지 이동' 하단에 '네이버로 이동' 링크가 있는데요.
href 부분을 확인해보시면 네이버 주소가 입력되어 있다는 걸 확인 할 수 있을거에요.
링크를 클릭하면 실제로 네이버 이동 되는 걸 확인 할 수 있어요.
이렇게 href에 다양한 주소를 입력해서 이동을 할수 있도록 할수 있어요.
target 속성
<a href="http://naver.com" target="_blank">네이버로 이동</a><br>현재 소스를 적용하여 링크를 클릭해볼께요.
보시면 아시겠지만 새로운 창 또는 탭이 열리면서 네이버로 이동되는 걸 확인 하실수 있는데요.
target 속성에 의해서 새창 또는 새탭이 열리는거에요.
target의 속성의 주요 속성과 기능을 한번 이야기 해볼께요.
_self : target을 사용하지 않으면 기본으로 설정되는 값으로 링크 클릭 시 현재 보고 있는 화면에서 이동하게 되요.
_blank : 새창 또는 새탭을 열어 해당 경로로 이동하게 되요.
_parent, _top 등등 여러가지 더 있지만 좀 더 복잡한 화면을 만들면서 필요로 하는데
이부분은 추후에 예제를 만들어보면서 확인해보도록 할게요.
링크를 만들어 화면을 이동하는 방식은 a태그 말고도 정말 다양한 방식들이 있는데요.
아직 해당 부분을 설명하기에는 아직 강의를 듣는 분들이 추가로 알아야 하는 부분들이 있는데요.
기초 부분을 마치고 좀 더 심화된 이야기 할때 또 자세히 다루도록 할께요.
이번 강의는 여기까지에요.
여러분들의 관심과 사랑이 있다면 좀 더 좀은 컨텐츠를 제공해줄 수 있을거 같습니다.
많은 관심과 사랑 부탁드립니다.
감사합니다.
그럼 콤빠~
'웹개발 > HTML 간단태그소개' 카테고리의 다른 글
| 09. Body - Table (2) | 2024.01.02 |
|---|---|
| 08. Body - 이미지 (0) | 2024.01.02 |
| 06. Body - style(스타일) (0) | 2024.01.01 |
| 05. Body - 텍스트 꾸밈 (0) | 2024.01.01 |
| 04. Body - 제목, 단락 (0) | 2024.01.01 |
