BlockChain

1. 비트코인 vs 이더리움

• 비트코인 2009년 사토시 나카모토로 알려진 익명의 개인 혹은 그룹에 의해 출시된 최초(x)의 암호화폐.
• 가장 널리 사용되면 최근엔 ETF에 승인되어 여러 기관들이 보유중.

합의 알고리즘

비트코인

• 비트코인은 Proof Of Work(POW), 작업 증명방식을 사용. 채굴자가 네트워크에서 새로운 블록을 생성하기 위해 수학적 문제를 해결하는 과정을 통해 채굴이 이루어짐. 이 과정을 통해 신뢰할 수 있는 블록체인이 유지

이더리움

• 초기에 POW를 사용했지만, 그래픽 카드 채굴, 발열로 인한 환경문제 발생, 2021년 POS 방식인 비콘체인 출시를 했고, POW 와 POS 를 모두 운영하다 2022년 9월 15일 두 체인이 하나로 통합 되는 더머지 이후에 POS 로 운영 32개의 이더리움을 묶어 예치하면 이를 바탕으로 지분을 증명하는 방식.

[Ethereum] 이더리움 1.0(Eth1), 이더리움 2.0(Eth2) 용어 폐지

블록체인 기능

비트코인

• 비트코인은 개인간 전자화폐시스템으로 주요한 목적은 안전하고 투명한 거래. (분산원장)

이더리움

• 이더리움은 블록체인 위에 스마트 계약이라고 불리는 프로그램을 실행시키는 일종의 플랫폼. 이더리움은 그 플랫폼에서 사용되는 네이티브 코인, 이 플랫폼에서 개발자들은 DAPP 들을 개발할 수 있음.

내부적인 로직

비트코인

• 비트코인은 트랜잭션의 처리와 관련한 단순한 스크립트 언어를 사용. 이는 기본적인 트랜잭션 유형에 대한 몇 가지 제한적인 스크립트를 실행할 수 있는 기능을 제공.

→ 최근에는 스택스, 루트스탁, 오디널스, runes 등 다양한 방식으로 비트코인 위에서 컨트랙트 및 비문 등의 여러 도전을 하고 있고, 비트코인 layer2, layer3 도 연구가 많이 되고 있음.

이더리움

• 이더리움은 트랜잭션을 처리하기 위해 튜링완전한 스마트 계약 언어를 사용. 이더리움 스마트 계약은 거의 모든 계산을 수행할 수 있고, 더 복잡한 조건과 로직을 적용할 수 있음.

2. Smart Contract ?

스마트 컨트랙트 : 스마트 컨트랙트는 계약이나 계약에 필요한 작업을 자동하나는 자체 실행 프로그램. 완료되면 거래를 추적할 수 있고, 되돌릴 수 없다.

스마트 컨트랙트의 특징

• 스마트 컨트랙트는 코드로 작성 되어 있고, 지정된 조건이 충족되면 자동으로 실행. 중앙기관, 법률 시스템 또는 외부 집행 메커니즘 없이 다른 익명의 당사자 간에 신뢰할 수 있는 거래 및 합의가 수행
• 신뢰성 : 블록체인 위에 배포된 스마트 계약은 변경이 불가능한 코드로 작성, 따라서 계약을 신뢰가능. → 블록체인의 연속성(시퀀스) 때문, 블록과 체인의 사슬 구조로 블록 이전 값의 해시값을 포함하고
• 일련의 과정이 진행되 과정 : 단순한 컴퓨팅 연산 opcode 어셈블러랑 설명 하면 좋을듯.

스마트 컨트랙트 역사

• 비트코인이 나오기 10년전에 1998년 ‘비트 골드’ 라는 가상화폐를 발명한 미국의 닉자보(닉사보)에 의해 제안됨.
• 스마트 컨트랙트의 계약조건을 실행하는 컴퓨터화된 거래 프로토콜로 정의

3. 합의 알고리즘

합의 알고리즘은 분산 네트워크 상에서 서로 신뢰관계가 없는 노드들이 특정하게 정의된 절차를 통해 수학적으로 계산된 결과값을 상호 검증함으로써 시스템의 무결성을 보장하는 알고리즘.

→ 블록체인 네트워크에서 새로운 블록이 생성되고 추가되는 과정을 관리하고 결정하는 방법을 정의. 즉, mining 방식을 정의한다 라고 생각하면 쉬움.

롱기스트 체인의 시빌어택을 보완하기 위한 것이 proof of work 다.

Proof of Work(POW : 작업 증명)

비트코인의 합의 알고리즘으로 가장 잘 알려진 합의 방식

