BlockChain

1. 카멜형

tempLetValue

낙타의 모양을 연상해서 중간에 툭 튀어나온 낙타모양형식의 표기법

2. 파스칼형

TempLetValue

앞 글자를 대문자로 하여 사용하는 표기법

3. 스네이크 형

temp_let_value

뱀처럼 언더바를 이용하여 사용하는 표기법

4. 케밥형 

 temp-let-value

중앙에 꼬챙이 형태의 - 를 이용하여 표기하는 표기법, 보통 CSS의 id나 Class에 사용한다. 또한 자바스크립트에서는 - 가 빼기 연산자이기 때문에 변수명으로 사용할 수 없다. 

5. 헝가리안 표기법

numTempLetValue

변수에 자료형을 함께 사용하는 표기법 

1. Javascript Runtime

2. JS의  싱글스레드 vs 멀티스레드 

3. Call Stack & Callback Queue

오늘은 브라우저 렌더링, html과 css 그리고 자바스크립트를 이용하여 총괄적으로 우리가 웹에 어떤 식으로 그리는지 어떤 식으로 작성된 데이터를 올리고 호출하고 그리는지까지의 전체적인 브라우저 렌더링 과정을 

도식화하고 그려보았다.

1. Javascript Runtime

  런타임 이란 프로그래밍 언어가 구동되는 환경을 말합니다. Node.js 나 크롬등의 여러 브라우저들은 자바 스크립트가 구동되는 환경이기 때문에, Node.js나 브라우저들을 자바스크립트 런타임이라고 한다.

2. JS의 싱글스레드 vs 멀티스레드 

싱글스레드 : 자바 스크립트는 싱글스레드, 논-블로킹 언어이다. 

싱글스레드 : 싱글스레드는 하나의 힙 영역과 하나의 콜스택을 가진다. 하나의 콜스택을 가진다는 것은 한번에 한 가지 일을 한다는 것이다. 

멀티스레드 : js 는 싱글스레드이지만, 멀티스레드와 같이 Callback 함수나 비동기 처리를 할 수 있다. Event Loop에서 CallStack이 비어있는지 확인하고 Task Queue의 콜백함수들을 Call Stack에 추가한다.

3. Call Stack & Callback Queue

Call Stack

자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트를 저장하는 자료구조.

1. 함수 호출시 실행콘텍스트가 생성되고, 이를 콜 스택에 추가한 다음 함수를 수행한다.

2. 함수에 의 해 호출되는 모든 함수는 콜 스택에 추가되고 해당위치에서 실행한다. 

3. 함수의 실행이 종료되면 해당 실행 컨텍스트를 콜 스택에서 제거한 후 중단 된 시점부터 다시 시작한다.

4. 만약 스택이 할당된 공간보다 많은 공간을 차지하면 스택오버플로우가 발생한다. 

Callback Queue

1. 콜백 큐는 Microtask Queue, Animation Frames, Task Queue로 구성되어 있다.

2. web API의 종류에 따라 다른 Queue로 이동된다. 

3. 콜백 큐에서 실행스택으로 옮겨지는 우선순위는 1. Microtask Queue 2. Animation  Frames 3. Task Queue이다.

1. 클론 페이지 5

2. 클론 페이지 6

3. 소스코드

금요일이 되어 드디어 마지막, html css 클론 시간이었다. 경일게임 아카데미의 footer 부분 이외에 마지막 부분 이외에 커리큘럼 홈페이지와 가이드 홈페이지를 클론을 진행하였다. 

1. 클론 페이지 5

1. 클론 할 화면 - 1 

