사자자리

웹페이지 기획 4 본문

웹기초/웹페이지 기획

웹페이지 기획 4

renne 2022. 6. 19. 23:56

가사 페이지 만들기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SongName</title>
    <style>
      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;}
    </style>
  </head>
  <body>
    <div class="cover">
      <img src="1_borntodie.jpg" width="300px">
      <h1>BORN TO DIE</h1>
    </div>
    <br><br><br>
    <div class="name" style="width: 100%; height: 100px; background-color: #배경색;"><p>Born To Die</p></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 href = "file:///C:/Users/renne/Desktop/SISS/4.%20Lana%20Del%20Rey/BornToDie/' + i + '.html">&nbsp0' + (i+1) + ' ' + songs[i] + '&nbsp</a></p>');
            else document.write('<p><a href = "file:///C:/Users/renne/Desktop/SISS/4.%20Lana%20Del%20Rey/BornToDie/' + i + '.html">&nbsp' + (i+1) + ' ' + songs[i] + '&nbsp</a></p>');
            i += 1;
          }
        </script>
      </div>
      <div class="lyric">
        <p>가사</p>
      </div>
    </div>
    <br><br><br>
    <div class="name" style="width: 100%; height: 100px; background-color: #배경색;"></div>
    <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>

저작자표시 (새창열림)

'웹기초 > 웹페이지 기획' 카테고리의 다른 글

웹페이지 기획 5 및 시연 영상  (0) 2022.06.26
웹페이지 기획 3  (0) 2022.05.28
웹페이지 기획 2  (0) 2022.05.22
웹페이지 기획 1  (0) 2022.05.22
웹페이지 기획서  (0) 2022.05.21
'웹기초/웹페이지 기획' Related Articles more
Comments