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. 결과물

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

1. Flex

1. Flex

Flex 레이아웃은 Flex Container와 Flex items로 구성되어 있다. 

Flex의 속성들은 컨테이너에 적용하는 속성과 아이템에 적용하는 속성으로 나누어진다.

Container는 display, flex-flow,justify-content 속성을 사용할 수 있다.

items에는 order, flex, align-self 등의 속성이 있다. 

Flex Container 속성들 

.flex-box {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  justify-content: space-around;
  justify-content: space-between;
  justify-content: space-evenly;
  height: 200px;
  align-items: center;
  align-items: stretch;

  flex-direction: column;
}

1-1. display 속성 : 

flex Container에선 display를 display : flex, display : inline-flex로 정의한다. 

flex : 블록 특성의 flex container, 

inline-flex : 인라인 특성의 flex container

여기서 flex 는 수직, inline-flex는 수평으로 쌓이게 되는데, display 설정은 item의 수직 수평이 아닌 컨테이너의 수직 수평임을 알아야 한다

1-2. justify-content 속성 : 

justify-content: center; 진행 방향에 대해서 정렬을 합니다. end면은 끝부분에 맞추게 됩니다. 
justify-content: space-around; 콘텐츠를 기준으로 서로 같은 여백들을 가지고 있다.
justify-content: space-between; 일단 좌우 끝을 맞춘 후에 같은 간격으로 배치
justify-content: space-evenly; 모든 여백이 같은 크기로 맞춘다.

1-3. flex-wrap 

컨테이너가 더 이상 아이템을 담을 여유공간이 없을 때 아이템 줄 바꿈을 어떻게 할지 결정하는 속성이다.

wrap, nowrap, wrap-reverse 가 있다. 

wrap : 화면이 줄어드면 자동으로 아래 줄바꿈 해준다.

nowrap : 화면이 줄어들면 보이지 않게 된다. 

wrap-reverse : 화면이 줄어드면 자동으로 위로 줄바꿈 해준다.

etc.

공부하기 좋은 정리된 글이 있어서 링크 걸어둔다.

https://studiomeal.com/archives/197

1. 선택자

2. 결합자

3. CSS 속성 

1. 선택자 

CSS에서 선택자를 사용할 때의 여러 가지 규칙들에 대해 알아보겠다.

1-1. 전체 선택자

모든 엘리먼트에 전부 적용하는 선택

* {
        color: blue;
 }

1-2. 유형 선택자

엘리먼트의 이름을 선택자로써 사용합니다. 

div {
	background-color: beige;
}

1-3. 클래스 선택자

앞에 .을 붙여서 클래스 선택자라는 것을 알려줍니다.

.red-text {
        color: red;
}

1-4. 아이디 선택자 

하나의 이름으로 설정된 태그를 선택하여 CSS를 설정해 줍니다. 

#root {
        margin-top: 100px;
        color: purple;
}

1-5. 특정 선택자

엘리먼트의 속성을 찾아서 일치하는 엘리먼트에게 CSS 속성을 적용한다.

[target="_blank"] {
        font-size: 50px;
}

2.   결합자 (combinator)

2-1. 자손 선택자 (하위 선택자)

공백을 통해 지정된 요소의 하위 항목 모두에게 스타일을 지정하는 선택자

#parent .child {
        font-size: 3rem;
}

2-2. 자식 선택자 

자식 선택자는  > 를 사용하여 지정된 요소의 자식에게 스타일을 지정하는 선택자

#parent > .child {
        font-size: 2rem;
 }

2-3. 인접한 형제 선택자 

+ 를 사용하여 지정한 요소의 바로 뒤 요소에 스타일을 지정해 준다. 같은 부모의 요소 중 앞의 요소 + 뒤의 요소에 대해 앞의 요소의 바로 뒤에 형제에게만 지정되는 선택자

.grandson + .granddaugther {
        color: rgb(100, 50, 25, 1);
}

2-4. 일반 형제 선택자

~ 를 사용하여 지정한 요소의 요소중 현재 요소뒤에 있는 요소들에게 스타일을 지정하는 선택자

.grandson ~ .granddaugther {
        color: rgb(0, 0, 0, 0.5);
 }

3. CSS 속성 

3-1. padding, margin

css에서 패딩과 마진의 차이는 패딩은 내부 여백 마진은 외부 여백을 의미한다.

테두리 border를 기준으로 내부와 외부로 나누어진다. 

margin, padding. border의 경우 아래와 같이 속성 설정 방식이 동일하다.

예시)

#css-file {
  padding: 50px 100px 10px 20px;
}

css-file을 id로 가진 속성을 설정한다. 이때 패딩의 50px 100px 10px 20px 은 각각 상, 우, 하, 좌 순서로 여백을 지정한다.(시계방향 지정)

3-2. display

#css-file .display div {
  display: block;
  display: inline;
  display: inline-block;
  display: none;
}

css-file id에 display 클래스 내에 div 요소들에 스타일을 지정한다. 이때 여러 가지 속성을 지정했다면, 가장 아래 있는 속성이 적용된다.

block : 블록 박스

