HTML
HTML Link
carrot62
2020. 7. 21. 09:05
HTML 링크는 hyperlinks이다. 링크는 웹에서 마우스 클릭만으로 한 페이지에서 다른 페이지로 넘어갈 수 있도록 해준다.
- <a>: 링크를 정의할 때 사용하는 태그
- href: 링크의 주소를 정의할 때 사용하는 attribute
- <img> 를 <a>태그 안에서 사용해 이미지에 링크를 건다
- mailto: scheme을 href attribute 안에서 사용해서 이메일 프로그램을 여는 링크를 만들 수 있다
<a href="mailto:someone@example.com">Send email</a>
기본 문법
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
링크 기본 설정 (CSS를 이용해서 재조정하는 것도 가능한다)
- unvisited link
- visited link
- active link
추가적인 attribute
target: 문서를 어디서 여는지 명시해준다
_self: 기본설정, 문서가 열렸던 같은 window/tab에서 문서를 연다
_blank: 새로운 window 나 tab에서 문서를 연다
_parent: parent frame에서 문서를 연다
_top: full body of the window에서 문서를 연다
절대 URL 과 상대 URL
-
absolute url: has a full web address
-
relative url: a local link(without the "https://www" part)
Link Types
- img
- mailto
- href="mailto:user@gmail.com">
- button
HTML Link 색 지정
<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>
<a href="html_images.asp" target="_blank">HTML Images</a>
</body>
Link 버튼 만들기
<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>
HTML Bookmark 만들기