html a 태그로 하이퍼링크(하이퍼텍스트, 하이퍼미디어)와 다운로드 링크 만들기
네 안녕하세요, 이번 포스팅에서는 html에 하이퍼링크와 다운로드 링크를 다는 방법에 대하여 알아보도록 하겠습니다..
우리가 문서를 작성할 때 참고자료 등을 링크를 통해 공유하는 경우가 정말 많을 것입니다.
이번 시간에는 그걸 이용하는 방법을 배울 겁니다.
이 하이퍼링크를 어디에 다느냐에 따라서 명칭도 조금씩 바뀌게 되는데,
그 부분도 어떻게 바뀌는지 같이 보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 하이퍼링크 만들기 : a 태그 이용
a 태그는 anker(닻)라는 단어에서 따온 태그입니다.
다시 말하면 특정 사이트의 링크에 닻을 걸어서 그곳으로 이동하게끔 길을 만들어준다 생각하시면 됩니다.
그래서 이 태그를 이용해서 특정 사이트나 파일의 url을 입력해서 웹 페이지 상에서 나타냅니다.
보통 a태그를 쓰는 방법은 이러합니다.
<a href="url"|"url#앵커이름"|"#엥커이름" target="윈도우명" download>내용</a>
<!-- href : 이동할 html 페이지의 url 또는 html 페이지의 앵커 이름
target : 링크에 연결된 html 페이지가 출력될 윈도우의 이름을 지정해주는 속성
download : 링크가 클릭되면 href에 지정된 파일을 다운로드 할 수 있게 해주는 속성 -->이렇게 a태그에 사용할 수 있는 다양한 속성들이 존재합니다.
그중에서도 href와 target을 제일 많이 쓰고, href는 링크를 달 때 쓰기 때문에 필수라고 보시면 됩니다.
그리고 아까 이미지에도 링크를 달 수 있다고 그랬었죠?
이미지에는 링크를 이런 식으로 달면 됩니다.
<a href="http://www.naver.com"> //이미지 파일 클릭 시 연결이 될 사이트 주소
<img src="naver.png" alt="네이버사이트"> // 링크를 달고자 하는 이미지 파일의 url
</a>이렇게 img 태그를 이용을 해서 이미지 파일에 가고자 하는 사이트의 링크 주소를 달아주면 됩니다.
그리고 여기서 하이퍼링크의 명칭이 갈리게 되는데,
글자에 링크를 달게 되면 '하이퍼텍스트'라고 부르고,
이미지나 동영상 등 영상에 링크를 달게 되면 '하이퍼미디어'라고 부릅니다.
그럼 이제 이들을 이용한 간단한 예제를 통하여 알아보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><h3>링크 만들기</h3>
<hr>
포털 사이트
<ul>
<li><a href="http://www.naver.com">네이버</a></li>
<li><a href="http://www.daum.net">다음</a></li>
</ul>
신문 사이트
<ul>
<li><a href="http://www.etnews.com">
<img src="media/iconetnews.png" alt="전자신문">
</a>
</li>
<li>
<a href="http://www.chosun.com">
<img src="media/iconchosun.png" alt="조선일보">
</a>
</li>
</ul>
<hr>
<a href="2-17.html">예제 2-17로 이동</a></title>
</head>
<body>
<h3>링크 만들기</h3>
<hr>
포털 사이트
<ul>
<li><a href="http://www.naver.com">네이버</a></li>
<li><a href="http://www.daum.net">다음</a></li>
</ul>
신문 사이트
<ul>
<li><a href="http://www.etnews.com">
<img src="media/iconetnews.png" alt="전자신문">
</a>
</li>
<li>
<a href="http://www.chosun.com">
<img src="media/iconchosun.png" alt="조선일보">
</a>
</li>
</ul>
<hr>
<a href="2-17.html">예제 2-17로 이동</a>
</body>
</html>이런 식으로 각각 하이퍼텍스트, 하이퍼미디어, 그리고 본인이 저장한 링크의 주소 역시 기재를 할 수 있습니다.
그럼 결과화면을 통하여 같이 보실까요?
이렇게 각각의 하이퍼텍스트와 하이퍼미디어를 클릭했을 때 페이지로 이동을 합니다.
원래는 새 창이 열리는 게 아니라 바로 해당 사이트로 이동을 하는데,
어떤 사이트로 이동하는지 보여주기 위해서 새 창에서 열었습니다.
2. id 속성으로 앵커 만들기
html 속성 중에서는 id라는 속성도 존재하는데,
id 속성은 이름을 지정해주는 속성입니다.
예를 들어서 태그에 있는 id속성에 이름을 지정해 주면 어떤 태그든 상관없이 그 위치에 앵커(링크)가 만들어집니다.
그럼 간단한 예제 코드를 통하여 같이 보실까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>링크와 앵커</title>
</head>
<body>
<h3>ELvis Presley</h3>
<hr>
<ul>
<li><a href="#love">Love me tender</a>
</li>
<li><a href="#can">Can't help falling in love</a>
</li>
<li><a href="#it">It's now or never</a>
</li>
</ul>
<h3 id="love">Love me tender</h3>
Love me tender, love me sweet, Never let me go<br>
You have made my life complete,
And I love you so<br>
Love me tender, love me true,<br>
All my dreams fulfilled.<br>
For my darling I love you, And I always will.<br>
<h3 id="can">Can't help falling in love</h3>
Love me tender, love me sweet, Never let me go.<br>
You have made my life complete, And I love you fulfilled.<br>
For my darling I love you, And my dreams fulfilled.<br>
For my darling I love you, and I always will.<br>
<h3 id="it">It's now or never</h3>
IT's now or never, Come hold me tight<br>
Kis sme darling, Be mine tonight<br>
Tomorrow will be too late,<br>
It's now or never, My love won't wait.<br>
</body>
</html>이런 식으로 작성을 할 수 있습니다.
여기에 보면 id속성으로 각각 love, can, it으로 지정을 해두었죠?
그래서 이렇게 생긴 앵커가 있기 때문에 화면을 줄여서 확인을 해보시면
ul 태그로 생성이 된 문구를 클릭하면 그에 해당하는 굵은 글씨가 있는 곳으로 넘어가는 것을 볼 수 있습니다.
그럼 결과화면을 같이 보실까요?
전체적인 결과는 이러합니다.
ul태그로 작성이 된 불규칙적인 리스트와 엘비스 프레슬리가 부른 'Love me tender'의 가사가 적혀있습니다.
그리고 결과 확인을 위해 화면 크기를 줄이고 각각의 링크를 클릭한 결과는 이렇습니다.
 |
 |
 |
