반응형
1. 반응 선택자
| 선택자:active | div:active | 클릭 시 |
| 선택자:hover | div:hover | 마우스 롤 오버 시 |
2. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 1일차</title>
<link href="css/ex05.css" rel="stylesheet">
</head>
<body>
<h1>url 단위</h1>
<h2>마우스를 올리세요</h2>
<div id="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>
3. CSS Code
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
ul, li{
list-style:none;
}
a{
color:black;
text-decoration:none;
}
/* 박스에 배경 그림 넣기 */
div#box1{
width:400px;
height:400px;
background-image:url(../img/3.png);
}
div#box1:hover{
background-image:url(../img/4.png);
}
div#box1:active{
background-image:url(../img/1.png);
}
h2:hover{
background:black;
color:white;
cursor:pointer; /* 마우스 손모양 */
}
h2:hover+div#box1{
background-image:url(../img/5.png);
}
div#box1:hover{
border-radius:50px;
transition:1s;
transform:scale(1.3) /* rotate(0) */; /* 크기 키우기(확대) */
}
div#box1:active{
box-shadow:10px 10px 5px black;
transition:1s;
transform:rotate(180deg) /* 회전 하기 */
}
body{
margin:50px;
}
div.box2, div.box3, div.box4{
border:1px solid red;
width:100px;
height:100px;
/* display:inline-block; */
}
/* 공간과 화면에서 사라진다 */
/* div.box3{
display:none;
} */
/* 화면에서만 사라지고 공간은 유지된다. */
/* div.box3{
visibility:hidden;
} */
div.box3{
opacity:0.1;
background:black;
}
4. HTML / CSS 파일
ex05.html
0.00MB
ex05.css
0.00MB
5. HTML 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190609 Basic Study 23(CSS 상속) (0) | 2019.06.09 |
|---|---|
| HTML5 - 190608 Basic Study 22(Note) (0) | 2019.06.08 |
| HTML5 - 190608 Basic Study 20(CSS 동위(형제) 선택자) (0) | 2019.06.08 |
| HTML5 - 190608 Basic Study 19(CSS 구조 선택자) (0) | 2019.06.08 |
| HTML5 - 190608 Basic Study 18(CSS- Navigation Bar / 링크 바) (0) | 2019.06.08 |
