반응형
Style Links
CSS로 Links를 꾸밀 수 있다. (e.g color, background, font-family, etc)
4가지 링크 상태들이 존재한다.
a:link -> 방문하지않는 일반적인 링크
a:visited -> 사용자가 방문한 링크
a:hover -> 사용자가 마우스를 위에 올려 놓았을 때 링크
a:active -> 클릭하는 순간의 링크
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
a:link{
color:aqua;
}
a:visited{
color:red;
}
a:hover{
color:lightgreen;
}
a:active{
color:blueviolet;
}
</style>
</head>
<body>
<h2>링크 스타일 꾸미기</h2>
<p><b><a href ="https://youknow301.tistory.com/" target="_blank">링크에 대해 알아보기</a></b></p>
<p>위의 설명을 읽고 링크에 대한 특성을 알아보기</p>
</body>
</html>위 코드를 직접 입력해보고 링크의 특징을 알아보자
Text Decoration
링크 스타일에 text decoration을 추가할 수 있다.
아래 예시코드를 직접 입력해보고 확인해보자!
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
a:link{
color:aqua;
}
a:visited{
color:red;
}
a:hover{
color:lightgreen;
text-decoration: underline;
}
a:active{
color:blueviolet;
text-decoration:underline;
}
</style>
</head>
<body>
<h2>링크 스타일 꾸미기</h2>
<p><b><a href ="https://youknow301.tistory.com/" target="_blank">링크에 대해 알아보기</a></b></p>
<p>위의 설명을 읽고 링크에 대한 특성을 알아보기</p>
</body>
</html>
Link 버튼
링크 버튼도 마찬가지로 CSS를 통하여 꾸밀 수 있다.
아래는 예시코드이다. 복사하고 터미널에 붙여넣어 실행결과 확인해보자!
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
a:link, a:visited{
color:aqua;
background-color: red;
padding: 14px 25px;
border:2px solid black;
text-align:center;
display:inline-block;
text-decoration:none;
}
a:hover, a:active{
color:lightgreen;
background-color:blue;
}
</style>
</head>
<body>
<h2>링크 스타일 꾸미기</h2>
<p><b><a href ="https://youknow301.tistory.com/" target="_blank">링크에 대해 알아보기</a></b></p>
<p>위의 설명을 읽고 링크에 대한 특성을 알아보기</p>
</body>
</html>
반응형
'웹프로그래밍 > CSS' 카테고리의 다른 글
| [CSS] 테이블(tables)의 모든 것 (0) | 2023.09.12 |
|---|---|
| [CSS] 리스트(Lists) (0) | 2023.09.12 |
| [CSS] Fonts(폰트)의 모든 것 (0) | 2023.09.11 |
| [CSS] 텍스트에 관한 모든 것 (0) | 2023.09.11 |
| [CSS] 높이 너비 최대-너비(Height, Width, Max-width) (0) | 2023.09.11 |
댓글