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 코드
나무를 심는 사람
Awesome overview of music app features! For anyone interested in how to create music streaming app with seamless user experience and advanced functionality, this guide is definitely worth checking out.