이런 식으로 각각을 클릭했을 때 굵은 글씨로 넘어가는 것을 볼 수 있습니다.
이렇게 지정을 해두면 필요한 부분만 볼 수 있기 때문에 일률이 확 증가한다는 장점이 있습니다.
3. 파일 다운로드 링크 만들기 : download 속성 이용
아까 언급했듯이 파일을 다운로드할 수 있는 링크 역시 만들 수 있습니다.
download 속성을 이용하여 만들 수 있는데, 이 속성으로 모든 유형의 파일들을 다운로드할 수 있기 때문에
a 태그에다가 download라는 문구만 넣으면 바로 다운 링크가 만들어지니 매우 편리합니다.
그럼 예제 코드를 통해서 함께 보실까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파일 다운로드</title>
</head>
<body>
<h3>친구들아! 여기서 다운받아!</h3>
<hr>
<ul>
<li><a href="media/Elvis.png" download="">엘비스 이미지 다운로드</a>
</li><li><a href="media/chapter.9.pdf" download="">chapter9.pdf 다운로드</a>
</li><li><a href="media/EmbraceableYou.mp3" download="">mp3 다운로드</a>
</li><li><a href="2-09.html" download="">에제 2-9 HTML 파일 다운로드</a>
</li><li><a href="media/test.hwp" download="">한글 파일 다운로드</a>
</li>
</ul>
</body>
</html>이런 식으로 어떤 유형의 파일이든 만들어낼 수 있습니다.
공유 네트워크 사용이 힘들 때 이런 식으로 웹 페이지 내에 있는 링크를 만들어 보내면
개별적으로 다들 다운이 가능하여 매우 편리하겠죠?
그래서 이를 이용한 결과화면은 이렇습니다.
이런 식으로 제가 다운로드하고자 하는 파일이 있는 링크를 누르면 바로 다운이 되는 것을 볼 수 있습니다.
여기까지 하이퍼링크를 다는 여러가지 방법에 대하여 알아보았습니다.
다음 포스팅에서는 인라인 프레임을 만드는 방법에 대하여 알아보는 시간을 가져보도록 하겠습니다.
긴 글 읽어주신 독자분들께 다시 한 번 감사드립니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html target 속성에 대하여 알아보기 (0) | 2023.03.02 |
|---|---|
| html iframe 태그로 인라인 프레임 사용하기 (0) | 2023.03.02 |
| html 고급 문서 만들기 3 - table 태그로 표 만들기 (0) | 2023.03.01 |
| html 고급 문서 만들기 2 - ol, ul, dl 태그로 리스트 만들기 (0) | 2023.03.01 |
| html 고급 문서 만들기 1 - img 태그로 이미지 삽입하기 (0) | 2023.03.01 |
댓글