cyworld-precamp-/jukebox.html at master · pcasfs/cyworld-precamp- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Jukebox</title>
    <link href="./styles/jukebox.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="wrapper__header">
            <div class="wrapper__title">
                <div class="title">추억의 BGM</div>
                <div class="subtitle">TODAY CHOICE</div>
            </div>
            <div class="divideLine"></div>
            <div class="wrapper__album">
                <div class="album__image">
                    <img src="./images/jukebox-01.png">
                    <div class="album__title">Y(Please Tell Me Why)</div>
                    <div class="album__singer">프리스타일</div>
                </div>
                <div class="album__image">
                    <img src="./images/jukebox-02.png">
                    <div class="album__title">눈의 꽃</div>
                    <div class="album__singer">박효신</div>
                </div>               <div class="album__image">
                    <img src="./images/jukebox-03.png">
                    <div class="album__title">사랑했나봐</div>
                    <div class="album__singer">윤도현</div>
                </div>
            </div>
        </div>
        <div class="wrapper__body">
            <div class="wrapper__title">
                <div class="title">추억의 BGM</div>
                <div class="subtitle">TODAY CHOICE</div>
            </div>
            <table  class="albumTable">
                <thead>
                  <tr>
                    <th class="albumTable__checkbox"><input type="checkbox"></th>
                    <th class="albumTable__number">번호</th>
                    <th class="albumTable__song">곡명</th>
                    <th class="albumTable__artist">아티스트</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="album-table-checkbox"><input type="checkbox"></td>
                    <td  class="album-table-number">1</td>
                    <td class="album-table-song">눈의 꽃</td>
                    <td class="album-table-artist">박효신</td>
                  </tr>
                  <tr>
                    <td class="album-table-checkbox"><input type="checkbox"></td>
                    <td class="album-table-number">2</td>
                    <td class="album-table-song">사랑스러워</td>
                    <td class="album-table-artist">김종국</td>
                  </tr>
                  <tr>
                    <td class="album-table-checkbox"><input type="checkbox"></td>
                    <td class="album-table-number">3</td>
                    <td class="album-table-song">내 사람: Partner For Life</td>
                    <td class="album-table-artist">SG 워너비</td>
                  </tr>
                  <tr>
                    <td class="album-table-checkbox"><input type="checkbox"></td>
                    <td class="album-table-number">4</td>
                    <td class="album-table-song">Love Love Love</td>
                    <td class="album-table-artist">에픽하이</td>
                  </tr>
                  <tr>
                    <td class="album-table-checkbox"><input type="checkbox"></td>
                    <td class="album-table-number">5</td>
                    <td class="album-table-song">애인...있어요</td>
                    <td class="album-table-artist">이은미</td>
                  </tr>
                </tbody>
            </table>
        </div>
    </div>

</body>
</html>