9. HTML 링크
<HTML 링크>
: HTML의 하이퍼 링크를 클릭하면 다른 문서로 이동을 할 수 있습니다.
- HTML에서 링크는 <a>태그로 정의됩니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2><a href="https://ro-mantic.tistory.com">ROMANTIC</a>
</body></html>
실행 결과
- 지역 링크
: 위에 예제에서는 절대URL(웹 주소)를 사용했습니다.
지역 링크는 상대URL로 지정됩니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2><p><a href="hhtml_images.asp">HTML Link</a>Romantic</p>
</body></html>
실행 결과
- HTML 링크 색상
기본적으로 링크는 다음과 같이 표시됩니다.
● 방문하지 않은 링크에는 밑줄이 그어져 파란색으로 표시됩니다.
● 방문한 링크에 밑줄이 그어지고 자주색입니다.
● 활성 링크에는 밑줄이 그러지고 빨간색으로 표시됩니다.
--> CSS를 사용하여 기본 색상을 변경할 수 있습니다.
EX)
<!DOCTYPE html>
<html>
<body>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style></head>
<h2>Link Colors</h2><p>링크 색상</p>
<a href="https://ro-mantic.tistory.com" target="_blank>Romantic</a>
</body></html>
실행 결과 (오른 쪽 = 마우스를 위에 올렸을 때)
- HTML 링크 -> 대상 속성
: target 속성은 링크 괸 문서를 open 할 위치를 지정합니다.
● _blank = 새 창이나 탭에서 링크 된 문서를 엽니다.
● _self = 클릭한 곳과 동일한 창 / 탭에서 링크 된 문서를 엽니다(기본 값).
● _parent = 링크 된 문서를 부모 프레임에 엽니다.
● _top = 창 전체에서 링크 된 문서를 엽니다.
● framename = 명명 된 프레임에 링크 된 문서를 엽니다.
- 이미지를 링크로 사용하기
EX)
<!DOCTYPE html>
<html>
<body>
<h2>Image Links</h2><p>Romantic</p>
<a href="https://ro-mantic.tistory.com">
<img src="smiley.gif" alt="HTML tutorial"style="width:42px;height:42px;border:0;">
</a>
</body></html>
실행 결과 (이미지 클릭 시 하이퍼 링크 되어있는 주소로 이동)
- 북 마크 만들기
: 독자가 웹 페이지의 특정 부분으로 이동할 수 있게 하는 데 사용됩니다.
웹 페이지가 길 경우 유용 할 수 있습니다.
링크를 클릭하게 되면 페이지가 책갈피가 있는 위치로 스크롤됩니다.
EX)
<!DOCTYPE html>
<html>
<body>
<p>Romantic</p>
<a href="#C4">Jump to Chapter 4</a>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
실행 결과
