Home
CSS
CSS 실전 예제

링크가 걸린 글자 꾸미는 방법

링크는 a 태그로 만듭니다. 따라서 a 태그를 선택하여 꾸밉니다. 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. :link - 방문하지 않은 링크 :visited - 방문했던 링크 :hover - 마우스가 올려진 링크 :active - 클릭하는 순간 링크

링크 꾸미기

링크가 걸린 글자 꾸미는 방법은 <a> 태그를 선택하여 꾸밉니다.

예를 들어 아래 코드는 링크의 색을 빨간색으로 만듭니다.

a {
  color: red;
}

가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다.

  • a:link - 방문하지 않은 링크
  • a:visited - 방문했던 링크
  • a:hover - 마우스가 올려진 링크
  • a:active - 클릭하는 순간 링크

 

예제

  • 방문하지 않은 링크의 색은 파란색이고 밑줄이 없습니다.
  • 클릭했던 링크는 보라색에 밑줄 없이 나옵니다.
  • 마우스를 링크 위에 올리면 글자색이 빨간색으로 변하고 밑줄이 생깁니다.
  • 클릭하는 순간 글자색은 흰색으로, 배경은 녹색으로 변합니다.
<div>
  <h1>Navigation</h1>
  <ul>
    <li><a href="#01">Home</a></li>
    <li><a href="#02">HTML</a></li>
    <li><a href="#03">CSS</a></li>
    <li><a href="#04">JAVASCRIPT</a></li>
    <li><a href="#05">JQUERY</a></li>
  </ul>
</div>
a:link {
  color: skyblue;
  text-decoration: none;
}
a:visited {
  color: pink;
  text-decoration: none;
}
a:hover {
  color: red;
  text-decoration: underline;
}
a:active {
  color: white;
  background-color: green;
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

주의:
가상클래스는 순서를 지켜야 합니다. :hover는 :link와 :visited 뒤에 와야 하고, :active는 :hover 뒤에 와야 합니다. 위 순서를 그대로 따르는 것이 좋습니다.

Post a Comment