본문 바로가기
IT/웹디자인

HTML 링크 태그 사용법 / CSS 링크색상 지정하기

by Happy Log 2018. 5. 31.
반응형

HTML링크태그 CSS링크색상

 

HTML 링크 태그 사용법

 

  HTML 링크 태그 기본 구조

<a href="주소(URL)">링크 텍스트 또는 이미지</a>

 

  HTML 링크 태그 속성(target) 지정

<a href="주소(URL)" target="속성값">링크 텍스트 또는 이미지</a>

 

  target 속성 값

  • _blank : 새 창이나 탭에서 링크 된 문서(웹화면)가 열립니다.
  • _self : 현재 창에서 링크 된 문서가 열립니다.(기본값)
  • _parent : 링크 된 문서가 현재 창의 부모창에서 열립니다.
  • _top : 창 전체에서 링크 된 문서가 열립니다.
  • framename : 해당 프레임명을 가진 프레임에서 링크 된 문서가 열립니다.

 

  예제

 

<!DOCTYPE html>
<html>
<head>
  <title>링크태그연습</title>
</head>

<body>

  <a href="http://tistory.com" target="_blank">HappyLog</a>
  <br><br>
  <a href="http://tistory.com" target="_self"><img src="HappyLog.png"></a>

</body> 

</html>

 

 

  결과

링크 결과

 

 


 

 

CSS 링크색상 지정하기

 

  CSS 링크색상 지정방법

  • a:link : 링크텍스트 기본 값

  • a:visited : 방문 후 링크 설정 값

  • a:hover : 마우스 오버했을 때 링크 설정 값

  • a:active : 클릭했을 때 링크 설정 값

  예제

 

<!DOCTYPE html>
<html>
<head>
  <title>링크태그연습</title>

 

  <style>
    a:link {
      color: blue;
      text-decoration: none;
    }

    a:visited {
      color: darkred;
      text-decoration: none;
    }

    a:hover {
      color: red;
      text-decoration: underline;
    }

    a:active {
      color: orange;
      text-decoration: underline;
    }
  </style>


</head>

<body>

  <a href="http://tistory.com" target="_blank">HappyLog</a>

</body> 

</html>

 

  결과

CSS링크색상 결과

반응형

댓글