채굴자들은 네트워크에서 새로운 블록을 찾기 위해 수학적 문제를 해결 해야함. 이를 통해 새로운 블록을 추가하고 보상을 받음.(마이닝과 인센티브)

Proof Of Stake(POS : 지분 증명)

POS는 채굴자가 자신이 소유한 암호화폐를 걸고 새로운 블록을 생성할 권한을 얻는 방식. 보증된 채굴자는 자신이 소유한 암호화폐를 스테이킹하고, 네트워크에서 새로운 블록을 찾을 때 확률론적 선택. (스테이킹) Istanbul Byzantine Fault Tolerance(IBFT : 이스탄불 비잔틴 장군 허용)

이스탄불 비잔틴 허용은 이기종(다른 유형의) 노드 간에 신뢰할 수 있는 합의를 달성하는데 중점을 둠.

노드들 간의 통신이 불안정하거나 악의적인 행동을 하는 노드가 존재할 때, 전체 시스템이 여전히 일관된 상태를 유지할 수 있는지에 대한 문제. IBFT는 이런 상황에서도 합의를 도출하고 블록체인의 일관성을 유지하는데 사용.

POH : (Proof Of History : 역사 증명)

솔라나에서 사용되는 합의 메커니즘. 솔라나의 높은 처리량과 낮은 거래비용을 제공하는 핵심 기술.

POH는 블록체인에서 시간을 정의하고 기록하는 방식으로 동작. POA : (Proof Of Authority : 권위 증명)

POA는 프라이빗 or 퍼미션 블록체인에서 사용. POA에서는 네트워크 참가자들 중에 일부가 신뢰할 수 있는 ‘권한’이 있는 노드로 지정되며, 이러한 노드들이 블록을 검증하고 새로운 블록을 생성하는 권한을 갖음.

→ 노드들이 신뢰할 수 있는 기관 혹은 회사로 이루어져 합의시간이 짧고 안정성과 신뢰성이 높음.

→ 하지만, 프라이빗 블록체인을 기반으로 하기 때문에 비교적 중앙화 되었다고 볼 수 있음.

4. Gas & Fee

• Gas : Gas는 이더리움 네트워크에서 실행되는 연산(ex: 계산, 저장, 메모리 액세스 등)이 소비하는 비용. 이더리움 가상머신(Ethereum Virtual Machine, EVM) 에서 각 연산에는 고유한 비용(opcode)이 할당되어 있으며, 이를 통해 네트워크 리소스가 효율적으로 사용. 높은 연산 복잡도를 가진 스마트 계약 또는 트랜잭션은 더 많은 가스를 소비하게 됨.
• 가스는 이더리움 네트워크의 트랜잭션 처리 과정에 사용되며, 각 트랜잭션은 소모된 가스의 양에 따라 수수료 지불. 단위는 Gwei
• Fee : Fee는 사용자가 이더리움 네트워크에서 트랜잭션을 실행할 때 지불해야 하는 비용을 의미. 이더리움 트랜잭션은 가스비를 결정하게 되고, 가스비는 가스 가격과 소비된 가스양을 곱한 값.

가스비 = 가스 한도(Gas used) x 가스 가격(Gas Price)

• OPCODE : 가스는 트랜잭션이나 스마트 컨트랙트를 실행하는 데 필요한 작업량을 측정, 해당 작업량에 따라 지불해야 할 수수료를 결정하는 단위. 이때 OPCODE는 EVM 명령어에 할당되는 연산 비용에 의해 결정. (어셈블러와 비슷..)

5. 블록체인 트릴레마

블록체인 트릴레마 : 블록체인이 가지는 3가지 딜레마를 표현, 비탈릭 부테린이 제시

확장성

• 모듈러
• 모듈러 블록체인 개요 - HackMD
• 모놀리틱 블록체인
  • 기존에는 모놀로틱 블록체인(한개의 계층에서 실행과 합의 모두 수행)
  • 간단하게 이해하면 기존에 웹은 js html css 로 작업했지만, react를 사용하면 컴포넌트 단위로 쪼개서 탈부착 하는 형태로 사용. 이와 비슷하게 모듈 형태로 각각의 독립적인 작업을 수행한다고 생각.
• 블록체인 레이어 개념 :

블록체인 레이어 용어 정리

