HTML CSS 링크(link) 작성 방법 예제

HTML에서 링크를 작성하는 방법을 알아보겠습니다.

그리고 작성한 링크를 CSS로 디자인 하는 방법도 알아보겠습니다.

링크 작성해 보기

URL을 클릭하면 지정한 사이트나 페이지로 이동하도록 링크를 붙여보겠습니다.

<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8">
    <title>테스트</title> 	
    <link rel="stylesheet" href="style.css"> 
  </head>
  <body> 
    <h1>웹 사이트</h1>
    <p>이 웹 사이트는 테스트를 위한 사이트입니다. <br>
      테스트 내용을 작성해주세요. 
      다음과 같이 작성 했습니다.
    </p> 	
    <p><a href="http://naver.com/">Naver</a>에 이동합니다.</p> 	
  </body> 
</html>

<a> 태그에 감싼 부분이 링크가 되고, href 속성값 (href=”값”)에 URL을 입력하여 지정한 사이트에 링크를 지정할 수 있습니다.

<!DOCTYPE html> 
<html lang="kr">
  <head> 
    <meta charset="UTF-8"> 	
    <title>테스트</title> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
  <body>
    <h1>웹 사이트</h1>
    <p>이 웹 사이트는 테스트를 위한 사이트입니다. <br>
      테스트 내용을 작성해주세요. 
      다음과 같이 작성 했습니다.
    </p> 
    <p><a href="http://naver.com/" target="_blank">Naver</a>에 이동합니다.</p> 
  </body>
</html>

표시 예

target=”_blank”를 넣어주면 현재 창이 아닌 다른 창을 열어 지정한 페이지로 이동할 수 있습니다.

다음은 링크의 스타일을 조금 변경해 보도록 하겠습니다.

@charset "UTF-8";
/* 텍스트 CSS */
h1 {
  color : #cc0033; 
  font-size : 24px; 
  text-align : center;
}
p { 
  color: #666;
  font-size : 18px; 
  line-height : 26px; 
  text-align : center; 
} 
a {
  text-decoration : none; 
}

링크의 기본 설정으로 링크의 텍스트 부분에 밑줄이 그려져 있습니다.

(text-decoration: underline）밑줄을 지우고 싶을 경우에는 text-decoration: none; 을 작성해 주는 것으로 삭제할 수 있습니다.

많은 웹 사이트에서는 링크에 마우스 포인터를 올려놓으면 색이 변하는 것일 자주 볼 수 있습니다.

CSS에 코드를 작성해 보도록 하겠습니다.

@charset "UTF-8";
/* 텍스트 CSS */ 
h1 {
  color : #cc0033; 
  font-size : 24px; 
  text-align : center;
} 
p { 
  color: #666; 
  font-size : 18px; 	
  line-height : 26px; 
  text-align : center; 
} 
a { 
  text-decoration : none; 
} 
a:hover { 	
  color : #6699ff; 
  text-decoration : underline; 
}

표시 예

:hover는 유사 클래스를 호출하는 것으로, 이것을 사용하면 마우스 포인터를 올려놓았을 경우 스타일을 변경할 수 있습니다.

CSS에서는 색을 바꾸고 밑줄을 표시하도록 지정하고 있습니다.

그 외에도 링크로 방문했었던 곳의 링크도 CSS로 색을 변경할 수 있습니다.

@charset "UTF-8";
/* 텍스트 CSS */
h1 { 
  color : #cc0033; 
  font-size : 24px; 	
  text-align : center; 
  } 
p { 
  color: #666; 	
  font-size : 18px; 	
  line-height : 26px;
  text-align : center;
}
a { 
  text-decoration : none; 
} 
a:visited { 	
  color : #999; 
}
a:hover { 
  color : #6699ff; 
  text-decoration : underline;
}

표시 예

이것으로 방문했던 링크의 스타일을 변경해 보았습니다.

다음은 클릭할 때만 스타일을 적용하는 방법입니다.

@charset "UTF-8";
/* 텍스트 CSS */ 
h1 { 
  color : #cc0033; 
  font-size : 24px; 
  text-align : center; 
}
p { 
  color: #666; 
  font-size : 18px;
  line-height : 26px; 	
  text-align : center; 
} 
a { 	
  text-decoration : none;
} 
a:visited { 	
  color : #999;
} 
a:hover {
  color : #6699ff;
  text-decoration : underline; 
} 
a:active { 
  color : #993366; 
}

표시 예