사자자리
웹페이지 기획 5 및 시연 영상 본문
가사 페이지 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SongName</title>
<link rel="stylesheet" href="lyric.css">
</head>
<body>
<div class="cover">
<a href="C:\Users\renne\Desktop\SISS\4. Lana Del Rey\Lana Del Rey_web\0BORN TO DIE.html"><img src="0BORN TO DIE.jpg" width="300px"></a>
<h1>SongName</h1>
</div>
<br><br><br>
<div class="frame">
<div class="songs">
<script>
var songs = ['Born to die', 'Off To The Races', 'Blue Jeans', 'Video Games', 'Diet Mountain Dew', 'National Anthem', 'Dark Paradise', 'Radio', 'Carmen', 'Million Dollar Man', 'Summertime Sadness', 'This Is What Makes Us Girls', 'Without You', 'Lolita', 'Lucky Ones'];
var i = 0;
while (i < songs.length){
if (i < 9) document.write('<p><a id="songList" href = "file:///C:/Users/renne/Desktop/SISS/4.%20Lana%20Del%20Rey/BornToDie/' + i + '.html"> 0' + (i+1) + ' ' + songs[i] + ' </a></p>');
else document.write('<p><a id="songList" href = "file:///C:/Users/renne/Desktop/SISS/4.%20Lana%20Del%20Rey/BornToDie/' + i + '.html"> ' + (i+1) + ' ' + songs[i] + ' </a></p>');
i += 1;
}
</script>
</div>
<div class="lyric">
가사
</div>
</div>
<br><br><br>
<div class="name" style="width: 100%; height: 100px; background-color: #C3D0E2;"></div>
<br><br><br>
<div class="title">
<video muted autoplay loop>
<source src="vinyl.mp4">
</video>
<div id="title_text">
<a id="album" href="C:\Users\renne\Desktop\SISS\4. Lana Del Rey\Lana Del Rey_web\album.html">LANA DEL REY ALBUMS</a>
</div>
</div>
</body>
</html>body {padding: 0px; margin: 0px;}
.cover {background-color: #배경색; width: 100%; height: 470px;}
.cover img {position: relative; left: 50%; transform: translateX(-50%); margin-top: 20px;}
.cover h1 {color: #글자색; font-size: 50px; text-align: center; font-family: "Impact"; padding-top: 15px;}
.name p {color: #글자색; font-size: 50px; text-align: center; line-height: 100px; font-family: "Impact";}
.frame {display: grid; grid-template-columns: 500px 1fr;}
.songs {margin-left: 20px;}
.songs li {color: pink; line-height: 200%; font-size: 20px;}
.songs a {text-decoration: none; color: #글자색; line-height: 150%; font-size: 20px;}
.songs a:hover {background-color: #배경색}
.lyric p {font-size: 20px; color: #글자색;}
.title {width: 100%; height: 700px; overflow: hidden; margin: 0px auto; position: relative;}
.title video {width: 100%;}
#title_text {position: absolute; top: 55%; width: 100%;}
#title_text a {margin-top: -50px; text-align: center; font-size: 80px; color: #ffffff; font-family: "Times New Roman"; padding: 15px; text-decoration: none; display: grid; grid-template-columns: 1fr;}
#album:hover {padding: 15px; background-color: white; color: black;}앨범 사진에 앨범 페이지로 향하는 링크 추가
CSS 파일 분리
디자인 수정
'웹기초/웹페이지 기획' Related Articles
more
Comments