|
########################## ↑ 뮤직 top100 만든 페이지 입니다 ######################################
사실 깃 연동을 했더니 정수님이 만드신 Top100과 제가 하루종일 만든 Top100 페이지 이름이 동일해서 제가 만든
페이지가 날라갔습니다. TT너무 속상했지만, 다시 만들었습니다. 깃 연동은 월요일에 하려구요. 그래서 페이지 만들때에 자기 이름 영어이니셜을 적는것이 좋을 것 같습니다. 예를 들면 hjs_top100.jsp , hjs_top100.css 이런 식으로 본인이 만든 페이지는 꼭 본인 이름을 이니셜로 적어야 저처럼 하루종일 작업한 페이지가 날라가는 일이 없을 것 같아요. ~~~
########################## jsp 파일 #################################
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>허진서 top100</title>
</head>
<link rel="stylesheet" href="/hjs_top100.css">
<body>
<!-- 타이틀 로고 -->
<div class="section_1"></div>
<h1>Top100</h1>
<!-- 날짜 -->
<div class="section_2"></div>
<h2>2023.05.12 21:00</h2>
<!-- 차트 top100 -->
<div class="section_3">
<div class="music_btn">
<button class="suffle_listen">셔플듣기</button>
<button class="all_listen">모두듣기</button>
<button class="listen">듣기</button>
<button class="put">담기</button>
<button class="down">다운</button>
<button class="FLAC">FLAC</button>
<button class="present">선물</button>
</div>
<table>
<thead>
<th><input type="checkbox" name="check" id="checkbox">
<div class="checkmark"></div></th>
<th>순위</th>
<th>ㅡ</th>
<th></th>
<th>곡정보</th>
<th>앨범</th>
<th>좋아요</th>
<th>듣기</th>
<th>담기</th>
<th>다운</th>
<th>뮤비</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="check" id="checkbox">
<span class="checkmark"></span></td>
<td>1</td>
<td>ㅡ</td>
<td><a href="#"><img id="myImage" src="https://cdnimg.melon.co.kr/cm2/album/images/112/11/297/11211297_20230410151046_500.jpg/melon/resize/120/quality/80/optimize"></a></td>
<td>I AM</td>
<td>I've IVE</td>
<td>♡ 142,082</td>
<td><a href="#"><img src="img/hjsplaylogo.png" class="logo1"></a></td>
<td><a href="#"><img src="img/hjsputlogo.png" class="logo2"></a></td>
<td><a href="#"><img src="img/hjsdownlogo.png" class="logo3"></a></td>
<td><a href="#"><img src="img/hjsmuvelogo.png" class="logo4"></a></td>
</tr>
<tr>
<td><input type="checkbox" name="check" id="checkbox">
<span class="checkmark"></span></td>
<td>2</td>
<td>ㅡ</td>
<td><a href="#"><img id="myImage" src="https://image.bugsm.co.kr/album/images/200/40859/4085992.jpg?version=20230509025819.0"></a></td>
<td>UNFORGIVEN
(feat.Nile Rodgers)</td>
<td>UNFORGIVEN</td>
<td>♡ 70,283</td>
<td><a href="#"><img src="img/hjsplaylogo.png" class="logo1"></a></td>
<td><a href="#"><img src="img/hjsputlogo.png" class="logo2"></a></td>
<td><a href="#"><img src="img/hjsdownlogo.png" class="logo3"></a></td>
<td><a href="#"><img src="img/hjsmuvelogo.png" class="logo4"></a></td>
<script>
var myImage = document.getElementById("myImage");
myImage.addEventListener("mouseenter", function() {
myImage.classList.add("hovered");
});
myImage.addEventListener("mouseleave", function() {
myImage.classList.remove("hovered");
});
</script>
</tr>
<tr>
<td><input type="checkbox" name="check" id="checkbox">
<span class="checkmark"></span></td>
<td>3</td>
<td>ㅡ</td>
<td><a href="#"><img id="myImage" src="https://cdnimg.melon.co.kr/cm2/album/images/112/11/297/11211297_20230410151046_500.jpg/melon/resize/120/quality/80/optimize"></a></td>
<td>Kitsch</td>
<td>I've IVE</td>
<td>♡ 123,197</td>
<td><a href="#"><img src="img/hjsplaylogo.png" class="logo1"></a></td>
<td><a href="#"><img src="img/hjsputlogo.png" class="logo2"></a></td>
<td><a href="#"><img src="img/hjsdownlogo.png" class="logo3"></a></td>
<td><a href="#"><img src="img/hjsmuvelogo.png" class="logo4"></a></td>
</tr>
<tr>
<td><input type="checkbox" name="check" id="checkbox">
<span class="checkmark"></span></td>
<td>4</td>
<td>ㅡ</td>
<td><a href="#"><img id="myImage" src="https://image.bugsm.co.kr/album/images/200/40857/4085791.jpg?version=20230509004441.0"></a></td>
<td>손오공</td>
<td>SEVENTEEN 10th Mini Album ‘FML'</td>
<td>♡ 102,047</td>
<td><a href="#"><img src="img/hjsplaylogo.png" class="logo1"></a></td>
<td><a href="#"><img src="img/hjsputlogo.png" class="logo2"></a></td>
<td><a href="#"><img src="img/hjsdownlogo.png" class="logo3"></a></td>
<td><a href="#"><img src="img/hjsmuvelogo.png" class="logo4"></a></td>
</tr>
<tr>
<td><input type="checkbox" name="check" id="checkbox">
<span class="checkmark"></span></td>
<td>5</td>
<td>ㅡ</td>
<td><a href="#"><img id="myImage" src="https://cdnimg.melon.co.kr/cm2/album/images/112/36/264/11236264_20230508184331_500.jpg/melon/resize/120/quality/80/optimize"></a></td>
<td>Spicy</td>
<td>MY WORLD-The 3rd Min</td>
<td>♡ 38,478</td>
<td><a href="#"><img src="img/hjsplaylogo.png" class="logo1"></a></td>
<td><a href="#"><img src="img/hjsputlogo.png" class="logo2"></a></td>
<td><a href="#"><img src="img/hjsdownlogo.png" class="logo3"></a></td>
<td><a href="#"><img src="img/hjsmuvelogo.png" class="logo4"></a></td>
</tr>
<tr>
<td><input type="checkbox" name="check" id="checkbox">
<span class="checkmark"></span></td>
<td>6</td>
<td>ㅡ</td>
<td><a href="#"><img id="myImage" src="https://image.bugsm.co.kr/album/images/200/40850/4085066.jpg?version=20230411020709.0"></a></td>
<td>꽃</td>
<td>ME</td>
<td>♡ 98,000</td>
<td><a href="#"><img src="img/hjsplaylogo.png" class="logo1"></a></td>
<td><a href="#"><img src="img/hjsputlogo.png" class="logo2"></a></td>
<td><a href="#"><img src="img/hjsdownlogo.png" class="logo3"></a></td>
<td><a href="#"><img src="img/hjsmuvelogo.png" class="logo4"></a></td>
</tr>
<tr>
<td><input type="checkbox" name="check" id="checkbox">
<span class="checkmark"></span></td>
<td>7</td>
<td>ㅡ</td>
<td><a href="#"><img id="myImage" src="https://image.bugsm.co.kr/album/images/200/40658/4065831.jpg?version=20230422005430.0"></a></td>
<td>사랑은 늘 도망가</td>
<td>신사와 아가씨 OST Part.2</td>
<td>♡ 194,270</td>
<td><a href="#"><img src="img/hjsplaylogo.png" class="logo1"></a></td>
<td><a href="#"><img src="img/hjsputlogo.png" class="logo2"></a></td>
<td><a href="#"><img src="img/hjsdownlogo.png" class="logo3"></a></td>
<td><a href="#"><img src="img/hjsmuvelogo.png" class="logo4"></a></td>
</tr>
<tr>
<td><input type="checkbox" name="check" id="checkbox">
<span class="checkmark"></span></td>
<td>8</td>
<td>ㅡ</td>
<td><a href="#"><img id="myImage" src="https://image.bugsm.co.kr/album/images/200/40835/4083586.jpg?version=20230314012829.0"></a></td>
<td>파이팅 해야지(Feat.이영지)</td>
<td>부석순 1st Single Album 'SECOND WIND'</td>
<td>♡ 151,188</td>
<td><a href="#"><img src="img/hjsplaylogo.png" class="logo1"></a></td>
<td><a href="#"><img src="img/hjsputlogo.png" class="logo2"></a></td>
<td><a href="#"><img src="img/hjsdownlogo.png" class="logo3"></a></td>
<td><a href="#"><img src="img/hjsmuvelogo.png" class="logo4"></a></td>
</tr>
<tr>
<td><input type="checkbox" name="check" id="checkbox">
<span class="checkmark"></span></td>
<td>9</td>
<td>ㅡ</td>
<td><a href="#"><img id="myImage" src="https://image.bugsm.co.kr/album/images/200/204638/20463897.jpg?version=20220609133908.0"></a></td>
<td>우리들의 블루스</td>
<td>IM HERO</td>
<td>♡ 91,626</td>
<td><a href="#"><img src="img/hjsplaylogo.png" class="logo1"></a></td>
<td><a href="#"><img src="img/hjsputlogo.png" class="logo2"></a></td>
<td><a href="#"><img src="img/hjsdownlogo.png" class="logo3"></a></td>
<td><a href="#"><img src="img/hjsmuvelogo.png" class="logo4"></a></td>
</tr>
<tr>
<td><input type="checkbox" name="check" id="checkbox">
<span class="checkmark"></span></td>
<td>10</td>
<td>ㅡ</td>
<td><a href="#"><img id="myImage" src="https://cdnimg.melon.co.kr/cm2/album/images/109/23/444/10923444_20220502140600_500.jpg/melon/resize/120/quality/80/optimize"></a></td>
<td>다시 만날 수 있을까</td>
<td>IM HERO</td>
<td>♡ 74,083</td>
<td><a href="#"><img src="img/hjsplaylogo.png" class="logo1"></a></td>
<td><a href="#"><img src="img/hjsputlogo.png" class="logo2"></a></td>
<td><a href="#"><img src="img/hjsdownlogo.png" class="logo3"></a></td>
<td><a href="#"><img src="img/hjsmuvelogo.png" class="logo4"></a></td>
</tr>
<tr>
<td><input type="checkbox" name="check" id="checkbox">
<span class="checkmark"></span></td>
<td>11</td>
<td>ㅡ</td>
<td><a href="#"><img id="myImage" src="https://image.bugsm.co.kr/album/images/200/205278/20527897.jpg?version=20221119010336.0"></a></td>
<td>London Boy</td>
<td>Polaroid</td>
<td>♡ 49,573</td>
<td><a href="#"><img src="img/hjsplaylogo.png" class="logo1"></a></td>
<td><a href="#"><img src="img/hjsputlogo.png" class="logo2"></a></td>
<td><a href="#"><img src="img/hjsdownlogo.png" class="logo3"></a></td>
<td><a href="#"><img src="img/hjsmuvelogo.png" class="logo4"></a></td>
</tr>
<!-- <script>
var myImage = document.getElementById("myImage");
myImage.addEventListener("mouseenter", function() {
myImage.classList.add("hovered");
});
myImage.addEventListener("mouseleave", function() {
myImage.classList.remove("hovered");
});
</script> -->
<script>
var images = document.getElementsByClassName("myImage");
for (var i = 0; i < images.length; i++) {
images[i].addEventListener("mouseenter", function() {
this.classList.add("hovered");
});
images[i].addEventListener("mouseleave", function() {
this.classList.remove("hovered");
});
}
</script>
</tbody>
</table>
</div>
</body>
</html>
##################################### css 파일 #######################################
@charset "EUC-KR";
body {
width:85%;
display: inline-block;
margin-left: 120px;
}
h1 {
color:gray;
margin-left:40px;
margin-bottom:0;
padding-bottom:0;
}
h2 {
text-align:center;
color:gray;
margin:0;
padding:0;
}
.section_3 {
margin-top:0;
margin-bottom:0;
}
.music_btn {
display:flex;
gap:10px;
background-color: white;
color: gray;
padding: 15px 15px;
font-size: 20px;
margin-top:0;
margin-bottom:0;
}
.suffle_listen,
.all_listen,
.listen,
.put,
.down,
.FLAC,
.present
{
width: 75px;
height:35px;
border: 1px solid gray;
border-radius: 20px;
color: gray;
background-color: white;
font-size: 13px;
}
.suffle_listen:hover,
.all_listen:hover,
.listen:hover,
.put:hover,
.down:hover,
.FLAC:hover,
.present:hover
{
background-color:#04aa6d;
color: white;
cursor: pointer;
}
tabel{
border-collapse:collapse;
}
table,th, td{
border: none;
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray;
}
th, td{
padding-left: 20px;
padding-right: 20px;
color: gray;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: #eee;
}
.checkmark::after {
content: '';
position: absolute;
top: 3px;
left: 7px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 3px 3px 0; /* top right bottom left */
transform: rotate(45deg);
color: #04aa6d;
}
td a img{
width: 100px;
height: 100px;
margin:12px 12px 12px 12px;
}
#myImage {
transition: filter 0.5s ease;
}
#myImage.hovered {
filter: brightness(20%) grayscale(200%);
}
.logo1,
.logo2,
.logo3,
.logo4
{
width:50px;
height:50px;
}
|