코코아챌린지 코딩숙제
363651 단어 kokoa clonhtml csshtml css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>SuperForm</title>
</head>
<body>
<h2>Create An Account</h2>
<form>
<div>
<label for="first-name">First name</label>
<input required id="first-name" type="text" placeholder="First name" />
</div>
<div>
<label for="last-name">Last name</label>
<input required id="last-name" type="text" placeholder="Last name" />
</div>
<div>
<label for="email">Email</label>
<input required id="email" type="email" placeholder="Email" />
</div>
<div>
<label for="username">Username</label>
<input required id="username" type="text" minlength="5" placeholder="Username" />
</div>
<div>
<label for="password">Password</label>
<input required id="password" type="password" minlength="10" placeholder="Password" />
</div>
<div>
<label for="birth-date">Birth date</label>
<input required id="birth-date" type="date" />
</div>
<div>
<label for="kimchi-love">How happy are you?</label>
<input required id="kimchi-love" type="range" list="kimchi-levels" />
<datalist id="kimchi-levels">
<option value="0"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option value="50"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option value="100"></option>
</datalist>
</div>
<div>
<label for="fa-color">What is your fav. color?</label>
<input required id="fa-color" type="color" />
</div>
<div>
<input type="submit" value="Create Account" />
</div>
</form>
</body>
</html>
요구 사항 :
레이블을 사용하십시오.
ID를 사용하십시오.
모든 필드는 필수입니다.
비밀번호는 10 자 이상이어야합니다.
결과
내 답
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="first">
<div class="second"></div>
<div class="third"></div>
<div class="second"></div>
</div>
</body>
</html>
- css
html {
background-color: tomato;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.first {
display: flex;
width: 250px;
height: 250px;
background-color: wheat;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
border: 2px solid black
}
.second {
width: 50px;
height: 50px;
background-color: teal;
border: 3px solid white
}
.third {
width: 200px;
height: 50px;
background-color: teal;
border: 3px dashed white;
}
정답
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="father">
<div class="inside"></div>
<div class="inside inside-second"></div>
<div class="inside"></div>
</div>
</body>
</html>
- css
body {
background:tomato;
height:100vh;
display: flex;
justify-content: center;
align-items:center;
}
.father{
width:200px;
height:200px;
padding:20px;
display:flex;
flex-direction: column;
align-items:center;
justify-content: space-between;
flex-wrap: wrap;
background:wheat;
border:2px solid black;
}
.inside {
background:teal;
height:50px;
width:50px;
border:3px solid white;
}
.inside-second {
width: 100%;
border-style:dashed;
}
내 답
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>repl.it</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>The Best Colors</h1>
<div class="bigbox">
<div class="box">
<div>
<span>Tomato</span><br /><br />
<span>#FF6347</span>
</div>
</div>
<div class="box">
<div>
<span>Teal</span><br /><br />
<span>#008080</span>
</div>
</div>
<div class="box">
<div>
<span>Burlywood</span><br /><br />
<span>#DEB887</span>
</div>
</div>
<div class="box">
<div>
<span>Thistle</span><br /><br />
<span>#D7BFD7</span>
</div>
</div>
</div>
</body>
</html>
- css
h1 {
text-align: center;
margin-bottom: 60px;
font-family: "Times New Roman";
}
body {
height: 100vh;
background: whitesmoke;
}
.bigbox {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.box {
width: 200px;
height: 340px;
background-color: white;
margin: 10px;
border: 6px solid white;
position: relative;
}
.box:first-child {
background-color: tomato;
}
.box:nth-child(2) {
background-color: teal;
}
.box:nth-child(3) {
background-color: burlywood;
}
.box:last-child {
background-color: thistle;
}
span:first-child {
font-size: large;
}
.box > div {
background-color: white;
height: 100px;
width: 100%;
position: absolute;
top: 25px;
}
div > span {
font-family: "Times New Roman";
font-weight: bold;
position: relative;
top: 14px;
left: 2px;
}
정답
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>The Best Colors</h1>
<section>
<article class="color">
<div class="color__bg"></div>
<div class="color__info">
<h3>Tomato</h3>
<h5>#FF6347</h5>
</div>
</article>
<article class="color">
<div class="color__bg"></div>
<div class="color__info">
<h3>Teal</h3>
<h5>#008080</h5>
</div>
</article>
<article class="color">
<div class="color__bg"></div>
<div class="color__info">
<h3>Burlywood</h3>
<h5>#DEB887</h5>
</div>
</article>
<article class="color">
<div class="color__bg"></div>
<div class="color__info">
<h3>Thistle</h3>
<h5>#D7BFD7</h5>
</div>
</article>
</section>
</body>
</html>
- css
body {
height:100vh;
background-color: whitesmoke;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
margin-bottom: 50px;
}
section {
width:50%;
margin:0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.color {
width: 48%;
position: relative;
margin-bottom: 20px;
}
.color:first-child .color__bg {
background-color: tomato;
}
.color:nth-child(2) .color__bg {
background-color: teal;
}
.color:nth-child(3) .color__bg {
background-color: burlywood;
}
.color:last-child .color__bg {
background-color:thistle;
}
.color__bg {
height: 300px;
border:5px solid white;
}
.color__info {
position: absolute;
width:100%;
background-color:white;
top:20px;
padding:0px 10px;
box-sizing: border-box;
}
애니메이션 작동짤 삽입
내 답
- html
<!DOCTYPE html>
<html lang="kr">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="big-circle">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</section>
<section class="big-square">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</section>
</body>
</html>
- css
html {
background-color: #6bbcbe;
}
body {
height: 100vh;
}
section {
display: flex;
justify-content: center;
align-items: center;
}
.circle {
background-color: white;
width: 10px;
height: 10px;
margin: 17px;
border-radius: 50%;
}
.square {
background-color: white;
width: 13px;
height: 35px;
margin: 4px;
}
.big-circle {
height: 60vh;
}
.big-circle {
animation: test 1s ease-in-out infinite;
}
.square {
animation: test2 1s ease infinite;
}
@keyframes test {
0% {
transform: rotateZ(0deg);
}
25% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(180deg);
}
/*100% {
transform: rotateZ(180deg);
}*/
}
@keyframes test2 {
0% {
transform: scaleY(1.6);
}
25% {
transform: scaleY(3);
}
100% {
transform: scaleY(1.6);
}
/*100% {
transform: scaleY(1.6);
}*/
}
.square:nth-child(1) {
animation-delay: 0s;
}
.square:nth-child(2) {
animation-delay: 0.12s;
}
.square:nth-child(3) {
animation-delay: 0.23s;
}
.square:nth-child(4) {
animation-delay: 0.34s;
}
.square:nth-child(5) {
animation-delay: 0.45s;
}
정답
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dots box">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="lines box">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</body>
</html>
- css
html,
body {
height: 100%;
}
body {
font-family: sans-serif;
background-color: #76c4c6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@keyframes dotAnimation {
50% {
transform: rotate(0.5turn);
}
100% {
transform: rotate(0.5turn);
}
}
.box {
width: 200px;
display: flex;
justify-content: space-around;
}
.dots {
width: 200px;
display: flex;
justify-content: space-around;
animation: dotAnimation 1s ease-in-out infinite;
margin-bottom: 200px;
}
.dot {
background-color: white;
width: 20px;
height: 20px;
border-radius: 10px;
/* 👆🏻 If you set the border-radius to half of the width and height
it becomes a circle, 50% also works*/
}
.lines {
width: 150px;
}
@keyframes lineAnim {
0% {
transform: none;
}
25% {
transform: scaleY(2);
}
50%,
100% {
transform: none;
}
}
.line {
width: 20px;
height: 80px;
background-color: white;
animation: lineAnim 1s ease-in-out infinite;
}
/*
Remove 'animation-delay and see what happens!!!
*/
.line:nth-child(2) {
animation-delay: 0.1s;
}
.line:nth-child(3) {
animation-delay: 0.2s;
}
.line:nth-child(4) {
animation-delay: 0.3s;
}
.line:nth-child(5) {
animation-delay: 0.4s;
}
내 답
- html
<!DOCTYPE html>
<html lang="kr">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="playlist">
<i class="fas fa-times"></i>
<span>Playlist</span>
</div>
<div class="randomlove">
<div class="love_box">
<i class="far fa-image fa-3x"></i>
</div>
<div class="love_p">
<p class="love_p_text">Random Love</p>
<p>by Divay Kapoor</p>
</div>
</div>
<div class="play">
<div class="play_box">
<i class="fas fa-play"></i>
<span>Play</span>
</div>
<div class="play_box">
<i class="far fa-heart"></i>
</div>
<div class="play_box">
<i class="fas fa-plus"></i>
</div>
</div>
<div class="color">
<div class="color_big_box">
<div class="color_box">
<span>Matargasti</span>
<span>Mohit_Chauhan</span>
</div>
</div>
<div class="color_big_box">
<div class="color_box">
<span>Attitude</span>
<span>Lewis_OfMan·Attitude</span>
</div>
</div>
<div class="color_big_box">
<div class="color_box">
<span>Try_Everthing</span>
<span>Shakira·Zootopia</span>
</div>
</div>
<div class="color_big_box">
<div class="color_box">
<span>Sunflower</span>
<span>Joseph_Vincent·Sunflower</span>
</div>
</div>
</div>
<script
src="https://kit.fontawesome.com/6478f529f2.js"
crossorigin="anonymous"
></script>
</body>
</html>
- css
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital@1&family=Yusei+Magic&display=swap");
html {
border: 3px solid mediumturquoise;
padding: 10px;
width: 260px;
margin-left: 10px;
}
body {
font-family: "Yusei Magic", sans-serif;
}
.playlist {
display: flex;
margin-top: 40px;
}
.playlist > span {
display: flex;
margin-left: 35%;
}
.randomlove {
display: flex;
/*justify-content: center;*/
align-items: center;
margin: 20px 0px;
}
.love_box {
width: 140px;
height: 110px;
background-color: orange;
border: 2px solid black;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.love_p {
margin-left: 13px;
}
.love_p_text {
font-size: 25px;
margin-bottom: -4px;
}
.love_p_text + p {
font-size: 9px;
}
.play {
display: flex;
justify-content: space-between;
}
.play_box:first-child {
width: 120px;
height: 40px;
border: 2px solid black;
border-radius: 10px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.fa-play + span {
margin-left: 10px;
}
.play_box:nth-child(2) {
width: 40px;
height: 40px;
border: 2px solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.play_box:nth-child(3) {
width: 40px;
height: 40px;
border: 2px solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.color {
margin: 10px 0px;
display: flex;
flex-direction: column;
}
.color_box {
margin-left: 60px;
}
.color_big_box {
width: 50px;
height: 50px;
border: 2px solid black;
border-radius: 10px;
display: flex;
flex-direction: column;
/*align-content: space-between;*/
margin: 20px 0px;
}
.color_big_box:first-child {
background-color: tomato;
}
.color_big_box:nth-child(2) {
background-color: violet;
}
.color_big_box:nth-child(3) {
background-color: royalblue;
}
.color_big_box:last-child {
background-color: darkcyan;
}
span ~ span {
font-size: 8px;
}
내 답으로 코딩했을때 결과물
정답
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>repl.it</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/FortAwesome/[email protected]/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<header>
<i class="fas fa-times"></i>
<h1>Playlist</h1>
</header>
<main>
<section class="main-song">
<div class="main-song__cover">
<i class="far fa-image fa-3x"></i>
</div>
<div class="main-song__data">
<h3 class="main-song__title">We Love 김치!</h3>
<h5 class="main-song__author">By Lynn</h5>
</div>
</section>
<section class="btns">
<span class="btns__btn btns__btn--big">
<i class="fas fa-play fa-xs"></i>
<span>Play</span>
</span>
<span class="btns__btn"><i class="fas fa-heart"></i></span>
<span class="btns__btn"><i class="fas fa-plus"></i></span>
</section>
<ul class="song-list">
<li class="song-list__song">
<div class="song-list__cover"></div>
<div class="song-list__data">
<h5>Corona Sucks</h5>
<h6>니꼬</h6>
</div>
</li>
<li class="song-list__song">
<div class="song-list__cover"></div>
<div class="song-list__data">
<h5>Corona Sucks</h5>
<h6>니꼬</h6>
</div>
</li>
<li class="song-list__song">
<div class="song-list__cover"></div>
<div class="song-list__data">
<h5>Corona Sucks</h5>
<h6>니꼬</h6>
</div>
</li>
</ul>
</main>
</div>
</body>
</html>
- css
@import url("https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400;600;700&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Baloo Tamma 2", cursive;
background-color: #00c6ad;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wrapper {
background-color: white;
width: 310px;
padding: 50px 30px 15px 30px;
}
header {
display: flex;
justify-content: center;
position: relative;
margin-bottom: 50px;
}
header i {
position: absolute;
top: -5px;
left: 0;
font-size: 28px;
}
h1 {
font-weight: 600;
font-size: 24px;
}
.main-song {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.main-song__cover {
width: 110px;
height: 110px;
background-color: #ffbd11;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
border-radius: 10px;
margin-right: 0px;
}
.main-song__cover i {
color: white;
}
.main-song__data {
width: 50%;
}
.main-song__title {
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.4;
}
.main-song__author {
font-size: 18px;
font-weight: 600;
opacity: 0.7;
}
.btns {
display: flex;
justify-content: space-between;
margin-top: 30px;
margin-bottom: 40px;
}
.btns__btn {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
border-bottom-width: 5px;
border-radius: 50%;
width: 50px;
height: 50px;
}
.btns__btn--big {
width: 50%;
font-size: 18px;
font-weight: 600;
border-radius: 15px;
}
.btns__btn--big span {
margin-left: 5px;
font-size: 20px;
}
.song-list__song {
display: flex;
align-items: center;
margin-bottom: 40px;
}
.song-list__cover {
width: 50px;
height: 50px;
background-color: #f85a2a;
border: 2px solid black;
border-radius: 10px;
margin-right: 10px;
}
.song-list__data h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 5px;
}
.song-list__data h6 {
opacity: 0.8;
}
.song-list {
display: flex;
flex-direction: column;
}
정답으로 코딩했을때의 결과
내 답
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>You Are Awesome!</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/FortAwesome/[email protected]/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="warpaper">
<div class="library__header">
<header>
<i class="fas fa-bars"></i>
<span>library</span>
<i class="fas fa-shopping-bag"></i>
</header>
</div>
<div class="search__box">
<input type="text" placeholder="Search books..." />
<i class="fas fa-search"></i>
</div>
<section class="white-box">
<h2>Book of the day</h2>
<section class="book-of-the-day">
<div class="book-of-the-day__box">
<img
class="book-of-the-day__img"
src="https://image.yes24.com/momo/TopCate2091/MidCate002/209013217.jpg"
alt="book image"
/>
</div>
<div class="book-of-the-day__2box">
<div class="towbox__section1">
<ul>
<li><h3>그러니 그대 사라지지 말아라</h3></li>
<li><span>박노해</span></li>
<li>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</li>
</ul>
</div>
<div class="towbox__section2">
<input type="submit" value="Journey" />
<input type="submit" value="Biography" />
</div>
<div class="towbox__section3">
<div class="book-mark">
<i class="fas fa-bookmark"></i>
</div>
<input type="submit" value="Book Now" />
</div>
</div>
</section>
<section class="top-adventures">
<h2>Best Seller</h2>
<div class="top-adventures__div">
<ul class="top-adventures__ul">
<li class="top-adventures__li">
<img
src="http://bimage.interpark.com/goods_image/2/7/7/9/340382779g.jpg"
/>
<div class="top-adventures__i-box">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</li>
<li class="top-adventures__li">
<img
src="http://bimage.interpark.com/goods_image/0/8/0/9/334240809g.jpg"
/>
<div class="top-adventures__i-box">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</li>
<li class="top-adventures__li">
<img
src="http://bimage.interpark.com/goods_image/4/3/5/7/345414357g.jpg"
/>
<div class="top-adventures__i-box">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</li>
<li class="top-adventures__li">
<img
src="http://bimage.interpark.com/goods_image/9/9/2/3/324439923g.jpg"
/>
<div class="top-adventures__i-box">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</li>
</ul>
</div>
</section>
<h2>Popular authors</h2>
<section class="authors">
<div class="authors__box1">
<img
src="https://www.newscj.com/news/photo/201806/newscj_%EC%B2%9C%EC%A7%80%EC%9D%BC%EB%B3%B4_526351_515278_2357.jpg"
/>
</div>
<div class="authors__box2">
<ul class="authors__ul">
<li>Bernard Werber</li>
<li>
<p>
Bernard Berber is a French novelist. It is widely known as the
``ant''. Characterized by his extensive knowledge of insects,
《Ant》 is his debut work and, as soon as it was published,
received rave reviews from various French media outlets.
</p>
</li>
</ul>
</div>
</section>
</section>
</div>
</body>
</html>
- css
@import "color.css";
@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
height: 100vh;
font-family: "Ubuntu", sans-serif;
}
.warpaper {
width: 400px;
}
.white-box {
padding-left: 10px;
}
.library__header {
background-color: var(--puple);
height: 110px;
padding: 0px 10px;
}
header {
display: flex;
justify-content: space-between;
padding-top: 30px;
padding-bottom: 30px;
}
span {
font-weight: bold;
}
.search__box {
display: flex;
justify-content: center;
position: relative;
top: -25px;
left: 7px;
}
.search__box > input {
padding: 15px;
width: 90%;
border-radius: 15px;
border: none;
filter: drop-shadow(0 0 0.9rem var(--grey));
}
.search__box input::placeholder {
color: var(--grey);
}
.fa-search {
color: var(--grey);
position: relative;
right: 30px;
top: 15px;
}
h2 {
margin-top: 20px;
font-weight: bold;
font-size: 20px;
margin-bottom: 20px;
}
.book-of-the-day__img {
width: 150px;
height: 200px;
border-radius: 10px;
}
.book-of-the-day {
display: flex;
}
.book-of-the-day__2box {
margin-left: 15px;
}
h3 {
font-weight: bold;
font-size: 20px;
}
li > span {
color: var(--grey);
font-size: 14px;
}
li > i {
color: var(--puple);
font-size: 13px;
}
.towbox__section1 > ul > li {
margin-bottom: 10px;
}
.book-mark {
background-color: var(--puple);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.towbox__section2 {
margin-top: 20px;
}
.towbox__section2 > input {
border: none;
padding: 5px 10px;
margin-right: 4px;
}
.towbox__section3 {
display: flex;
margin-top: 20px;
}
.towbox__section3 > input {
border: none;
position: relative;
left: 30px;
background-color: var(--puple);
width: 100px;
}
.top-adventures {
margin-top: 20px;
}
.top-adventures__ul {
display: flex;
overflow-x: scroll;
}
.top-adventures__li {
display: flex;
flex-direction: column;
margin-right: 15px;
}
.top-adventures__ul > li > img {
width: 100px;
height: 140px;
padding-bottom: 15px;
border-radius: 10px;
}
.top-adventures__i-box > i {
color: var(--puple);
font-size: 10px;
margin: 0px, 2px;
}
.top-adventures__i-box {
display: flex;
justify-content: space-evenly;
width: 100px;
margin-bottom: 10px;
}
.top-adventures__i-box > i:last-child {
color: var(--grey);
}
.authors {
display: flex;
}
.authors__box1 > img {
width: 100px;
height: 140px;
border-radius: 10px;
}
.authors__box2 {
margin-left: 20px;
}
li > p {
color: var(--grey);
margin-top: 10px;
}
color.css
:root {
--puple: #c29fea;
--grey: rgba(138, 138, 138, 0.4);
}
내 결과물
정답
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>You Are Awesome!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/[email protected]/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<i class="fas fa-bars"></i>
<h1>library</h1>
<i class="fas fa-shopping-basket"></i>
</header>
<div class="search">
<input type="text" placeholder="Search books..." />
<i class="fas fa-search"></i>
</div>
<main>
<h2>Book of the Day</h2>
<div class="featured-book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" class="featured-book__cover">
<div class="featured-book__data">
<h3 class="featured-book__title">1984</h3>
<h5 class="featured-book__author">George Orwell</h5>
<div class="featured-book__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="featured-book__tags">
<span class="featured-book__tag">Distopia</span>
<span class="featured-book__tag">Freedom</span>
</div>
<div class="featured-book__actions">
<span class="featured-book__bookmark"><i class="fas fa-bookmark"></i></span>
<span class="featured-book__book">Book now</span>
</div>
</div>
</div>
<h2>Top Adventures</h2>
<div class="top-books">
<div class="top-books__book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
<div class="top-books__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="top-books__book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
<div class="top-books__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="top-books__book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
<div class="top-books__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="top-books__book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
<div class="top-books__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="top-books__book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
<div class="top-books__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="top-books__book">
<img src="https://cdn.shopify.com/s/files/1/2697/1746/products/1984-book-cover-art-book-cover-prints-2_1531c558-4ea7-4a8b-95f4-1fa3534f0ee9_1200x1200.jpg?v=1545557205" />
<div class="top-books__rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<h2>Popular authors</h2>
<div class="popular">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/George_Orwell%2C_c._1940.jpg/1200px-George_Orwell%2C_c._1940.jpg" />
<div class="popular__data">
<h5 class="popular__title">George Orwell</h5>
<p class="popular__bio">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus at et excepturi quos! Doloribus, itaque enim non ex temporibus sint officia, at ipsa saepe magni maxime! Laboriosam facilis aut corrupti?</p>
</div>
</div>
</main>
</body>
</html>
- css
* {
box-sizing: border-box;
}
input:focus {
outline: none;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
max-width:360px;
margin:0 auto;
padding-bottom: 20px;
}
header{
background:#FDCC32;
display: flex;
justify-content: center;
padding:40px 15px;
padding-bottom:50px;
}
header > * {
width:33%;
}
header h1 {
text-align: center;
font-weight: 600;
}
header i:last-child {
text-align: right;
}
.search {
width: 95%;
position: relative;
top:-30px;
margin:0 auto;
}
input {
width:100%;
border:none;
padding:15px 25px;
font-size: 14px;
border-radius: 50px;
box-shadow: 0 14px 28px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.10);
}
input::placeholder {
opacity: 0.7;
}
.search i {
position: absolute;
top:15px;
right:20px;
color:rgba(0, 0, 0, 0.10);
}
main {
padding:0px 15px;
}
main h2 {
margin-top:30px;
font-weight: 600;
font-size:20px;
margin-bottom: 20px;
}
.featured-book {
display: flex;
}
.featured-book__cover {
width:110px;
border-radius: 5px;
margin-right:20px;
}
.featured-book__data {
width:100%;
}
.featured-book__title {
font-size:18px;
margin-bottom: 5px;
font-weight: 600;
}
.featured-book__author {
font-size:12px;
font-weight: 600;
opacity: 0.3;
display: block;
margin-bottom:10px;
}
.featured-book__rating {
color:#FDCC32;
font-size:12px;
margin-bottom:20px;
}
.featured-book__rating i:last-child {
color:#F7F7F7;
}
.featured-book__tags {
display: flex;
justify-content: space-between;
margin-bottom:30px;
}
.featured-book__tag {
background: #F7F7F7;
font-size: 12px;
font-weight: 500;
padding:10px 20px;
display: block;
border-radius: 5px;
}
.featured-book__actions{
display: flex;
align-items: center;
justify-content: space-between;
}
.featured-book__bookmark {
background-color: #FDCC32;
width:30px;
height:30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.featured-book__book {
background:black;
color:white;
font-size: 12px;
font-weight: 500;
padding:10px 40px;
display: block;
border-radius: 5px;
}
.top-books {
display: flex;
overflow-x:scroll;
padding-bottom: 15px;
}
.top-books__book {
margin-right: 20px;
}
.top-books__book img {
width:68px;
border-radius: 3px;
}
.top-books__rating {
color: #FDCC32;
font-size:8px;
margin-top:10px;
display: block;
text-align: center;
}
.popular {
display: flex;
}
.popular img {
width:140px;
border-radius: 5px;
margin-right: 20px;
}
.popular__title {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
display: block;
}
.popular__bio {
opacity: 0.5;
font-size: 14px;
}
정답결과
밑에 회색 선은 무시해
마지막과제
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>You Are Awesome!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/[email protected]/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<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 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="current__song">November</span>
</div>
<div class="current__player">
<i class="fas fa-step-backward"></i>
<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>
<div class="progress__bar">
<div class="progress__played"></div>
<div class="progress__marker"></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>
- css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
* {
box-sizing: border-box;
}
body {
background-color:#F7F7F7;
padding:20px;
font-size:14px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
color:#222222;
font-family: 'Nunito', sans-serif;
}
.phone {
width:320px;
background-color:white;
min-height: 60vh;
border-radius: 30px;
box-shadow: 0 19px 38px rgba(227, 226, 235, 0.3), 0 15px 12px rgba(227, 226, 235, 0.2);
position: relative;
padding:35px 25px;
}
header {
display: flex;
justify-content: space-between;
}
.artist <{
margin-top:20px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 45px;
}
.artist img {
width: 90px;
height:90px;
border-radius: 50%;
object-fit: cover;
margin-bottom:30px;
box-shadow: 0 19px 38px rgba(220, 195, 205, 0.2), 0 15px 12px rgba(220, 195, 205, 0.3);
}
.artist h2 {
font-size:26px;
font-weight: 700;
margin-bottom: 10px;
}
.artist h6 {
font-weight: 700;
opacity: 0.8;
}
.btns {
display: flex;
justify-content: center;
}
.btns__btn {
padding:10px 25px;
border-radius:20px;
display: flex;
justify-content: center;
align-items: center;
}
.btns__btn:first-child {
background-color:#222222;
color:white;
margin-right: 5px;
}
.btns__btn:last-child {
box-shadow: 0 19px 38px rgba(227, 226, 235, 0.5), 0 -5px 12px rgba(227, 226, 235, 0.3);
margin-left: 5px;
}
.btns__btn:last-child i {
margin-right: 10px;
}
.songs {
margin-top:45px;
}
.songs__song,
.songs__data {
display: flex;
justify-content: space-between;;
align-items: center;
}
.songs__song {
margin-bottom: 20px;
}
.songs__song img {
width: 45px;
height: 45px;
margin-right: 10px;
border-radius: 5px;
}
.songs__author {
display: block;
font-weight: 600;
opacity: 0.6;
margin-bottom: 5px;
font-size:12px;
}
.songs__title {
font-size:16px;
font-weight: 700;
}
.currently-playing {
margin-top:40px;
background-color:#222222;
width: 95%;
padding:20px 30px;
border-radius: 50px;
box-shadow:0 19px 38px rgba(34,34,34, 0.1), 0 15px 12px rgba(34,34,34, 0.2);
color:white;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
bottom: 20px;
}
.current__author {
display: block;
opacity: 0.5;
margin-bottom:5px;
font-size: 12px;
}
.current__song {
font-weight: 600;
text-transform: uppercase;
font-size:16px;
}
.current__player {
display: flex;
align-items: center;
}
.current__player i:nth-child(2){
margin:0 10px;
}
.cover {
display: flex;
justify-content:center;
margin-top:80px;
}
.cover img {
width:80%;
border-radius: 15px;
box-shadow: 0 19px 38px rgba(214, 42, 30, 0.1), 0 15px 12px rgba(214, 42, 30, 0.2);
}
.player {
margin-top: 50px;
display: flex;
flex-direction:column;
align-items: center;
}
.player h4 {
font-size:28px;
font-weight: 700;
margin-bottom: 10px;
}
.player h5 {
font-weight: 600;
font-size: 16px;
opacity: 0.5;
}
.progress {
margin-top:50px;
}
.progress__time {
display: flex;
justify-content: space-between;
font-size:12px;
font-weight: 600;
opacity: 0.5;
}
.progress__bar {
position: relative;
margin-top:15px;
}
.progress__played {
height:4px;
border-radius: 5px;
background-color:#222222;
width: 60%;
position: absolute;
}
.progress__total {
background-color:#E9E9E9;
height:4px;
border-radius: 5px;
}
.progress__marker {
height: 10px;
width: 10px;
background-color:#222222;
border-radius: 50%;
position: absolute;
top:-3.5px;
left:58%;
}
.actions {
display: flex;
margin-top:30px;
align-items: center;
justify-content: space-between;
}
.actions i:first-child,
.actions i:last-child{
opacity: 0.5;
}
.actions span{
background-color:#222222;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
opacity: 1;
box-shadow:0 19px 38px rgba(34,34,34, 0.1), 0 15px 12px rgba(34,34,34, 0.2);
}
.actions span i {
color:white;
opacity: 1!important;
}
졸업작품
위 아래로 정렬되길 바랄 때는 flex-direction: column;
Author And Source
이 문제에 관하여(코코아챌린지 코딩숙제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@123cjstj/코코아챌린지-코딩숙제저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)