BlockChain

Intro

1. H1, H2 TEXT

2. itembox, animation

3. Final code

2일 차 경일게임 아카데미 클론 코딩을 진행하였다. 정적인 웹사이트에 오늘은 애니메이션을 추가하였다. 애니메이션을 이용하여 웹사이트의 말풍선이 오른쪽에서 왼쪽으로 이동하게 진행하였고, 키프레임을 이용하여, 애니메이션을 설정하였다.

위의 화면을 보고 대략적인 웹의 레이아웃을 짜 보았다. KYUNGIL REVIEW와 짧은 글은 헤더태그를 이용하여 작성해 주고, 나머지 아래에 말풍선은 말풍선 이미지와 애니메이션을 이용하여 웹을 제작하였다. 

1. H1, H2 TEXT

전체적인 제목은 id = review를 통해서 오늘 진행할 전체 레이아웃을 묶어주었고  그 아래 부분에 헤더1 과 헤더태그를 이용하여, 이름과 내용을 담았다. 

background-color를 통해 배경색을 지정해 주었고, 글자색은 흰색으로 지정하였다. h1 과 h2의 폰트 사이즈를 정해주었고, text-align = center를 통해 텍스트를 중앙으로 설정하였다. 

h1, h2 css

#review {
  background-color: blueviolet;
  color: white;
  padding: 8rem 0;
  overflow: hidden;
  position: relative;
}

#review > h1 {
  font-size: 1.3rem;
  text-align: center;
}

#review > h2 {
  font-size: 2.5rem;
  text-align: center;
}

2. itembox, animation

왼쪽에서 오른쪽으로 이동시키는 애니메이션을 만들기 위하여 item 형식안에 이미지와 글자를 넣어 반복하기 위하여 6개씩 2번 같은 item 박스를 만들어 reviews 클래스로 묶어주었다. div item 박스는 블록속성이기 때문에 아이템들에게 flex 속성을 주고 gap을주어 박스 사이간격을 만들어 주었다. 키프레임 flow를 이용하여 x좌표를 0, -50%로 이동하여 화면이 이동하는 애니메이션을 작성하였고,. reviews::after를 이용하여 양쪽 10%와 90% 지점에 그림자를 주었다. 또한 위아래로 물결치는 웨이브를 표현하기 위하여 키프레임 wave를 이용하여 지점마다 %를 다르게 주어 위아래로 이동하는 애니메이션을 만들었다.

 개발을 진행하면 transition 개념과 transform 개념에 대해 부족하여 이 부분에 대해 더 공부해야겠다.

item - css

@keyframes flow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

#review .reviews {
  height: 30rem;
  margin: 10rem 0;
}

#review .reviews::after {
  content: "";
  height: 30rem;
  background: linear-gradient(
    to right,
    blueviolet 0%,
    rgba(138, 43, 256, 0) 10%,
    rgba(138, 43, 256, 0) 90%,
    blueviolet 100%
  );
  position: absolute;
  z-index: 1;
  width: 100%;
  display: block;
}

#review .reviews > div {
  display: flex;
  gap: 2.5rem;
  /*gap은 flex 박스의 설정이므로 flex 위치에 넣어준다.  */
  position: absolute;
  animation: flow 20s linear infinite;
  padding-right: 2.5rem;
}

@keyframes wave {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30%);
  }
  100% {
    transform: translateY(0);
  }
}

#review .reviews .item {
  position: relative;
  animation: wave 5s ease infinite;
}

@keyframes wave2 {
  0% {
    transform: translateY(30);
  }
  50% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(30);
  }
}

#review .reviews .item:nth-child(2n) {
  animation: waves 5s ease infinite;
}

#review .reviews .item > img {
  width: 25rem;
}

#review .reviews .item > div {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4.5rem 2rem;
  width: 100%;
  height: 100%;
}

#review .reviews .item div img {
  width: 9rem;
}

#review .reviews .item div .picture {
  width: 7rem;
  height: 7rem;
  background-color: red;
  position: absolute;
  bottom: 5rem;
  right: 2rem;
  border-radius: 100rem;
}

