웹기초/웹페이지 기획
웹페이지 기획 3
renne
2022. 5. 28. 19:54
6주차: 노래 페이지 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--웹페이지 이름-->
<title>ALBUM_NAME</title>
<style>
/*하단의 동영상과 글자*/
.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;}
/*웹페이지 여백 제거*/
body {margin: 0;}
/*상단의 앨범 커버와 제목이 있는 색깔 박스*/
.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;}
/*노래의 번호와 제목을 grid를 이용해서 배치했다.*/
.song {background-color: 배경색; color: 글자색; font-family: "Impact"; font-size: 30px; padding: 15px; width: 500px; position: relative; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 40px 1fr;}
/*노래의 제목에 걸린 링크 때문에 생긴 밑줄과 파란색을 수정하고, 커서를 위에 올리면 글자색과 배경색이 반전된다.*/
#name {color: 글자색; text-decoration: none;}
#name:hover {background-color: 글자색; color: 배경색;}
</style>
</head>
<body>
<!--상단의 앨범 커버와 제목-->
<div class="cover">
<img src="1_ALBUM_NAME.jpg" width="300px">
<h1>ALBUM_NAME</h1>
</div>
<br><br><br>
<!--노래의 번호와 제목-->
<div class="song">
<div class="number">01</div>
<a id="name" href="SONGNAME.html"> SONGNAME </a>
</div><br><br><br><br><br><br>
<!--하단의 동영상: 글자를 클릭하면 앨범 페이지로 이동한다.-->
<div class="title">
<video muted autoplay loop>
<source src="vinyl.mp4">
</video>
<div id="title_text">
<a id="album" href="album.html">LANA DEL REY ALBUMS</a>
</div>
</div>
</body>
</html>
https://renne1017.github.io/lanadelrey/album.html
LANA DEL REY ALBUMS
renne1017.github.io
