728x90
반응형
동적 셀렉터
:link는 한 번도 방문하지 않은 셀렉터
:visited는 한 번이라도 방문을 했던 셀렉터
:hover는 셀렉터에 마우스 커서를 올렸을 때
:active는 셀렉터가 클릭된 상태일 때
:focus는 셀렉터에 포커스가 들어와 있을 때
<코드 예시>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>2022. 5. 23. - 오전 12:01:43</title>
<style>
a:link, a:visited{
border: 2px solid green;
text-decoration: none;
color:black;
background-color: white;
padding: 10px 20px;
}
a:hover, a:active{
background-color: red;
color: white;
}
</style>
</head>
<body>
<h3>ex01.html - link 태그 </h3>
<a href="#" tager="_blank">This is a link</a>
</body>
</html>
<적용결과>
<코드 예시>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>2022. 5. 23. - 오전 9:20:01</title>
<style>
body{
margin: 0;
}
.icon-bar{
background-color: #555;
width: 90px;
position: relative; /* 위치를 주겠다. */
}
.icon-bar a{
display: block;
text-align: center;
color: white;
font-size: 36px;
padding: 16px;
}
.icon-bar a:hover{
background-color: #000;
}
.icon-bar a.active{
background-color: #4caf50;
}
</style>
</head>
<body>
<!-- .icon-bar>a[href=#]*5>i[class] -->
<div class="icon-bar">
<a href="#" class="active"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
</body>
</html>
<적용 결과>
* 참고
728x90
반응형