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 만들기