HOMEWORK

DAY 29 - CSS HOMEWORK (2024.08.12)

summ.n 2024. 8. 12. 18:42

[ 문제 3 ]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

td:hover #img{
	display: inline-block;
}

#img {
  	display: none;
  	width: 200px;
	height: 200px;
	background-image: url("../image/back.png");
	background-size: 100px;
	background-repeat: no-repeat;
	
}

#img:hover {
	background-image: url("../image/spade-7.png");
    background-size: 100px;
    background-repeat: no-repeat;
}

</style>
</head>
<body>
	<h3>:hover 활용</h3>
	<hr>
	<table>
		<tr>
			<td>
				마우스를 올리면 카드의 앞면이 보인다.
				<div id="img"></div>
			</td>
		</tr>
	</table>
</body>
</html>

[ 강사님 답 ] - 보고 다시 공부하기 !!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

table {
	width: 350px;
}

table:hover {
	width: 250px;
}

div {
	display: none; /* div 요소를 숨김 */
	background-image: none;
	width: 100px;
	height: 140px;
	background-size: 100px 140px;
}

table:hover div{
	display: block; /* 마우스가 hover 되면 div 영역 표시 */
	background-image: url("../image/back.png");
}

/* table:hover div:hover{ */

div#img:hover {
	background-image: url("../image/spade-7.png"); 
}

</style>
</head>
<body>
	<h3>:hover 활용</h3>
	<hr>
	<table>
		<tr>
			<td>마우스를 올리면 카드의 앞면이 보인다.</td>
			<td><div id="img"></div></td>
			
		</tr>
	</table>
</body>
</html>

table:hover div:hover{ 

div#img:hover {

이 두 코드 다 된다는 거 확인 !!

[ 문제 4 ]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
	position: relative;
	border: 2px solid yellowgreen;
	display: inline-block;
	width: 200px;
	height: 60px;
}
</style>
</head>
<body>
	<h3>3개의 div 활용</h3>
	<hr>
	<div>캔버스에 이미지를 그리기 위해서는 이미지를 담을 객체가 먼저 필요하다.</div>
	<div>Image 객체의 src 프로퍼티를 이용하여 비트맵을 로드한다.</div>
	<div>이미지 로딩이 끝나면 그 때 비로소 이미지의 너비와 높이가 제대로 아려진다.</div>
</body>
</html>

 

 float: left를 써도 되지만 clear를 해줘야한다.