#review .reviews p {
  color: black;
  font-size: 1.5rem;
  font-weight: 600;
}

#review .reviews p:nth-child(3) {
  font-size: 1rem;
  color: #6842ff;
  padding: 3rem 0;
}

3. Final code

1. index.html 

<div id="review">
        <h1>KYUNGIL REVIEW</h1>
        <h2>여러분 선배들의 생생한 수강후기를 확인해 보세요.</h2>
        <div class="reviews">
          <div>
            <div class="item">
              <img src="./public/imgs/speech_bg.png" alt="박스" />
              <div>
                <img src="./public/imgs/review_star5.png" alt="스타" />
                <p>비전공자인 저도 했습니다. <br />모두 취업하세요!</p>
                <p>플밍35기 이지우</p>
                <div class="picture"></div>
              </div>
            </div>
            <div class="item">
              <img src="./public/imgs/speech_bg.png" alt="박스" />
              <div>
                <img src="./public/imgs/review_star5.png" alt="스타" />
                <p>6개월이라는 짧지만 긴 시간이<br />아깝지 않았어요</p>
                <p>플밍35기 이지우</p>
                <div class="picture"></div>
              </div>
            </div>
            <div class="item">
              <img src="./public/imgs/speech_bg.png" alt="박스" />
              <div>
                <img src="./public/imgs/review_star5.png" alt="스타" />
                <p>포기하지 않으면 누구나 <br />성공할 수 있습니다.</p>
                <p>플밍34기 박유진</p>
                <div class="picture"></div>
              </div>
            </div>
            <div class="item">
              <img src="./public/imgs/speech_bg.png" alt="박스" />
              <div>
                <img src="./public/imgs/review_star5.png" alt="스타" />
                <p>처음엔 걱정했지만 많이<br />배웠고 취업까지 했어요.</p>
                <p>플밍35기 권기석</p>
                <div class="picture"></div>
              </div>
            </div>
            <div class="item">
              <img src="./public/imgs/speech_bg.png" alt="박스" />
              <div>
                <img src="./public/imgs/review_star5.png" alt="스타" />
                <p>6개월이라는 짧지만 긴 시간이<br />아깝지 않았어요</p>
                <p>플밍35기 이지우</p>
                <div class="picture"></div>
              </div>
            </div>
            <div class="item">
              <img src="./public/imgs/speech_bg.png" alt="박스" />
              <div>
                <img src="./public/imgs/review_star5.png" alt="스타" />
                <p>비전공자인 저도 했습니다. <br />모두 취업하세요!</p>
                <p>플밍35기 이지우</p>
                <div class="picture"></div>
              </div>
            </div>
            <div class="item">
              <img src="./public/imgs/speech_bg.png" alt="박스" />
              <div>
                <img src="./public/imgs/review_star5.png" alt="스타" />
                <p>비전공자인 저도 했습니다. <br />모두 취업하세요!</p>
                <p>플밍35기 이지우</p>
                <div class="picture"></div>
              </div>
            </div>
            <div class="item">
              <img src="./public/imgs/speech_bg.png" alt="박스" />
              <div>
                <img src="./public/imgs/review_star5.png" alt="스타" />
                <p>6개월이라는 짧지만 긴 시간이<br />아깝지 않았어요</p>
                <p>플밍35기 이지우</p>
                <div class="picture"></div>
              </div>
            </div>
            <div class="item">
              <img src="./public/imgs/speech_bg.png" alt="박스" />
              <div>
                <img src="./public/imgs/review_star5.png" alt="스타" />
                <p>포기하지 않으면 누구나 <br />성공할 수 있습니다.</p>
                <p>플밍34기 박유진</p>
                <div class="picture"></div>
              </div>
            </div>
            <div class="item">
              <img src="./public/imgs/speech_bg.png" alt="박스" />
              <div>
                <img src="./public/imgs/review_star5.png" alt="스타" />
                <p>처음엔 걱정했지만 많이<br />배웠고 취업까지 했어요.</p>
                <p>플밍35기 권기석</p>
                <div class="picture"></div>
              </div>
            </div>
            <div class="item">
              <img src="./public/imgs/speech_bg.png" alt="박스" />
              <div>
                <img src="./public/imgs/review_star5.png" alt="스타" />
                <p>6개월이라는 짧지만 긴 시간이<br />아깝지 않았어요</p>
                <p>플밍35기 이지우</p>
                <div class="picture"></div>
              </div>
            </div>
            <div class="item">
              <img src="./public/imgs/speech_bg.png" alt="박스" />
              <div>
                <img src="./public/imgs/review_star5.png" alt="스타" />
                <p>비전공자인 저도 했습니다. <br />모두 취업하세요!</p>
                <p>플밍35기 이지우</p>
                <div class="picture"></div>
              </div>

2. review.css

#review {
  background-color: blueviolet;
  color: white;
  padding: 8rem 0;
  overflow: hidden;
  position: relative;
}

#review > h1 {
  font-size: 1.3rem;
  text-align: center;
}

#review > h2 {
  font-size: 2.5rem;
  text-align: center;
}

@keyframes flow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

#review .reviews {
  height: 30rem;
  margin: 10rem 0;
}

#review .reviews::after {
  content: "";
  height: 30rem;
  background: linear-gradient(
    to right,
    blueviolet 0%,
    rgba(138, 43, 256, 0) 10%,
    rgba(138, 43, 256, 0) 90%,
    blueviolet 100%
  );
  position: absolute;
  z-index: 1;
  width: 100%;
  display: block;
}

#review .reviews > div {
  display: flex;
  gap: 2.5rem;
  /*gap은 flex 박스의 설정이므로 flex 위치에 넣어준다.  */
  position: absolute;
  animation: flow 20s linear infinite;
  padding-right: 2.5rem;
}

@keyframes wave {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30%);
  }
  100% {
    transform: translateY(0);
  }
}

#review .reviews .item {
  position: relative;
  animation: wave 5s ease infinite;
}

@keyframes wave2 {
  0% {
    transform: translateY(30);
  }
  50% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(30);
  }
}

#review .reviews .item:nth-child(2n) {
  animation: waves 5s ease infinite;
}

#review .reviews .item > img {
  width: 25rem;
}

#review .reviews .item > div {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4.5rem 2rem;
  width: 100%;
  height: 100%;
}

#review .reviews .item div img {
  width: 9rem;
}

#review .reviews .item div .picture {
  width: 7rem;
  height: 7rem;
  background-color: red;
  position: absolute;
  bottom: 5rem;
  right: 2rem;
  border-radius: 100rem;
}

#review .reviews p {
  color: black;
  font-size: 1.5rem;
  font-weight: 600;
}

#review .reviews p:nth-child(3) {
  font-size: 1rem;
  color: #6842ff;
  padding: 3rem 0;
}

#review > button {
  color: white;
  width: 10rem;
  height: 4rem;
  background-color: blue;
  border-radius: 1.4rem;
  border: none;
  display: block;
  margin: auto;
}

1. 경일게임아카데미 클론

2. index.html

3. index.css

4. header.css

5. 결과물

1. 경일게임아카데미 클론

오늘은 경일게임 아카데미에 대한 웹사이트를 클론하였다. 아직은 html 과 css만 이용하여 진행하였다. 그 중 첫번째 섹터를 클론하였다. 로고와 내용, 버튼들을 이용하여 웹페이지를 구현하였다.  

https://www.kiweb.or.kr/intro

위 링크는 경일게임아카데미의 클론 전화면이다. 

페이지를 개발하기 앞서서 페이지의 구조를 어떻게 나눌지를 생각해 보아야했다. 페이지가 나뉘거나 색이 변하는 부분을 기준으로 div 태그를 이용하여 개발을 진행하였다. 경일게임 아카데미의 페이지를 8개의 섹터로 나누고 섹터안에서 화면을 어떻게 배치할 것인지에 대해 생각해보았다. 

