[HTML] 16. HTML 링크(2)
이전 글:
2020/03/23 - [HTML and CSS] - [HTML] 15. HTML 링크(1)
2020/03/19 - [HTML and CSS] - [HTML] 14. HTML CSS(2)
관련 글:
2020/03/23 - [HTML and CSS] - [HTML] 15. HTML 링크(1)
2020/03/12 - [HTML and CSS] - [HTML] 10. HTML 인용과 인용구
HTML 링크 두 번째 장에서는
앞에서 말했듯이 링크의 서식을 설정하는 법,
그리고 북마킹 기능에 대해서 알아보도록 하겠다.
브라우저에서 보이는 HTML 링크 서식에 대한 기본 값은 다음과 같다.
- 아직 방문되지 않은 링크는 파란색 색상을 띠며 밑줄이 그어져 있다.
- 방문된 링크는 보라색 색상을 띠며 밑줄이 그어져 있다.
- 활성화된 링크는 빨간색 색상을 띠며 밑줄이 그어져 있다.
어디까지나 위의 설정은 기본 설정이기 때문에
CSS를 사용하여 당신이 원하는 서식으로 변경이 가능하다.
다음을 보자.
<!DOCTYPE html>
<html>
<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>
<body>
<h2>Link Colors</h2>
<p>You can change the default colors of links</p>
<a href="https://honey-bear.tistory.com/" target="_blank">HTML Lecture</a>
</body>
</html>
위의 예시를 시행하면 기본 링크 색깔이 초록색,
방문 후에는 분홍색,
마우스를 올려놓으면 빨간색,
클릭 후에는 노란색이 된 것을 확인할 수 있다.
링크가 걸린 버튼 또한 CSS를 상용하여 서식 변경이 가능하다.
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="https://honey-bear.tistory.com/" target="_blank">This is a link</a>
</body>
</html>
위의 코드를 실행시키면 빨간색 박스로 되어있는 버튼이 생성되며,
글씨는 하얀색으로 나타날 것이다.
이와 같은 방법으로 언제든지 링크가 걸린 텍스트 혹은 버튼의 서식 변경이 가능하다.
그러면 이제 HTML 링크 북마크에 대해서 배워보도록 하자.
HTML 북마크 기능은 사용자가 해당 웹페이지의 특정 부분으로 이동하는 것을 가능하게 한다.
그렇기에 웹페이지 길이가 길수록 북마크 기능은 유용하다.
북마크를 생성하는 방법은 의외로 간단하다.
1) 북마크를 만들고, 2) 그것에 링크를 걸면 된다.
누군가 링크를 클릭하면 북마크가 걸려있는 곳으로 이동할 것이다.
예시를 보자.
첫 번째는, id 속성을 이용하여 북마크를 생성한다.
<h2 id="C4">Chapter 4</h2>그다음에는 그 북마크에 링크를 건다. (즉, 위에 북마킹 된 Chapter 4로 이동한다는 것)
예를 들면 다음과 같다.
<!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<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>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
위의 예시를 보면 href="#C4"와 href="#C10"을 통해서
id="C4"와 id="C10"으로 북마킹 되있는 곳으로 이동하는 게 함을 알 수 있다.
만약 해당 웹페이지가 아닌 다른 웹페이지에 있는 북마크로 이동하게 하고 싶다면
<a href="html_demo.html#C4">Jump to Chapter 4</a>위와 같이 해당 .html 파일을 지정한 다음 그 파일 안에 있는 북마크를 링크 걸어주면 된다.
요약하자면 다음과 같다.
- 해당 페이지에 북마크를 지정하고자 한다면 id속성(id="value")을 이용
- 해당 북마크로 이동하는 링크를 걸고 싶다면 href속성(href="#value")을 이용
이것으로 웹페이지에서 링크를 거는 방법에 대해서 상세하게 배웠다.
다음에는 웹페이지에서 이미지를 설정하는 법에 대해서 배울 것이다.
이미지가 사용되지 않는 HTML 웹페이지는 없으므로 유용한 내용이 될 것이니 놓치지 말자.