[ 문제 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를 해줘야한다.
'HOMEWORK' 카테고리의 다른 글
| DAY 10 - HOMEWORK - 달력 (2024.07.16) (0) | 2024.08.12 |
|---|---|
| DAY 11 - HOMEWORK - SungJukDTO / SungJuk (2024.07.17) (0) | 2024.08.12 |
| DAY 28 - ORACLE DB HOMEWORK (2024.08.09) (0) | 2024.08.11 |
| DAY 28 - CSS HOMEWORK (2024.08.09) (0) | 2024.08.11 |
| DAY 16 SCHOOL HOMEWORK (2024.07.24) (0) | 2024.08.08 |
