⭐️ Reference 아래는 레퍼런스 코드입니다. 과제를 완료하기 전 미리 확인하지 마세요!
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Jukebox</title>
<link href="./styles/jukebox.css" rel="stylesheet">
<link rel="stylesheet" href="<https://pro.fontawesome.com/releases/v5.10.0/css/all.css>" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
</head>
<body>
<div class="wrapper">
<div class="wrapper__header">
<div class="header__title">
<div class="title">추억의 BGM</div>
<div class="subtitle">TODAY CHOICE</div>
</div>
<div class="devideLine"></div>
<div class="albumWrapper">
<div class="albumWrapper__item">
<img class="album-thumbnail" src="./images/jukebox-01.png">
<div class="album-songtitle">Y(Please Tell Me Why)</div>
<div class="album-artist">프리스타일</div>
</div>
<div class="albumWrapper__item">
<img class="album-thumbnail" src="./images/jukebox-02.png">
<div class="album-songtitle">눈의 꽃</div>
<div class="album-artist">박효신</div>
</div>
<div class="albumWrapper__item">
<img class="album-thumbnail" src="./images/jukebox-03.png">
<div class="album-songtitle">사랑했나봐</div>
<div class="album-artist">윤도현</div>
</div>
</div>
</div>
<div class="wrapper__body">
<div class="header__title">
<div class="title">추억의 BGM</div>
<div class="subtitle">TODAY CHOICE</div>
</div>
<table class="albumTable">
<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>
<tr>
<td class="album-table-checkbox"><input type="checkbox" /></td>
<td class="album-table-number">1</td>
<td class="album-table-song"><i class="fas fa-caret-right arrow"></i> 눈의 꽃</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"><i class="fas fa-caret-right arrow"></i> 사랑스러워</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"><i class="fas fa-caret-right arrow"></i> 내사람: 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"><i class="fas fa-caret-right arrow"></i> 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"><i class="fas fa-caret-right arrow"></i> 애인...있어요</td>
<td class="album-table-artist">이은미</td>
</tr>
</table>
<div class="albumTable__footer">
<div class="albumTable__footer__left">
<button>듣기</button>
</div>
<div class="albumTable__footer__center">
| <span>1</span> |
</div>
<div class="albumTable__footer__right">
<button>이동</button>
<button>배경음악 등록</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
padding: 20px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.wrapper__header {
width: 100%;
}
.header__title {
display: flex;
flex-direction: row;
align-items: center;
}
.title {
color: #55b2d4;
font-size: 13px;
font-weight: 700;
}
.subtitle {
padding-left: 5px;
font-size: 8px;
}
.devideLine {
width: 100%;
border-top: 1px solid gray;
}
.albumWrapper {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 12px;
}
.albumWrapper__item .album-thumbnail {
width: 120px;
height: 120px;
}
.albumWrapper__item .album-songtitle {
font-size: 11px;
font-weight: bold;
color: #0f465e;
display: flex;
flex-direction: row;
justify-content: center;
}
.albumWrapper__item .album-artist {
font-size: 10px;
font-weight: bold;
color: gray;
display: flex;
flex-direction: row;
justify-content: center;
}
.wrapper__body {
width: 100%;
}
.albumTable {
border-spacing: 0px;
width: 100%;
padding-top: 8px;
}
.albumTable th {
height: 20px;
font-size: 10px;
font-weight: bold;
color: gray;
background-color: #EEEEEE;
padding-top: 5px;
border-top: 1px solid gray;
border-bottom: 1px dashed gray;
}
.albumTable td {
height: 20px;
font-size: 10px;
color: #0F465E;
border-bottom: 1px dashed gray;
}
.album-table-checkbox {
width: 5%;
text-align: center;
}
.album-table-number {
width: 10%;
text-align: center;
}
.album-table-song {
width: 45%;
text-align: left;
}
.album-table-artist {
width: 30%;
text-align: left;
}
.arrow {
width: 10px;
height: 10px;
text-align: center;
color: red;
border: 1px solid gray;
border-radius: 2px;
}
.albumTable__footer {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 10px;
padding-top: 10px;
}
.albumTable__footer button {
font-size: 8px;
color: gray;
padding: 3px;
background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 57.43%, #DDDDDD 100%);
border: 1px solid gray;
border-radius: 5px;
}
.albumTable__footer__center span {
color: red;
}