HTML 링크

### 링크

  <a>: 하이퍼링크를 정의한다. (end tag: </a>
  	ex) <a href="https://www.w3schools.com">Visit W3Schools</a>
    
  	href ="링크 " 링크 안에 연결할 페이지의 URL을 넣는다.
  
  	문법 : <a href="__url__">사용자에게 보여지는 글(이곳을 누르면 링크로 이동)</a>
    
  	target 속성
  		ex) <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
  
        _self : 기본, 클릭한 것과 동일한 창/ 탭에서 문서를 연다.
        
        _blank: 새 창/탭에서 문서를 연다.
        
        _parent: parent 프레임에서 문서를 연다.
        
        _top: 창 전체에서 문서를 연다. (parent와 비슷함)
        
    절대 URL: 전체 웹 주소
      ex) 
      <h2>Absolute URLs</h2>
      <p><a href="https://www.w3.org/">W3C</a></p>
      <p><a href="https://www.google.com/">Google</a></p>
      
    상대 URL: "https://www" 부분이 없다.
      ex) <h2>Relative URLs</h2>
      <p><a href="html_images.asp">HTML Images</a></p>
      <p><a href="/css/default.asp">CSS Tutorial</a></p>
      
        현재 웹 사이트의 html 폴더에 있는 페이지 연결
        	ex) <a href="/html/default.asp">HTML tutorial</a>
            
        현재 페이지와 동일한 폴더에 있는 페이지 연결
       	 ex) <a href="default.asp">HTML tutorial</a>
         
    이미지를 링크로 사용: <a> 태그 안에 <img>태그를 넣는다.
      ex)
      <a href="default.asp">
      <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
      </a>

    이메일 주소로 연결: mailto:메일주소 사용
    	ex) <a href="mailto:someone@example.com">Send email</a>
        
    링크 버튼으로 연결(JavaScript 사용)
    	ex)<button onclick="document.location='default.asp'">HTML Tutorial</button>
        
    링크 title : 링크에 마우스를 올리면 툴팁 텍스트로 표시된다.
    	ex) <a href="https://www.w3schools.com/html/" title="툴팁 텍스트로 나타낼 텍스트 입력">Visit our HTML Tutorial</a>
        
  링크 색상
  
    a:link : 링크의 색상 지정.
      ex)
      a:link {
       color: green;
       background-color: transparent;
       text-decoration: none;
      }
      
    a:visited : 방문 후 링크의 색상 지정
      ex)
      a:visited {
        color: pink;
        background-color: transparent;
        text-decoration: none;
      }
      
    a:hover : 링크에 마우스를 올렸을 때 색상 지정.
      ex)
      a:hover {
        color: red;
        background-color: transparent;
        text-decoration: underline;
      }
      
    a:active : 링크를 클릭할 때 색상 지정.
      ex)
      a:active {
        color: yellow;
        background-color: transparent;
        text-decoration: underline;
      }

    ex)
    <style>
     이 안에 위 예시들 첨가
    </style>
    
  링크 버튼
    ex)
    <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>
    
  북마크
  
    1. id를 지정하여 북마크를 만든다.
    	ex) <h2 id="C4">Chapter 4</h2>
        
    2. 북마크에 대한 링크를 추가한다.
    	ex) <a href="#C4">Jump to Chapter 4</a>
        
    다른 페이지의 북마크에 대한 링크를 추가할 수 있다. 
    	ex) <a href="html_demo.html#C4">Jump to Chapter 4</a>