티스토리 뷰
https://github.com/IDU-IFP/ifp-html-css-study/issues/10
10번째 과제 · Issue #10 · IDU-IFP/ifp-html-css-study
10번째 과제 페이지 만들기 소스 이미지 파일 → Notion에 예시 코드 있습니다! 블로그에 공부한 내용 정리 후 블로그 링크 올려주세요 참고 블로그 - 류경혜
github.com
완성 페이지
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>Playlist</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/6212e88fd3.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&family=Russo+One&display=swap" rel="stylesheet">
</head>
<body>
<div class="map">
<header>
<i class="fa-solid fa-xmark"></i>
<h2>Playlist</h2>
</header>
<div class="title">
<div class="main-img"><i class="fa-regular fa-image"></i></div>
<div class="text">
<h1>Random Love</h1>
<p>by Divay Kapoor</p>
</div>
</div>
<div class="btns">
<a href="#" class="btn play"><i class="fa-solid fa-play"></i>Play</a>
<a href="#" class="btn heart"><i class="fa-solid fa-heart"></i></a>
<a href="#" class="btn add"><i class="fa-solid fa-plus"></i></a>
</div>
<div class="list">
<div class="item">
<div class="first box"></div>
<div class="text">
<h2>Matargasti</h2>
<p>Mohit Chauhan</p>
</div>
</div>
<div class="item">
<div class="second box"></div>
<div class="text">
<h2>Attitude</h2>
<p>Lewis OfMan - Attitude</p>
</div>
</div>
<div class="item">
<div class="third box"></div>
<div class="text">
<h2>Try Everything</h2>
<p>Shakira - Zootopia</p>
</div>
</div>
<div class="item">
<div class="fourth box"></div>
<div class="text">
<h2>Sunflower</h2>
<p>Joseph Vincent - Sunflower</p>
</div>
</div>
</div>
</div>
</body>
</html>CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Russo One', sans-serif;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 18px;
}
p {
font-family: 'Bree Serif', serif;
font-size: 15px;
color: #6d6b8d;
}
.map {
background-color: #8EC5FC;
background-image: linear-gradient(71deg, #8EC5FC 0%, #E0C3FC 100%);
width: 400px;
height: 600px;
border-radius: 10px;
border: 2px solid black;
padding: 10px;
}
header {
display: flex;
align-items: center;
margin-top: 7px;
}
.fa-xmark {
margin-left: 20px;
cursor: pointer;
}
header h2 {
margin-left: 130px;
font-size: 18px;
font-weight: 100;
}
.title {
display: flex;
align-items: center;
}
.title p {
color: black;
}
.main-img {
width: 100px;
height: 100px;
background-color: white;
margin: 20px;
margin-right: 13px;
border: 2px solid black;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.fa-image {
font-size: 60px;
}
h1 {
width: 100px;
}
/* 버튼 */
.btns {
display: flex;
align-items: center;
justify-content: center;
}
a {
color: black;
text-decoration: none;
}
.btn {
background-color: #e6f3ff;
border: 2px solid black;
border-bottom: 4px solid black;
text-align: center;
height: 50px;
width: 50px;
border-radius: 50px;
margin: 10px 15px 15px;
}
.play {
width: 150px;
border-radius: 10px;
}
.fa-plus,
.fa-heart,
.fa-play{
margin-top: 15px;
}
.fa-play {
margin-right: 5px;
}
/* 노래 리스트 */
.box {
width: 50px;
height: 50px;
background-color: white;
border: 2px solid black;
border-radius: 8px;
margin-right: 10px;
}
.item {
display: flex;
margin: 25px;
}
.first {
background-color: #eeddff;
}
.second {
background-color: #E0C3FC;
}
.third {
background-color: #71b1f0;
}
.fourth {
background-color: #529de8;
}
댓글