들어가며
웹 사이트는 여러 개의 HTML
페이지를 가지고,
페이지들이 상호 연결하는 방식으로
전체를 구성한다.
HTML 페이지에서 다른 HTML
페이지를 연결하는 고리를
하이퍼링크(hyperlink)라고 부른다.
하이퍼링크는 텍스트나 이미지에
다른 웹 페이지의 주소를 달아 만든다.
하이퍼링크는 같은 사이트에 다른
HTML 페이지뿐 아니라,
다른 사이트에 있는 웹 페이지를
연결하기도 한다.
하이퍼링크를 따라 다른 웹 페이지로
이동하는 것을
항해 혹은 내비게이션(navigation)이라
부른다.
하이퍼링크는 흔히 링크라고 줄여 부른다.
하이퍼링크 만들기, <a>
하이퍼링크 <a> 태그의 href
속성으로 만들며
다음은 <a> 태그의 속성들을
보여준다.
<a href="URL or URL#앵커이름 or #앵커이름"
target="윈도우 이름"
download>
텍스트 혹은 이미지
</a>
<!--
href: 이동할 HTML 페이지의 URL 혹은 HTML 페이지 내 앵커 이름
target: 링크에 연결된 HTML 페이지가 출력될 윈도우 이름지정
download: 링크가 클릭되면 href에 저장된 파일이 다운로드 됨
-->href 속성
하이퍼링크로 이동할 HTML 페이지의
URL은
<a> 태그의 href 속성에 지정한다.
같은 사이트의 HTML 페이지를
이동하는 경우,
href에는 다음과 같이 HTML 파일의
경로명만 지정하면 된다.
<a href="picturepage.html">클릭하면 사진 페이지로 이동합니다.</a>
<a href="student/register.thml">학생 등록 페이지로 이동합니다.</a>
다른 웹 사이트를 연결하는 경우
href에 "http://"로 시작하는
웹 사이트의 주소를 지정한다.
다음은 구글 사이트를 연결하는
링크를 만든 사례이다.
'구글'을 클릭하면 www.google.com이
연결된다.
<a href="http://www.google.com">구글</a>
href에 웹 사이트의 주소를 지정하는
것은 그 웹 사이트의
디폴트 HTML 페이지를 지정하는
것과 같다.
그러므로 앞에서 사용자가 '구글'을
클릭하면
브라우저는 구글 사이트의 디폴트
HTML 페이지를 전송받아 출력한다.
디폴트 HTML 파일은 대부분의 경우
index.html이나 default.html이다.
다음과 가티 링크에 HTML 파일명을
명확히 줄 수도 있다.
<a href="http://site.com/login.html">사이트 로그인</a>
이미지에 하이퍼링크 만들기
이미지에도 링크를 만들 수 있는데
다음은 google.png 이미지를
화면에 출력하고
이미지를 클릭하면 구글 사이트에
연결하는 링크를 만든 사례이다.
<a href="http://google.com">
<img src="google.png" alt="구글 사이트">
</a>
링크 텍스트의 색
링크 텍스트는 사용하는 과정에서
3가지 색으로 변경된다.
처음 링크(standard link)는 밑줄과
함께 'blue' 색상으로,
방문한 링크(visited link)는 'purple'
색상으로,
마우스로 링크를 누르고 있는 동안은
(active link) 'red' 색상으로 출력된다.
이러한 디폴트 색은 CSS3를 이용해
변경할 수 있다.
<!DOCTYPE html>
<html>
<head><title>링크 만들기</title></head>
<body>
<h3>링크 만들기</h3>
<hr>
포털 사이트
<ul>
<li><a href="http://google.com">구글</a></li>
<li><a href="http://naver.com">네이버</a></li>
<li><a href="http://daum.net">다음</a></li>
</ul>
신문 사이트
<ul>
<li><a href="http://thisisgame.com">
<img src="thisisgame.png" alt="디스이즈게임"></a></li>
<li><a href="http://gamemeca.com">
<img src="gamemeca.png" alt="게임메카"></a></li>
</ul>
<hr>
<a href="ex2-17.html">예제 2-17로 이동</a>
</body>
</html>방문한 링크의 색을 초기화 하는 방법
방문 후 링크는 'purple' 색상으로
바뀐다.
이것을 방문하지 않은 것처럼
되돌릴 수 없을까?
브라우저의 메뉴에서 히스토리
리스트를 지우면
방문 기록이 사라져 처음처럼
'blue' 색상으로 되돌릴 수 있다.
target 속성
target 속성은 링크에 연결된
웹 페이지가 출력될 윈도우(탭)를
지정하는 것으로,
사용할 수 있는 값은
- _black
- _self
- _parent
- _top
윈도우 이름의 5가지다.
target 속성을 이용하여 구글
사이트를
새 윈도우(창)에 출력하는 링크를
만들려면 다음과 같다.
<a href="http://google.com" target="_blank">구글</a> target 속성은 5절의 인라인 프레임에서
다시 설명하겠다.
<!DOCTYPE html>
<html>
<head>
<title>링크의 target 속성 활용</title>
</head>
<body>
<h3>링크의 target 속성 활용</h3>
<hr>
<ul>
<li><a href="http://www.google.com" target="_blank">구글(새 윈도우, _blank)</a></li>
<li><a href="http://www.naver.com" target="_self">네이버(현재 윈도우, _self)</a></li>
<li><a href="http://www.daum.net" target="_parent">다음(부모 윈도우, _parent)</a></li>
<li><a href="http://www.nate.com" target="_top">네이트(브라우저 윈도우, _top)</a></li>
</ul>
</body>
</html>
id 속성으로 앵커 만들기
긴 내용을 가진 웹 페이지를
읽을 때
사용자는 브라우저 스크린을
오르내리면서 읽어야 한다.
이런 어려움을 해소하고 문서를
쉽게 읽을 수 있도록
문서 내 특정 위치로 이동하는
링크를 만들 수 있도록 하였다.
문서의 특정 위치를 앵커(anchor)
라고 부른다.
앵커의 대표적인 예를 들어보자.
위키피디아에서 어떤 문서를
검색했는지에 따라서 다르지만,
대충 문서의 길이가 긴 문서라고
가정했을 때
각 장이나 절의 시작 위치에 앵커를
만들고
문서의 서두에 각 장이나 절의 앵커를
연결하는 목차(링크)를 두었다.
사용자가 위키피디아의 '목차' 부분에
있는 항목을 클릭하면
해당하는 항목의 본문 시작 부분으로
바로 이동한다.
앵커 만들기
HTML 이전 버전과 달리,
HTML5에서는 태그의 id 속성에
앵커 이름을 지정하면,
어떤 태그든 그 위치에 앵커가
만들어진다.
다음은 2개의 앵커를 만든 사례다.
<p id="chap1">1장 서론</p>
...
<h3 id="chap2">2장 본론</h3>
앵커에 연결하는 링크 만들기
<a href="#앵커이름">의 형식으로
앵커에 연결하는 하이퍼링크를
만들 수 있다.
다음은 앵커를 연결하는 링크 사례다.
<a href="#chap1">서론으로 가기</a>
<a href="#chap2">본론으로 가기</a>
다음은 같은 웹 사이트의
student.html 페이지의
chap1 앵커에 연결하는
링크 사례다.
<a href="student.html#chap1">학생 소개 부분으로 가기</a>
다음은 위키피디아의 '코로나19 범유행'
문서의
'원인' 앵커에 연결하는 링크 사례이다.
<a href="https://ko.wikipedia.org/wiki/코로나19_범유행#원인">원인</a><!DOCTYPE html>
<html>
<head>
<title>링크 만들기</title>
</head>
<body>
<h3>텐동 요츠야 메뉴</h3>
<hr>
<ul>
<li><a href="#토쿠죠">토쿠죠 텐동</a></li>
<li><a href="#사카마치">사카마치 텐동</a></li>
<li><a href="#에비죠">에비죠 텐동</a></li>
<li><a href="#에비텐쥬">에비텐쥬</a></li>
<li><a href="#요츠야">요츠야 텐동</a></li>
<li><a href="#스페셜">스페셜 텐동</a></li>
</ul>
<h3 id="토쿠죠">토쿠죠 텐동</h3>
아나고1/2, 새우2, 가라비관자, 단호박, 연근, 표고, 꽈리고추, 노리(김)
<br><br><br><br>
<h3 id="사카마치">사카마치 텐동</h3>
새우2, 전복, 시소이까(오징어를 깻잎에 만것), 베이비콘, 단호박, 연근, 표고, 꽈리고추, 노리(김)
<br><br><br><br>
<h3 id="에비죠">에비죠 텐동</h3>
새우1, 아스파라거스, 오징어, 단호박, 연근, 표고, 노리(김)
<br><br><br><br>
<h3 id="에비텐쥬">에비텐쥬</h3>
새우4
<br><br><br><br>
<h3 id="요츠야">요츠야 텐동</h3>
새우2, 오징어, 단호박, 연근, 표고, 꽈리고추
<br><br><br><br>
<h3 id="스페셜">스페셜 텐동</h3>
새우3, 전복, 오징어, 베이비콘, 단호박, 연근, 표고, 아스파라거스, 샬롯(분구형 양파), 노리
<br><br><br><br>
</body>
</html>
파일 다운로드 링크 만들기, <a>의 download 속성
<a> 태그의 download 속성은
이미지, PDF, MP3, HTML 파일 등
모든 파일을
다운로드 할 수 있는 링크를 만든다.
이때 다운로드 할 파일명은 href
속성에 지정한다.
예를 들어 다음은 슬픈 개구리 사진
pepe.png를
사용자 컴퓨터에 다운로드 하는
링크이다.
<a href="pepe.png" download>페페 사진 소매넣기</a>
HTML5는 웹 페이지에서 파일을
쉽게 다운로드 할 수 있도록
이 기능을 도입하였다.
Safari, IE, Edge에서는 download
속성이 작동하긴 하지만
약간 다르게 처리되므로 실행해보기
바란다.
<!DOCTYPE html>
<html>
<head>
<title>파일 다운로드</title>
</head>
<body>
<h3>대충 이것 저것</h3>
<hr>
<ul>
<li><a href="tendong.jpn">텐동 사진</a></li>
<li><a href="starcraft.zip">스타크래프트 립버전 1.16.1</a></li>
<li><a href="CCCP.mp3">소비에트 연방찬가</a></li>
</ul>
</body>
</html>참고 및 출처
 |
|
