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