• Layer2 :
  • 기존 이더리움의 경우 속도 및 확장성의 문제가 있었음. 이를 해결하기 위해 이더리움의 레이어가 아닌 다른 레이어를 올려 이를 해결하기 위함.
  • layer2는 이더리움 온체인이 아닌 오프체인에서 검증을 진행하고 이더리움의 레이어로 말아 올리는 일종의 롤업
  • 대표적으로 옵티미스틱(op) 와 영지식(zk) 가 있음.
  • 옵티미스틱의 경우 사기증명과 영지식의 영지식 증명으로 증명을 함.

탈중앙화 (Decentralization)

• 블록체인은 분산된 네트워크로 구성되어 있음. 중아 집중화된 제어 없이 많은 참여자가 네트워크를 운영하고 보안을 유지할 수 있음.

보안성(Security)

• 블록체인 시스템은 악의적인 공격에 보안을 유지해야함. 이는 합의 알고리즘에 의해 보장되고, 블록체인의 안정성과 신뢰성을 보장.

6. 블록체인 블록의 구조

트랜잭션이란?

• 블록체인 트랜잭션은 블록체인 네트워크에서 수행되는 작업 또는 거래를 나타냄. 디지털 화폐를 전송하거나 스마트컨트랙트를 실행하는 등의 활동을 포함. 블록체인에서 트랜잭션은 네트워크의 분산된 노드들에 의해 검증되고 기록되며, 블록체인의 특정 블록에 포함됨

7. 코인 vs 토큰

코인

• 독립적인 블록체인 네트워크에서 발행되는 암호화폐
• 자체적인 블록체인을 보유하며, 해당 블록체인에서 네이티브 통화로 사용

토큰

• 토큰은 다른 블록체인 위에 구축되어 발행된 자산
• 아래서 나올 ERC20 과 ERC721 같은 표준들을 사용하여 스마트 계약을 통해 발생, 주로 프로젝트의 토큰 세일이나 플랫폼에서 사용
• 메인넷(자체 블록체인의 유무라고 이해하면 쉬움)

8. Erc20 vs Erc721

EIP : 이더리움 개선 제안, 오픈소스로 이더리움 개선사항을 올리고 이를 여러 작업을 통해 실제 이더리움 네트워크에 반영 대표적으로 최근에 진행한 eip 4844 가 있음.

• Erc20 (Ethereum Request for Comment 20): 이더리움 네트워크의 개선안을 제안하는 EIPs 에서 관리하는 공식 프로토콜, 이더리움의 토큰 표준 스펙, 이더리움과 호환성이 있는 모든 요구 사항을 충족시키는 표준은 ERC-20으로 간주됨.
• Erc721 (Ethereum Request for Comment 20) : 이더리움 스마트 컨트랙트를 기반으로 하여 고유한 식별자를 가진 토큰, ‘NFT(Non-Fungible Token) : 대체 불가능한 토큰’. ERC-721 표준은 토큰을 생성, 소유, 전송 및 거래할 수 있는 방법을 정의.

9. 노드, JSON-RPC, Third-party provider (Infura, Alchemy)

Node

노드는 블록체인 네트워크의 구성원으로 검증, 블록생성, 네트워크 유지등의 역할.

Full Node 풀 노드

• 풀 노드는 블록체인 네트워크의 전체 복사본을 가지고 있고, 모든 블록과 트랜잭션을 저장하고 유지. 이들은 네트워크에서 블록을 검증하고 새로운 블록을 생성할 때 필요한 데이터를 제공함.

Lightweight Node 라이트 노드

• 라이트 노드는 전체 블록체인의 복사본을 유지하지 않고, 블록 해시와 트랜잭션에 대한 일부 정보만을 저장. 주로 블록체인에 대한 정보를 쿼리하거나 트랜잭션 검증 시 사용.

JSON-RPC

JSON-RPC(Javascript Object Notation-Remote Procedure Call) : 원격 프로시저 호출을 위한 프로토콜 중 하나. 클라이언트가 서버에게 json 형식의 데이터를 사용하여 원격으로 프로시저를 호출할 수 있게 해줌.

1. http 혹은 다른 프로토콜을 통해 json 형식으로 통신. 가벼운 프로토콜로 간편하게 이용가능.
2. 플랫폼 독립적으로 여러 프로그래밍언어와 플랫폼에서 사용가능.
3. 원격호출 : 클라이언트는 서버에게 원격으로 프로시저를 호출 가능. 클라이언트는 서버의 함수나 메서드를 실행하고 결과를 받아올 수 있음.

Third-party provider

1. Infura
   • Infura 는 노드 공급자이며 Infura 자체에서 관리하는 노드를 통해 이더리움 블록체인에 ‘플러그인’ 할 수 있게 도와줌. 이런 프로바이더를 이용해서 개발자는 비용과 시간 절약하고 작업량을 줄여줌.
