1. 구현화면
2. HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>You Are Awesome!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.14.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 한페이지에 2개 화면 구현 : section 활용 -->
<section class="phone">
<header>
<i class="fas fa-arrow-left"></i>
<i class="fas fa-search"></i>
</header>
<div class="artist">
<img src="https://static.billboard.com/files/media/Tyler-The-Creator-press-by-Sam-Rock-2019-billboard-1548-1024x677.jpg" />
<h2>Tyler, The Creator</h2>
<h6>Rap, Hip-Hop</h6>
</div>
<!-- 버튼 구현 코드 -->
<div class="btns">
<span class="btns__btn">Shuffle</span>
<span class="btns__btn"><i class="fas fa-heart"></i> 227</span>
</div>
<!-- 리스트는 ul, li로 -->
<ul class="songs">
<li class="songs__song">
<div class="songs__data">
<img src="https://imgix.ranker.com/user_node_img/50092/1001832784/original/flower-boy-photo-u1?w=650&q=50&fm=pjpg&fit=crop&crop=faces"/>
<div>
<span class="songs__author">
Tyler, The Creator
</span>
<span class="songs__title">911</span>
</div>
</div>
<i class="fas fa-ellipsis-v"></i>
</li>
<li class="songs__song">
<div class="songs__data">
<img src="https://imgix.ranker.com/user_node_img/50092/1001832784/original/flower-boy-photo-u1?w=650&q=50&fm=pjpg&fit=crop&crop=faces"/>
<div>
<span class="songs__author">
Tyler, The Creator
</span>
<span class="songs__title">911</span>
</div>
</div>
<i class="fas fa-ellipsis-v"></i>
</li>
</ul>
<div class="currently-playing">
<div>
<span class="current__author">Tyler, The Creator</span>
<span class="currnt__song">November</span>
</div>
<div class="currnt__player">
<i class="fas fa-step-backward"></i>
<!-- fa-2x : 아이콘 크기 2배로 -->
<i class="fas fa-pause fa-2x"></i>
<i class="fas fa-step-forward"></i>
</div>
</div>
</section>
<section class="phone">
<header>
<i class="fas fa-arrow-left"></i>
<i class="fas fa-ellipsis-v"></i>
</header>
<div class="cover">
<img src="https://imgix.ranker.com/user_node_img/50092/1001832784/original/flower-boy-photo-u1?w=650&q=50&fm=pjpg&fit=crop&crop=faces" />
</div>
<div class="player">
<h4>November</h4>
<h5>Tyler, The Creator</h5>
</div>
<div class="progress">
<div class="progress__time">
<span>1:56</span>
<span>2:21</span>
</div>
<!-- 2개의 div를 만들어 색을 구별지어 진행바 구현 -->
<div class="progress__bar">
<div class="progress__played"></div>
<div class="progress__total"></div>
</div>
</div>
<div class="actions">
<i class="fas fa-redo"></i>
<i class="fas fa-step-backward fa-lg"></i>
<span>
<i class="fas fa-play fa-lg"></i>
</span>
<i class="fas fa-step-forward fa-lg"></i>
<i class="fas fa-random"></i>
</div>
</section>
</body>
</html>3. CSS 코드
Data & PM