inline : 인라인 박스 

intline-block : 속성값이 인라인 블록으로 설정된 요소는 인라인 처럼 작동한다. 하지만, 해당 요소 내부에서는 블록형식으로 작용한다. 

none : 보이지 않음

3-3. font, text 속성

#css-file .text {
  color: crimson;
  font-size: 2rem;
  font-weight: 900;
  font-family: "굴림";
  font-family: "돋움";
  font-family: Arial, Helvetica, sans-serif;
  /* font-family: Arial, Helvetica, sans-serif; 앞에 폰트가 없으면 뒤에 폰트를 출력 */
  font-style: italic;
  font-style: normal;
  font-style: oblique;
  text-shadow: 10 10 0px black;
  text-align: center;
  text-decoration: underline solid blue;
  text-decoration: overline dotted black;
  text-decoration: line-through dashed green;
  text-decoration-color: red;
  text-transform: uppercase;
  text-transform: lowercase;
  text-transform: capitalize;
  letter-spacing: 20px;
  font-family: "Kablammo" "Gasoek One", sans-serif;
}

color : crimson; 글자를 크림슨으로 설정

font-size: 2erm; 폰트 사이즈를 기본 사이즈에서 2배만큼 증가 

font-weightl: 900; 폰트 굵기를 900으로 설정

font-family: "굴림"; 폰트 굴림

font-family: "돋음"; 폰트 돋음

font-family: Arial, Helvetica, sans-serif; 앞에 폰트가 없으면 뒤에 폰트를 출력

font-style: italic; 폰트 이탈리 스타일, 기울임

font-style: normal; 일반 스타일

font-style: oblique; 폰트 oblique 스타일

text-shadow: 10 0 0px black; 텍스트에 그림자 속성 부여

text-align: center;  텍스트를 중앙방향 정렬

text-decoration: underline solid blue; 아래에 파란 밑줄
text-decoration: overline dotted black; 위에 검은 점선
text-decoration: line-through dashed green; 중앙에 초록색 밑줄
text-decoration-color: red;  선의 색상 변경
text-transform: uppercase; 대문자 설정
text-transform: lowercase; 소문자 설정
text-transform: capitalize; 맨 앞글자만 대문자 설정
letter-spacing: 20px; 글자간의 20px 간격
font-family: "Kablammo" "Gasoek One", sans-serif; 구글에서 다운로드한 글씨체 css 적용

3-4. background 속성

#css-file .background :nth-child(1) {
  background-color: #f00;
  background-image: url(../imgs/image-g1423ac04e_1280.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#css-file .background :nth-child(2) {
  background-color: #ff0;
  background-image: url(../imgs/image-g1423ac04e_1280.png);
  background-size: cover;
  background-position: bottom right;
}

#css-file .background :nth-child(3) {
  background-color: #f0f;
  background-image: url(../imgs/image-g1423ac04e_1280.png);
  background-size: 100px 100px;
  background-repeat: repeat-y;
}

#css-file .background :nth-child(4) {
  background-color: #0ff;
  background: linear-gradient(45deg, blue 10%, red 50%, blue 90%);
  background: radial-gradient(red, blue);
}

 background-color : 배경색

background-image : 내폴더내에 이미지 파일 로드

background-size : contain : 배경지역이 배경이미지로 완전히 덮이도록 이미지를 가능한 크게 해서 표시 

background-size : cover : 너비와 높이가 내용 안쪽에 알맞은 방식으로 이미지를 가장 크게 조절 

background-size : 100px 100px : 100px width 와 100px height 만큼 이미지 조절 

background-repeat : repeat-y : y축(세로축)으로 반복

background : radial-gradient(red, blue) : 안쪽은 빨간색에서 바깥쪽은 파란색으로 원형으로 색조절

1. 이미지 관련 태그들

2. form

3. 기타 링크

1. 이미지 관련 태그들

1-1. img

이미지 리소스에 대한 설정 태그로 로컬 폴더 내에 있는 이미지를 가져와서 사이즈를 설정해 준다.

<img
        src="../23.06.14/imgs/british-shorthair-gf562d3f63_1280.jpg"
        width="300px"
        height="500px"
        alt="이미지 없음"
/>

1-2. video

저장된 비디오 소스파일을 로컬폴더 내에서 가져와서 설정한다. 

controls 속성은 플레이버튼이나 정지버튼과 같은 비디오를 실행시킬 수 있는 제어기에 대해 표시하는 속성

loop 속성은 video를 반복시켜 주는 속성이다. 

autoplay 속성은 화면이 시작하면 자동으로 재생되게 해 준다. 

muted 속성은 비디오의 소리가 음소거로 설정됩니다.

<video
        src="../23.06.14/video/cat_-_56375 (540p).mp4"
        controls
        loop
        autoplay
        muted
></video>

1-3. audio

audio 태그는 사운드에 대한 태그로 사운드를 들리게 해 줍니다.  

<audio
        src="../23.06.14/sound/reflected-light-147979.mp3"
        controls
        loop
        autoplay
        muted
></audio>

1-4. iframe

iframe는 효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저,

iframe 요소를 이용하면 다른 페이지를 불러와서 삽입가능하다.

 <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/Hax9ZcOteZ0"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;"
        allowfullscreen
 ></iframe>

2. form

2-1. 용어

form 태그 : 폼 속성을 이용하여 전송할 때 어디로 보내야 하는지 그리고 어떤 방법으로 보낼지 결정, 

form 태그 속성들

action : 폼을 전송할 서버 쪽 스크립트 파일 지정

name : 폼을 식별하기 위한 이름지정 

accept-charset : 폼 전송에 사용할 문자 인코딩 지정

target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

method : 폼을 서버에 전송할 http 메서드를 정합니다.

2-2. regist.html

<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>회원가입</title>
  </head>
  <body>
    <div id="root">
      <form action="">
        <!-- <form action="https://www.google.com/search"> -->

        <fieldset>
          <legend>필수정보</legend>
          <label for="id">아이디</label>
          <input type="text" name="id" id="id" />
          <input type="password" name="pw" id="pw" />
        </fieldset>

        <input type="number" name="age" placeholder="나이" />
        <input type="email" name="email" placeholder="메일주소" />
        <input type="checkbox" id="married" />
        <input type="radio" name="gender" id="man" value="man" />
        <label for="man">남자</label>
        <input type="radio" name="gender" id="woman" value="woman" />
        <label for="woman">여자</label>
        <input type="married" name="age" placeholder="나이" />
        <input type="date" name="birthday" />
        <label for="birthday">생일</label>
        <input type="color" name="color" id="color" />
        <textarea
          name="desciption"
          id="desciption"
          cols="30"
          rows="10"
          placeholder="자기소개"
        ></textarea>

        <select name="like" id="like">
          <option value="apple">사과</option>
          <option value="banana">바나나</option>
          <option value="computer">컴퓨터</option>
          <option value="phone">스마트폰</option>
        </select>
        <!-- <input type="text" name="q" placeholder="q" />
        <input type="text" name="oq" placeholder="oq" />
        <input type="text" name="aqs" placeholder="aqs" />
        <input type="text" name="sourceid" placeholder="sourceid">
        <input type="text" name="ie" placeholder="ie">
        <button>보내기</button> -->
        <!-- 입력된 데이터를 전부 지워준다. -->
        <button type="rerset">보내기</button> <br />
      </form>
      <label for="pw">비밀번호</label>
    </div>
  </body>
</html>

2-3. 출력

위 코드를 출력해 본 결과 값이다. 위의 이미지를 통해 어떤 식으로 태그들이 동작하는지 알 수 있다. 

2-4. fildset , legend

<fieldset>
          <legend>필수정보</legend>
          <label for="id">아이디</label>
          <input type="text" name="id" id="id" />
          <input type="password" name="pw" id="pw" />
</fieldset>

label 형식이 input 타입의 id를 찾아서 아이디와 pw를 하나의 필드 셋으로 묶어주는 기능을 하고 있다. 이때 legend 태그를 사용하면 박스 위에 제목으로 지정할 수 있다. 

2-5. input, textarea

 	<input type="number" name="age" placeholder="나이" />
        <input type="email" name="email" placeholder="메일주소" />
        <input type="checkbox" id="married" />
        <input type="radio" name="gender" id="man" value="man" />
        <label for="man">남자</label>
        <input type="radio" name="gender" id="woman" value="woman" />
        <label for="woman">여자</label>
        <input type="married" name="age" placeholder="나이" />
        <input type="date" name="birthday" />
        <label for="birthday">생일</label>
        <input type="color" name="color" id="color" />
        <textarea
          name="desciption"
          id="desciption"
          cols="30"
          rows="10"
          placeholder="자기소개"
        ></textarea>

        <select name="like" id="like">
          <option value="apple">사과</option>
          <option value="banana">바나나</option>
          <option value="computer">컴퓨터</option>
          <option value="phone">스마트폰</option>
        </select>
        <!-- <input type="text" name="q" placeholder="q" />
        <input type="text" name="oq" placeholder="oq" />
        <input type="text" name="aqs" placeholder="aqs" />
        <input type="text" name="sourceid" placeholder="sourceid">
        <input type="text" name="ie" placeholder="ie">
        <button>보내기</button> -->
        <!-- 입력된 데이터를 전부 지워준다. -->
        <button type="rerset">보내기</button> <br />
      </form>
      <label for="pw">비밀번호</label>

input 태그 : 사용자로부터 입력을 받을 수 있는 입력 필드를 정의할 때 사용

radio 속성 : input 태그의 radio 속성으로 타입에는 id, name, checked 가 있다. 이때 설정하는 속성으로 id형식, name 형식, 체크박스 형식으로 출력이 된다. 위의 그림에선 checked 형식으로 남/여의 체크박스를 만들어주었다. 

textarea 태그 : 글을 작성할 수 있게 해주는 태그 

3. 기타 링크

* 기타 링크 : 라이선스 무료 이미지 사이트

https://pixabay.com/ko/

도지스왑 

 스캠의 대명사 도지코인에 대한 스왑 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;
}