2. Alchemy
   • 블록체인 개발자들이 탈중앙화 애플리케이션을 더 쉽게 구축하고 관리할 수 있도록 도와주는 플랫폼. 알케미는 블록체인 네트워크와 상호작용하고 스마트 계약을 배포하고 실행할 수 있는 도구와 서비스를 제공.

→ QA) 근데 블록체인은 제 삼자 없는 p2p 방식 아닌가요?

→ 블록체인의 노드 혹은 인프라를 사용하기 위해선 자원과 기술적 능력들이 많이 들기 때문에 좀 더 개발에 집중하기 위하여 서드파티 프로바이더를 사용함. ex) 예시로 web2 에서 구글 0auth, 혹은 카카오로그인 등을 사용하여 login 프로바이더를 사용하는 것으로 생각해도 좋을듯.

10. 웹 아키텍쳐 vs 블록체인 아키텍쳐

• 웹 아키텍쳐

• 블록체인 아키텍쳐10. 웹 아키텍쳐 vs 블록체인 아키텍쳐
  • 웹 아키텍쳐

  

  

  
  
  • 블록체인 아키텍쳐
    

    

11. 블록체인 산업 구조

• Develop
  • Dapp(NFT, TOKEN, DEFI, DEX, AI)
  • Core(Layer, Infra, bridge, multichain)
  • CEX(거래소, STO거래소, 증권 거래소)
  • 암호학자, 수학자, 경제학자
  Fellowship of Ethereum Magicians
• Minning
  • ASIC, 아이스리버, 기타 채굴 장비
  • GPU (3090)
  • 대규모 채굴 광부로 이루어진 컴퓨팅 파워 혹은 채굴 비즈니스를 하는 마이너들.
• research
  • Blockchain researcher
  • 블록체인 기자
  • community manager, business developer
  • discord moderator, telegram, youtube, blog
•  블록체인 산업 구조에 대표적인 세가지로 보여지는데, dApp 혹은 core를 개발하는 개발자 및 암호학, 경제학자들로 이루어져 있고, 컴퓨팅 자원 혹은 staking 을 대신 묶어주는 광부들과 research 와 마케터들로 이루어져 있고, 이 세가지가 모두 각자의 비즈니스를 하면서 생태계를 이루어 나감.

12. web1.0 → web2.0 → web3.0

Difference Between Web 1.0, Web 2.0, and Web 3.0 - GeeksforGeeks

증권의 역사

• 20세기 중순 ~ 21세기 초 : web1.0 시장 (증권 시장 )
• 2007년 ~ 현재 (스마트폰 보급 ) : web2.0시장 (증권 시장 부흥)
• 2009년(비트코인 등장) / 2016년~ 현재 : web3.0시장 (암호 화폐?)
• web4.0 은 멀까요?

1. UI 레이아웃 설계 

2. 로그인 UI - HOBIT 화면, Flex 적용

코인마켓캡에서 아직 중간의 슬라이드 애니메이션을 주는 아이템박스와 아래에 자바스크립트 코드를 이용해서 코인들의 데이터 객체들을 넣어주는 작업을 진행하지 않았다. 아직 공부할 부분이 많기 때문에 이 부분을 제외하고 현재 만들 수 있는 로그인 UI를 만들어 오늘 배운 정규표현식을 적용하는 코드를 작성하였다. 아직 정규 표현식을 적용하지는 않았지만, 기본적인 UI 구조와 이를 바탕으로 로그인 화면을 구현하는 것을 진행하였다. 

1. UI 레이아웃 설계 

빗썸에 있는 로그인 화면을 보고 대략의 레이아웃을 결정하였다. 박스들은 대부분 div로 감싸서 모든 요소들에게 flex를 이용하여 웹이 작아져도 반응형으로 줄 수 있는 웹 UI를 구현하였다.

2. 로그인 UI - HOBIT 화면, Flex 적용

실질적으로 웹의 사이즈를 줄이고 늘렸을 때 사이즈가 안정적으로 줄었다. 웹 UI의 로고는 포토샵을 통해 아발란체 글꼴을 이용하여 만들었고, 호날두를 생각하면서 호빗 로그인 창을 만들었다. 

이를 이용하여 코인마켓캡의 클론 화면과 연결을 시키려고 javascript의 버튼 이벤트를 이용하여 코인 마켓캡의 로그인 버튼 클릭 시 이동하는 웹을 구현하였다. 

const btn = document.querySelector(".login");

btn.addEventListener("click", clickHandler);