커리큘럼 홈페이지를 클론 하기 앞서 어떤 식으로 클래스를 감쌓주고 텍스트박스와 item요소들을 지정할지 고민하였다. 반응형 웹으로 개발하기 위해, 화면을 줄이면서 어떤 식으로 반응하는지 살펴보았다. 화면이 특정 px 보다 작아졌을 시 네 가지 아이템이 보이다가 두 가지 아이템만 보이도로 반응하였다. 이를 구현하기 위하여 전체를 묶어주는 컨테이너박스 아래에 title-box와 box-wrapper로 감쌓주었고, box-wrapper 아래에 div > class box > class square, p 태그를 이용하여 두 개를 div로 묶음처리하여 웹이 작아진 상황에 4개에서 2개가 보이는 반응형 웹을 개발하였다. 

1. 예상 클론 레이아웃 - 1

1. 클론 후 화면 - 1

2. 클론 페이지 6

2. 클론 할 화면 - 2

가이드 페이지를 클론 하면서 살짝 까다로웠던 점은 전체를 묶어준 이후 flex 형태로 박스들을 배치하였지만, 각각의 아이템 박스들이 3, 3, 4, 1 개의 아이템을 가지고 있어 그대로 속성을 적용한다면 화면이 깨진다는 것이었다. 이를 해결하기 위해 부모속성과 자식 속성에 flex를 모두 부여하고 각각의 차일드를 찾아서 직접 색을 부여하였다.

2. 예상 클론 레이아웃 - 2

2. 클론 후 화면 - 2

일주일 동안 여러 가지의 클론을 진행하면서 html, css의 기본적인 요소들과 속성들을 이해하였고, 인라인과 블록형식, 반응형 웹을 개발할 때 어떤 식으로 각각의 아이템박스들을 묶어줄지 고민하였다. 이를 바탕으로 내가 원하는 포지션에 원하는 것들을 적절히 배치하여 디자인하여 웹에서 보이는 부분을 꾸밀 수 있을 것 같다. 특히 flex 부분과 마진과 패딩에 간격에 대한 것들이 이해가 부족하여 이 부분을 공부한다며 더 좋을 것 같다. 

3. 소스코드

3. curriculum, html

<div id="curriculum">
        <div class="container">
          <div class="title-box">
            <h1>KYUNGIL CURRICULM</h1>
            <h2>여러분이 준비하시게 될 것</h2>
          </div>
          <div class="box-wrapper">
            <div>
              <div class="box">
                <div class="square">
                  <div><div class="img"></div></div>
                </div>
                <p>
                  3가지 <br />
                  포트폴리오
                </p>
              </div>
              <div class="box">
                <div class="square">
                  <div><div class="img"></div></div>
                </div>
                <p>
                  Git을 활용한 <br />
                  업무관리
                </p>
              </div>
            </div>
            <div>
              <div class="box">
                <div class="square">
                  <div><div class="img"></div></div>
                </div>
                <p>
                  경쟁력 있는 <br />
                  자소서와 기술문서
                </p>
              </div>
              <div class="box">
                <div class="square">
                  <div><div class="img"></div></div>
                </div>
                <p>
                  모의면접을 통한 <br />
                  1:1 피드백
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

4. curriculum.css

#curriculum {
  background-color: rgb(20, 142, 218);
  padding: 7rem 0;
  /* display: none; */
}

#curriculum .box-wrapper {
  margin-top: 6rem;
}

#curriculum .box-wrapper,
#curriculum .box-wrapper > div {
  display: flex;
  gap: 1rem;
  flex: 1;
  flex-wrap: wrap;
  min-width: 30rem;
}

#curriculum .box-wrapper .box {
  flex: 1;
  border-radius: 2rem;
  overflow: hidden;
}

#curriculum .box-wrapper .box p {
  background-color: beige;
  padding: 2rem 0;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  text-align: center;
}

