실습문제 4-7

WEB/TRAINNING 2017. 11. 4. 19:26 |

7. <div> 태그를 이용하여 카드의 뒷면을 출력하고, 마우스를 올리면 카드의 앞면이 보이게 HTML 페이지를 작성하라.





 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
    <title>:hover활용</title>
 
    <style>
    div
    {
        width : 100px;
        height : 140px;
        background-image : url("back.png");
        background-size : 100px 140px;
    }
    div:hover
    {
        background-image : url("spade-7.png");
        size : 100px 140px;
    }
        
    </style>
</head>
 
<body>
<h3>:hover 활용</h3>
<hr>
<table>
<tr><td>마우스를 올리면 카드의 앞면이 보인다.</td>
    <td><div id="img"></div></td></tr>
</table>
</body>
</html>
cs



 


'WEB > TRAINNING' 카테고리의 다른 글

실습문제 4-9  (0) 2017.11.04
실습문제 4-8  (0) 2017.11.04
실습문제 4-6  (0) 2017.11.04
실습문제 4-5  (0) 2017.11.04
실습문제 4-4  (0) 2017.11.04
Posted by 너래쟁이
: