728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
background-size: cover;
/* 전체영역으로 이미지 확대 */
background-image: url(img/bc.png);
/* 배경이미지 사용 */
background-repeat: no-repeat;
}
div#wrap{
width: 800px;
height: 800px;
margin: 0 auto;
/* wrap요소 중앙정렬 */
}
@keyframes hoverImg {
0%{filter:sepia(0)}
/* sepia효과 50% */
50%{filter:sepia(1)}
/* sepia효과 100% */
100%{filter:sepia(0)}
/* sepia효과 50% */
}
div#animation>img{
border-radius: 20%;
/* round효과 */
}
div#animation>img:hover{
border-radius: 20%;
/* hover 이미지 확대 */
transform: scale(1.1,1.1);
/* 대표이미지에 filteranimation 사용 */
animation-name: hoverImg;
/* 애니메이션 길이 5초 */
animation-duration: 5s;
}
/* 홀수 */
tr.side:nth-child(odd){
background-color: #f4f4f4;
}
/* 짝수 */
tr.side:nth-child(even){
background-color: #cccccc;
}
tfoot>tr>td>p{
margin-top: -10px;
font-size: 13px;
}
</style>
<body>
<div id="wrap">
<table>
<thead>
<tr>
<td>
<h1>음악블로그</h1>
<h4>실시간차트</h4>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="animation">
<img src="img/3번.png" width="350px" height="350px">
</div>
<!-- div#animation -->
</td>
<td>
<table>
<tr class="side">
<td> <a href="https://www.genie.co.kr/player/fPlayer" target="_blank">
<img src="img/3번.png" width=30> </a></td><td> dried flower / 발라드 / ★★</td>
</tr>
<tr class="side">
<td><a href="https://www.genie.co.kr/player/fPlayer" target="_blank">
<img src="img/4번.png" width=30> </a></td><td> Kill Devil Hills / 발라드 / ★★★★★</td>
</tr>
<tr class="side">
<td><a href="https://www.genie.co.kr/player/fPlayer" target="_blank">
<img src="img/5번.png" width=30> </a></td><td> 밤비 / 발라드 / ★★★★★</td>
</tr>
<tr class="side">
<td><a href="https://www.genie.co.kr/player/fPlayer" target="_blank">
<img src="img/6번.png" width=30> </a></td><td> 락다운 213주 / 드라마 / ★★★ </td>
</tr>
<tr class="side">
<td><a href="https://www.genie.co.kr/player/fPlayer" target="_blank">
<img src="img/청춘고백.png" width=30> </a></td><td> dried flower / 발라드 / ★★</td>
</tr>
<tr class="side">
<td><a href="https://www.genie.co.kr/player/fPlayer" target="_blank">
<img src="img/친구 같은 연애.png" width=30> </a></td><td> CIRCUS DA / K-Pop / ★★★★★</td>
</tr>
<tr class="side">
<td><a href="https://www.genie.co.kr/player/fPlayer" target="_blank">
<img src="img/7번.png" width=30> </a></td><td> CIRCUS DA / K-Pop / ★★★★★</td>
<tr class="side">
<td><a href="https://www.genie.co.kr/player/fPlayer" target="_blank">
<img src="img/8qjs.png" width=30> </a></td><td> s0what? / 감성힙합 / ★★ </td>
</tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<p>Address:대한민국 서울특별시 용산구 한강대로23길 55, CJ 본사</p>
</td>
</tr>
</tfoot>
</table>
</div>
<!-- div#wrap -->
</body>
</html>
728x90
'Study > HTML5&CSS' 카테고리의 다른 글
| HTML 1일차 (2) | 2022.10.11 |
|---|---|
| part08_images (0) | 2022.05.13 |
| part07_Video요소 (0) | 2022.05.13 |
| part06_HTML유효성검사 (0) | 2022.05.13 |
| part05_Semantic요소 (0) | 2022.05.13 |