.img {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

/* @media only screen and (min-width: 30rem) {
} */

3. guide.html

<div id="guide">
        <div class="container">
          <div class="text-box">
            <h1>
              <span>당신의 노력이 결실이 될 수 있도록,</span><br />
              경일게임아카데미 가이드 블록제도
            </h1>
            <p>
              가이드 블록이란? 촘촘히 가이드를 겹쳐 취업 전략을 구체화 시키는
              전략입니다.
            </p>
          </div>
          <div class="step">
            <div class="box-wrapper">
              <div class="item-box">
                <div>
                  <h2>Step1</h2>
                  <h1>개별 강점 강화</h1>
                </div>
                <div>본인의 강점을 살린 포트폴리오</div>
                <div>업계 트랜드 및 자료 제공</div>
              </div>
              <div class="item-box">
                <div>
                  <h2>Step2</h2>
                  <h1>면접 및 자소서</h1>
                </div>
                <div>빅데이터를 통한 면접 컨설팅</div>
                <div>AAA회사 우수 사례를 통한 자소서 컨설팅</div>
              </div>
            </div>
            <div class="box-wrapper">
              <div class="item-box">
                <div>
                  <h2>Step3</h2>
                  <h1>모의면접</h1>
                </div>
                <div>인성 면접 가이드</div>
                <div>기술면접 가이드</div>
                <div>구직 전략 및 연봉협상 가이드</div>
              </div>
              <div class="item-box">
                <div class="bg-gradient">
                  <h1>개발자 <br />취업</h1>
                </div>
              </div>
            </div>
          </div>
          <div class="footer">
            우리는 여러분들의 “간절함“과 “절박함”을 잘 알고 있습니다. 여러분의
            노력이 헛되지 않도록 저희가 제대로 서포트 하겠습니다.
          </div>
        </div>
      </div>

3. guide.css

#guide div {
  /* border: 1px solid black; */
}

#guide {
  background-color: lightskyblue;
  padding: 7rem;
}

#guide .text-box {
  text-align: center;
  color: white;
  margin-bottom: 3rem;
}

#guide .text-box span {
  font-size: 1.3rem;
}

#guide .text-box p {
  font-weight: 900;
  opacity: 0.5;
}

#guide .step {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

#guide .step .box-wrapper {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

#guide .step .box-wrapper .item-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

#guide .step .box-wrapper .item-box div {
  padding: 1rem 0.5rem;
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  background-color: white;
  font-weight: 900;
}

#guide .step .box-wrapper .item-box h1,
#guide .step .box-wrapper .item-box h2 {
  margin: 0;
}

#guide .step .box-wrapper .item-box h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: yellow;
}

#guide .step .box-wrapper .item-box h1 {
  color: white;
}

#guide .step .box-wrapper:first-child .item-box:first-child div:first-child {
  background-color: cadetblue;
}

#guide .step .box-wrapper:first-child .item-box div:first-child {
  background-color: pink;
}

#guide .step .box-wrapper .item-box:first-child div:first-child {
  background-color: blue;
}

#guide .step .box-wrapper:last-child .item-box:last-child div:first-child {
  /* background-color: brown; */
  /* background: linear-gradient(to bottom, red, blue); */
}

#guide .step .bg-gradient {
  background: linear-gradient(to bottom, red, blue);
}

#guide .footer {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 900;
  margin-top: 4rem;
  color: blue;
  opacity: 0.5;
}

1. 클론 할 페이지

2. 예상 클론 레이아웃

3. 클론 후 페이지

경일게임아카데미 클론 4회 차이다. 4번째 홈페이지는 특별히 애니메이션이나 다른 기능 없이 개발을 진행할 수 있었다. 지금까지 페이지들이 반응형 웹을 고려하지 않고 픽셀값과 고정된 크기로 주었다면, 4페이지부터는 반응형 웹을 고려하여 박스들을 배치하고, flex를 이용하여 개발을 진행하였다. 이 전 페이지들은 여러 css 들과 애니메이션을 배워 어려웠다면, 오늘 만든 페이지의 경우 화면의 변화에 따라 변화하는 반응형 웹을 고려하여 개발을 진행하였다. 

1. 클론 할 페이지

2. 예상 클론 레이아웃

