Coding/HTML
CSS3 선택자 : 가상 클래스와 가상 요소
찡콩찡
2022. 5. 16. 15:41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul.navi li {
list-style: none;
display: inline-block;
width: 8em;
height: 3em;
float: left;
text-align: center;
border: 1px #818181 solid;
box-shadow: 1px 1px 1px #bbb;
}
ul.navi li a {
text-decoration: none; /*밑줄없애기*/
color: #292929;
display: inline-block;
padding: .8em .5em .5em .5em; /*위 오른쪽 아래 왼쪽*/
text-shadow: 1px 1px 0px #333333;
}
ul.navi li:hover {
background: #333333;
}
ul.navi li:hover > a { /*왜 a보다 크게 해놨어? */
color:#fff;
text-shadow: 0px 1px 0px #fff;
}
ul.navi li:first-child {
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
ul.navi li:last-child {
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
}
</style>
</head>
<body>
<div>
<ul class="navi">
<li> <a href="#">Hoem</a></li>
<li> <a href="#">HTML5</a></li>
<li> <a href="#">CSS3</a></li>
<li> <a href="#">Query</a></li>
</ul>
</div>
</body>
</html>결과 1 >>
결과 2 >>
가상 클래스와 가상요소
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 960px;
margin: 0 auto;
}
ul li {
margin: 15px;
}
li.hot::after {
content: "NEW!";
font-size: x-small;
padding: 2px 4px;
margin: 0 10px;
border-radius: 2px;
background:#f00;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1>제품목록</h1>
<ul>
<li class="hot">제품 A</li>
<li>제품 B</li>
<li>제품 C</li>
<li class="hot">제품 D</li>
</ul>
</div>
</body>
</html>결과
