BlockChain

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를 추가하여 사용하여 표 형식으로 데이터를 추가할 예정이다. 또한 가운데 아이템에는 애니메이션 이동을 추가하여 세 가지 화면을 애니메이션 화 하는 작업을 진행할 예정이다.