위의 클론 할 페이지를 바탕으로 큰 레이아웃을 구상하였다. 기본적으로 텍스트 박스 두 개는 제목태그를 이용하여 text-align center와 미디어쿼리를 이용하여 480px에 도달 시 fontsize를 조절하여 주었다. h2에는 word-break: kee를 주어 띄어쓰기가 나오면 자동으로 다음줄로 넘어가는 속성을 부여하였다.  화면이 줄어들면 2개의 아이템만 보이는 것을 위해 빨간 큰 row1으로 묶어 주었고, 빨간색 row1 아래에 row2와 img class를 주어 웹이 줄어들고 바뀜에 따라 줄어들면 2가지 아이템 박스가 보이는 반응형 웹을 만들었다. 

3. 클론 후 페이지

오늘 웹을 개발하면서 특별히 어려운 부분의 html과 css는 아니었지만, 반응형 웹을 구상할 때 어떻게 자를 것인지와 어떤 비율로 나누어질 것인지에 대해 고민하여 보았다. 또한 media쿼리에 대한 사용법을 알게 되었고,  가상요소,  ::before와 ::after 사용법의 숙지와 이에 대해 더 공부하여야겠다. 

1. 클론 할 화면

2. 예상 클론 레이아웃

3. 클론 후 화면

경일게임아카데미 클론코딩

오늘은 경일 게임 아카데미 홈페이지 클론코딩 3번째 페이지를 진행하였다. 

오늘 클론을 하면서 배운점은 화면에 대한 배치와 배치를 한 후 각각의 아이템에 대한 속성 값을 어떤 식으로 줘야 여러 개의 엘리먼트 값들에 한 번에 속성을 주는지와 애니메이션을 통해 글자박스들의 이동과 글자들의 색상 조절 등의 애니메이션을 주었다. 기본적으로 흐름을 이해하고, html에 속성을 주는 형식을 이해하는 것이 중요한 수업이었다. 

1. 클론 할 화면

위의 클론 할 홈페이지 화면을 바탕으로 예상되는 클론 레이아웃을 짜 보았다. 

첫 번 째로 전체적인 화면의 div id = why 아래 컨테이너로 전체 레이아웃을 감싸주었고, 그 아래 slide 되는 텍스트 부분과 

아래에 화면을 올리면 화면이 바뀌는 버튼 클래스로 묶어 주었다. 

2. 예상 클론 레이아웃

2-1. slide class

slide 부분에는 6개의 텍스트를 주었고, @keyframe slide 를 사용하여, 각각의 % 를 지정하였고, 흐린 화면 아래위 두 개와 중앙값 한 개에 대해 진하게 와 글씨를 크게 해 주는 css를 적용하였다. 특히 아래에서 위로 올라가는 화면을 진행하면서 키프레임 % 대해 어떻게 사용해야 할지 생각해 보았고,  text가 3개가 보여야 하기 때문에 글자 속성을 slide 박스 전체가 올라가면 안 되기 때문에 div 속성으로 감싸주어 특정 부분에 글씨가 커지고 진하게 보일 수 있도록 애니메이션을 지정하였다. 

slide 박스의 css

#why {
  margin: 7rem 0;
}

#why h1 {
  font-size: 1.2rem;
  font-weight: 900;
  text-align: center;
  color: blueviolet;
  margin: 4rem 0;
}

@keyframes slide {
  0% {
    transform: translateY(0);
  }
  6% {
    transform: translateY(-17.5%);
  }
  33.3% {
    transform: translateY(-17.5%);
  }
  39.3% {
    transform: translateY(-35%);
  }
  66.6% {
    transform: translateY(-35%);
  }
  72.6% {
    transform: translateY(-52%);
  }
  100% {
    transform: translateY(-52%);
  }
}

#why .slide {
  height: 14rem;
  overflow: hidden;
}

#why .slide div {
  animation: slide 5s linear infinite;
}

#why .slide h2 {
  font-size: 2.5rem;
  text-align: center;
  margin: 1rem 0;
  color: darkblue;
  opacity: 0.4;
}

