동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
동영상 강좌보기
CSS를 사용하면 링크를 다른 방식으로 스타일을 지정할 수 있습니다.
Styling Links(스타일 링크)
링크는 모든 CSS속성(예: color, font-family, background 등)으로 스타일을 지정할 수 있습니다.
a {
color: hotpink;
}
링크의 상태에 따라 다르게 스타일을 지정할 수 있습니다.
네 개의 링크 상태는 다음과 같습니다.
/* 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;
}
여러 링크 상태에 대한 스타일을 설정할 때 몇 가지 순서 규칙이 있습니다.
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;
}
등록된 댓글이 없습니다.