경일게임아카데미의 홈페이지를 보고 다음과 같이 나누어 보았다.  위와 같은 레이아웃을 바탕으로 페이지를 개발해보았다. 

맨위의 박스는 경일게임아카데미의 로고, 두번째 세번째 큰 박스는 글쓰기 박스와, 버튼 박스를 감쌓고 있다.  기본적으로 index.html과 index.css, header.css로 파일을 구성하였다. 첫번째로 index.html 에는 div id root 안에 8개의 div 태그로 감쌓주었고, 첫번째 섹션인 header를 구현하였다. header 섹션의 상단엔 로고이미지를 넣었고, 텍스트 박스안에 h1 태그와 p 태그를 이용하여 텍스트박스를 작성하였다. 마지막 버튼 박스는 buttons class 를 부트캠프와 디벨로켓 클래스로 묶어서  버튼과 #태그를 구성하였다. 

2. index.html

<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>경일게임아카데미</title>
  </head>
  <link rel="stylesheet" href="./public/index.css" />
  <link rel="stylesheet" href="./public/header.css" />
  <body>
    <div id="root">
      <div id="header">
        <div class="container">
          <div class="logo">
            <a href="#">
              <img src="public/imgs/ki_logo_white.png" alt="로고" />
            </a>
          </div>
          <div class="text">
            <h1>
              개발자 취업,<br />
              그 이상의 가치를 만들다!
            </h1>
            <p>
              능력으로 인정받는 슈퍼 신입으로 만들어드립니다! <br />
              왕초보여도 상관없어요. <br />
              제대로 하겠다는 마음만 가지고 오세요.
            </p>
          </div>
          <div class="buttons">
            <div class="bootcamp">
              <button>게임 부트캠프</button>
              <p>#유니티3D #언리얼 #기획 #그래픽 #프로그래밍</p>
            </div>
            <div class="develrocket">
              <button>디벨로켓 4.0</button>
              <p>#메타버스기획 #메타버스개발 #블록체인 #가상증강 #웹개발</p>
            </div>
          </div>
        </div>
      </div>
      <div id="why"></div>
      <div id="review"></div>
      <div id="interior"></div>
      <div id="curriculm"></div>
      <div id="apply"></div>
      <div id="guided"></div>
      <div id="map"></div>
    </div>
  </body>
</html>

3. index.css

/* 패딩이 들어가도 정한 크기가 달라지지 않도록 */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

#root {
  width: 1920px;
}

.container {
  padding: 0 250px;
}

4. header.css

#header {
  background-image: url(./imgs/intro_bg_pc.png);
  height: 1000px;
}

#header .logo {
  margin: auto;
  padding: 30px 0;
  text-align: center;
}

#header .logo img {
  width: 250px;
}

#header .text {
  color: white;
}

#header .text h1 {
  font-size: 2.5rem;
}

#header .text p {
  font-size: 1.4rem;
  opacity: 0.5;
}

#header .buttons {
  display: flex;
  gap: 2rem;
}

#header .buttons div {
  flex: 1;
  /* padding: 0 1rem; */
}

/* #header .buttons div:first-child {
  padding-right: 0.5rem;
}

#header .buttons div:last-child {
  padding-left: 0.5rem;
} */

#header .buttons button {
  width: 100%;
  height: 7rem;
  font-size: 2rem;
  border-radius: 2rem;
  font-weight: 900;
  color: white;
  box-shadow: 0.5rem 0.5rem 5rem black rgba(0, 0, 0, 0.3);
  border: none;
  transition: border-radius 0.5s lineasr;
}

#header .buttons button:hover {
  border-radius: 5rem;
}
#header .buttons p {
  font-size: 1rem;
  text-align: center;
  padding: 0.5rem 0;
  font-weight: 900;
}

#header .bootcamp button {
  background: linear-gradient(to right, dodgerblue, lightblue);
}