@keyframes text1 {
  0% {
    opacity: 1;
    font-size: 3rem;
  }
  6% {
    opacity: 0.4;
    font-size: 2.5rem;
  }
  33.3% {
  }
  39.3% {
  }
  66.6% {
  }
  72.6% {
  }
  100% {
    opacity: 0.4;
    font-size: 2.5rem;
  }
}

#why .slide h2:nth-child(2) {
  animation: text1 5s linear infinite;
}

@keyframes text2 {
  0% {
    opacity: 0.4;
    font-size: 2.5rem;
  }
  6% {
    opacity: 1;
    font-size: 3rem;
  }
  33.3% {
    opacity: 1;
    font-size: 3rem;
  }
  39.3% {
    opacity: 0.4;
    font-size: 2.5rem;
  }
  66.6% {
  }
  72.6% {
  }
  100% {
    opacity: 0.4;
    font-size: 2.5rem;
  }
}

#why .slide h2:nth-child(3) {
  animation: text2 5s infinite;
}

@keyframes text3 {
  0% {
  }
  6% {
  }
  33.3% {
    opacity: 0.4;
    font-size: 2.5rem;
  }
  39.3% {
    opacity: 1;
    font-size: 3rem;
  }
  66.6% {
    opacity: 1;
    font-size: 3rem;
  }
  72.6% {
    opacity: 0.4;
    font-size: 2.5rem;
  }
  100% {
    opacity: 0.4;
    font-size: 2.5rem;
  }
}

#why .slide div h2:nth-child(4) {
  animation: text3 5s linear infinite;
}

@keyframes text4 {
  0% {
  }
  6% {
  }
  33.3% {
  }
  39.3% {
  }
  66.6% {
    opacity: 0.1;
    font-size: 2.5rem;
  }
  72.6% {
    opacity: 1;
    font-size: 2.6rem;
  }
  100% {
    opacity: 1;
    font-size: 2.6rem;
  }
}

#why .slide div h2:nth-child(5) {
  animation: text4 5s linear infinite;
}

슬라이드 박스를 구현한 후 버튼들에게 flex 속성을 주고 버튼의 item 들에 hover 속성을 부여하여 마우스가 위로 올라가면 다른 글자와 img 가 보이도록 만들었다. 이때 item 박스에 이미지들에게 동일한 규격의 사이즈를  주기 위해 obeject-fit contain 속성과 너비와 높이를 부여하여 각각의 이미지들에 동일한 속성의 사이즈를 적용하였다. 

#why .buttons {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

#why .buttons .item {
  height: 15rem;
  width: 32%;
  margin-bottom: 1rem;
  position: relative;
  border-radius: 3rem;
  text-align: center;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset -0.2rem -0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2);
}

#why .buttons .item p {
  font-weight: 900;
  /* height: 15rem;
  display: flex;
  justify-content: center;
  align-items: center; */
}

#why .buttons .item > p {
  opacity: 0.5;
  font-size: 1.5rem;
}

#why .buttons .item div {
  opacity: 0;
  height: 15rem;
  background-color: white;
  position: absolute;
  top: 0;
  width: 100%;
  border-radius: 3rem;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: opacity 0.5s ease;
}

#why .buttons .item div img {
  width: 10rem;
  object-fit: contain;
  /* object-fit: 사이즈 전체 조정*/
  height: 6rem;
}

#why .buttons .item:nth-child(2n) {
  background-color: pink;
}

#why .buttons .item div p {
  font-size: 1.2rem;
  margin: 1.5rem;
}

#why .buttons .item div:hover {
  opacity: 1;
}

3. 클론 후 화면

3일차 개발을 진행하면서 점점 html과 css 사용법에 익숙해지는 것 같다. 아직, 미세한 조정과 이미지 배치를 자유자재로 하지 못하기 때문에 클론 개발 전에 어떤 식으로 틀을 잡고 틀 안에서 속성을 부여하고 개발할 지에 대해 생각해 보아야겠다.

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;
}