반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<link href="css/ex06.css" rel="stylesheet">
</head>
<body>
<h1>css3 구현 예제 실습하기</h1>
<h2>풍선 도움말</h2>
<a href="#" class="tooltip">
힌트!
<span>
<h3>css실전예제1</h3>
<p>css만으로 구현하는 풍선 도움말</p>
</span>
</a>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
ul,li,ol{
list-style:none;
}
a{
text-decoration:none;
color:inherit;
}
/* 풍선도움말 만들기 */
a.tooltip, a.tooltip h3{}
a.tooltip span{
display:none;
padding:5px 10px;
margin-left:10px;
border-radius:5px;
box-shadow:5px 5px 8px gray;
}
a.tooltip:hover span{
position:absolute;
color:gray;
border:1px solid darkcyan;
background:snow;
display:inline;
}
3. HTML / CSS 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190623 Basic Study 62(드롭다운 네비게이션 바) (0) | 2019.06.23 |
|---|---|
| HTML5 - 190623 Basic Study 61(세로 네비게이션 바) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 59(풀화면 동영상 - 서브메뉴) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 58(박스 그림자 / 테두리 동적효과) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 57(Rotation Circle) (0) | 2019.06.23 |
