코코아챌린지 코딩숙제

yejin·2021년 1월 8일
html csskokoa clon
0

[코코아톡 클론] html-css

목록 보기
9/9
post-thumbnail
<!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/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>
    <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/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>
    <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/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>
    <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/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>
    <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;

profile
yejin
♪(๑ᴖ◡ᴖ๑)♪ 기회는 도전에서부터 시작되는 것
이전 포스트

[코코아톡 클론] 6.12~6.17 필기

0개의 댓글