본문 바로가기

Python_WEB/HTML

HTML5 - 190608 Basic Study 21(CSS 반응 선택자)

반응형

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 미리보기

반응형