function clickHandler() {
  // ... 작업 로직 ...  //
  window.location.href = "./login.html";
}

자바 스크립트 코드를 이용하여 로그인 화면시 코인마켓캡에서 호빗으로 넘어가는 화면을 구현하였다. 이를 바탕으로 웹사이트의 서버없이 로컬 로그인 화면을 구현하였고, 추가적으로 코인마켓캡 클론과 가입하기 화면을 구현할 예정이다.

1. 코인마켓캡 사이트

2. 어제 구현한 코인마켓캡 

3. 현재 클론 중인 웹사이트 

 오늘 특별하게 한 것도 없는데 시간이 빨리 간 느낌이었다. 오전엔 scroll 애니메이션을 짜는 것을 구현하였고, 9기 블록체인 발표를 본 이후에 어제 하던 클론 코딩을 진행하였다. 진척 사항은 많이 없었지만,  로고들의 이미지와 반응형 웹으로 구현하기 위한 고민을 하였다. 또한 코인마켓캡 로고 옆 버튼들에 드롭바를 주기 위해 고민하였다. 드로바를 이미 해보아서 어떤 식으로 구현할지는 알고 있었지만, 초반에 a 태그를 이용하여 구조를 짜서 시간을 많이 날려 먹었다. 또한 막상 flex 안에서 드롭바 구현과 마진 및 패딩을 줘 적절한 위치에 배치하는 것이 까다로운 부분이 있었다. 이러한 부분을 고민하였고, 이를 바탕으로 드로바를 구현하였다. 하지만, 아직 맨 위 header 부분의 flex와 드롭바에서 위치를 넘어가면 드롭바 내용이 사라지는 에러들이 있어 이 부분을 수정하여야 한다. 또한 hr 태그를 전체 flex 내부에 주니 전체 부분을 차지하는 것이 아닌 다른 영역들과 마찬가지로 잘리는 부분이 생겼다. 이 오류에 대해 고민해 보아서 고쳐야겠다. 아이템 부분엔 적절히 자산들을 배치하고, 인기 커뮤니 계정엔 애니메이션을 이용하여 세 가지 내용이 자연스럽게 이동하는 애니메이션을 주어야겠다. 또한 최종 암호화폐 자산 출력 부분은 암호화폐들을 객체에 담아두고 반복문을 이용하여 append 하여 주었는데, 이를 append 하는 부분에 표(td, th)를 이용하여 추가하여 각각의 객체들에 대한 정보를 가져가는 방식을 선택해야 할 것 같다.

1. 코인마켓캡 사이트

2. 어제 구현한 코인마켓캡 

3. 현재 클론 중인 웹사이트 

1. 코인마켓캡 홈페이지

2. 예상 레이아웃 구성도

3. 현재 구현된 상태

 경일게임 아카데미에서 공부한 지 6주 차 벌써 자바스크립트까지 끝나고 한 달이란 시간이 뚝딱 지나갔다. 짧은 시간이었지만, 한 달 만에 html, css, javascript 까지 공부하였고, 기본적인 스킬들은 모두 공부하였다. 이를 바탕으로 요번 주에 시험을 본결과.. 자바스크립트에선 어느 정도 이해도가 있었지만, html, css 구조를 짜는 부분에 있어서 아쉬운 부분이 많았다. 이를 보충하기 위해 오늘은 공부한 것들을 바탕으로 웹을 구현하는 연습을 하였다.

1. 코인마켓캡 홈페이지

2. 예상 레이아웃 구성도

레이아웃을 아래와 같이 나누어 각각의 html 요소들과 배치들을 하였다. 

3. 현재 구현된 상태

기본적인 레이아웃을 바탕으로 큰 틀을 구현하였다. 전반적으로 flex를 이용하여 사이즈를 조절할 수 있게하였다. 

가상자산추가 부분은 for문으로 div 들을 추가였는데 실제 코인마켓캡에는 여러 요소들을 추가하여야 하기 때문에 th, td를 추가하여 사용하여 표 형식으로 데이터를 추가할 예정이다. 또한 가운데 아이템에는 애니메이션 이동을 추가하여 세 가지 화면을 애니메이션 화 하는 작업을 진행할 예정이다.

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. 클론 후 화면

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

오늘은 경일 게임 아카데미 홈페이지 클론코딩 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 사용법에 익숙해지는 것 같다. 아직, 미세한 조정과 이미지 배치를 자유자재로 하지 못하기 때문에 클론 개발 전에 어떤 식으로 틀을 잡고 틀 안에서 속성을 부여하고 개발할 지에 대해 생각해 보아야겠다.