동영상 강좌보기

CSS를 사용하면 링크를 다른 방식으로 스타일을 지정할 수 있습니다.

Styling Links(스타일 링크)

링크는 모든 CSS속성(예: color, font-family, background 등)으로 스타일을 지정할 수 있습니다.

a {
    color: hotpink;
}

링크의 상태에 따라 다르게 스타일을 지정할 수 있습니다.

네 개의 링크 상태는 다음과 같습니다.

• a:link - 일반적인 방문하지 않은 링크
  
• a:visited - 사용자가 방문한 링크
  
• a:hover - 사용자가 마우스를 올려 놓을 때의 링크
  
• a:active - 클릭한 순간의 링크
  

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

여러 링크 상태에 대한 스타일을 설정할 때 몇 가지 순서 규칙이 있습니다.

• a:hover는 a:link와 a:visited뒤에 와야 합니다.
  
• a:active는 반드시 a:hover뒤에 와야 합니다.
  

Text Decorartion

text-decoration속성은 일반적으로 링크에서 밑줄을 제거하는데 사용됩니다.

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

배경색(Background Color)

background-color속성은 링크의 배경색을 지정할 수 있습니다.

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
} 

고급 - 링크 버튼(Link Buttons)

아래 예제는 몇 가지 CSS속성을 결합하여 링크를 상자/버튼으로 표시하는 고급 예제를 보여줍니다.

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}