<!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>결과
'Coding > HTML' 카테고리의 다른 글
| 홈페이지 샘플 만들어보기 (0) | 2022.05.30 |
|---|---|
| 13. CSS3와 애니메이션 : 트랜지션 /애니메이션 (0) | 2022.05.23 |
| HTML5와 멀티미디어 : 웹과 멀티미디어 / 오디오 & 비디오 재생하기 (0) | 2022.05.09 |
| [html] 간단한 실습 : 홈페이지 만들어보기 (0) | 2022.04.25 |
| [HTML]07. 배경 색과 배경 이미지 / 그라데이션 효과로 배경 꾸미기 (0) | 2022.04.11 |
