CSS Links
CSS로 link들은 다른 방식으로 꾸며질 수 있다.
Styling Links
링크는 어떤 CSS 속성을 써서 꾸며질 수 있다. (color, font-family, background 등)
a {
color: hotpink;
}
링크의 상태에 따라 다르게 꾸밀 수 있따.
a:link 방문되지 않은 링크
a:visited 사용자가 방문한 링크
a:hover 사용자가 마우스를 갖다 대면 동작, 반드시 a:link와 a:visited 이후에 와야 한다.
a:active 사용자가 클릭하는 동안 동작, 반드시 a:hover 이후에 와야 한다.
a:visited {
color: green;
}
Text Decoration
text-decoration 속성은 대부분 링크의 밑줄을 없애기 위해 쓰인다.
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Background Color
background-color는 링크의 배경색을 지정할 때 쓰인다.
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;
}