#header .develrocket button {
  background: linear-gradient(to right, fuchsia, lightpink);
}

#header .bootcamp p {
  color: lightblue;
  opacity: 0.5;
}

#header .develrocket p {
  color: lightpink;
  opacity: 0.5;
}

5. 결과물

색깔과 여백 사이즈 및 글자사이즈가 조금씩 다르지만, 비슷하게 개발해 보았다.

도지스왑 

 스캠의 대명사 도지코인에 대한 스왑 html 홈페이지를 만들어 보았다. 아직 이미지나 디자인, css에 대한 기교가 없어서 간단하게 구현할 수 있는 방식으로 구현해 보았다. 

기본적인 coinmarketcap의 스왑 웹사이트를 보고 구현을 진행하였다. 아직 javascript를 사용하여 연결이나 동작은 작동하지 않지만, 기본적인 html과 css 와꾸를 만들어 보았다.

아직 header 부분의 div 속성값에 대한 부분을 숙지하지 못해서 버튼들의 중앙값을 설정하지 못하였다. 차차 알아가야겠다.

1. dogeswap.html 

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/dogeswap.css" />
  </head>
  <body>
    <div>
      <nav>
        <div class="header">
          <div class="logo">
            <button><img src="./imgs/dogeicon.png" alt="dogeicon" /></button>
          </div>
          <h2>DOGDSWAP / APP V2</h2>

          <div class="contentbox">
            <div class="swaptext">Swap</div>
            <div class="pooltext">Pools</div>
            <div class="bridgetext">Bridge</div>
            <div class="farmtext">Farm</div>
            <div class="vesistexs">veSIS</div>
          </div>
        </div>

        <ul class="gnb">
          <li>Rewards</li>
          <li>Get SIS & LP Tokens</li>
          <li>veSIS</li>
          <li>Zap</li>
          <li>Developers</li>
          <li>Audits</li>
          <li>Explorer</li>
          <li>Index</li>
          <li>Explorer UI</li>
        </ul>
        <div class="main">
          <div class="exchange">
            <h3>Exchange</h3>
          </div>

          <div class="from">
            Transform From Ethereum: <br />
            <div class="fromToken">
              <select name="tokenselect" id="token"></select>
            </div>
            <div class="writeBalance">
              <input type="number" />
            </div>
          </div>

          <div class="exchangebtn">
            <button><img src="./imgs/swap.png" alt="swapbtn" /></button>
          </div>

          <div>
            <div class="to">
              Transform To: <br />
              <div class="fromToken">
                <select name="tokenselect" id="token"></select>
              </div>
              <div class="writeBalance">
                <input type="number" />
              </div>
            </div>
          </div>

          <div class="add wallet"></div>
          <div class="connect wallet">
            <button>CONNECT WALLET</button>
          </div>
        </div>
      </nav>
    </div>
    <div></div>
    <div></div>
  </body>
</html>

2. dogeswap.css

.header {
  display: flex;
  background-image: url(../imgs/dogebackground.jpg);
}

.header h2 {
  color: aquamarine;
}

.contentbox {
  display: inline-flex;
  margin: auto;
  /* display: inline-flex;
  justify-content: center; */
}

.contentbox div {
  width: 100px;
  height: 40px;
  margin: 5px;
  border-radius: 10px;
  background-color: cadetblue;
  color: black;
  text-align: center;
  border: 1px solid;
}

.gnb > li {
  display: none;
}

.main {
  border: 5px solid;
  background-image: url(../imgs/dogehell.jpg);
}

.main div {
  text-align: center;
  color: aquamarine;
  font-size: 30px;
  font-weight: bold;
}

.main select {
  width: 40px;
  height: 40px;
}

.main input {
  width: 300px;
  height: 40px;
}

.from div,
.To div {
  display: inline-block;
  margin: 20px;
}

.exchangebtn {
  margin: 100px;
}

.exchangebtn button img {
  width: 20px;
  height: 20px;
}

.logo button img {
  width: 70px;
  height: 70px;
}