$$config title: 카카오뱅크 모작 keywords: - IT - 카카오뱅크 모작 $$ # 수업 - 주소 : [https://slog.gg/p/7720](https://slog.gg/p/7720) - 부분모작예시 : [https://slog.gg/p/7732](https://slog.gg/p/7732) # 관련링크 - [카카오뱅크 : https://www.kakaobank.com/](https://www.kakaobank.com/) # 관련내용 - [테일윈드 공식문서](https://tailwindcss.com/) - [테일윈드 치트시트](https://nerdcave.com/tailwind-cheat-sheet) ```html ``` - [눈누 - 한글 웹폰트](https://noonnu.cc/) # 강의 # 목표 ### 카카오 뱅크, 탑바, 메뉴바 구현 - [x] [폰트, 테일윈드 불러오기](https://codepen.io/sangwon7242/pen/GRxRKEz) - [x] [탑바, 로고](https://codepen.io/sangwon7242/pen/gOeOYxy?editors=1100) - [X] [탑바, 우측메뉴 구현](https://codepen.io/sangwon7242/pen/LYdYPBB?editors=1100) - [x] [탑바, 메뉴 밑줄 추가](https://codepen.io/sangwon7242/pen/jOzOOOB?editors=1100) - [X] [탑바, 메뉴 밑줄 애니메이션 추가](https://codepen.io/sangwon7242/pen/xxWxxGy?editors=1100) - [X] [탑바, 재구현](https://codepen.io/sangwon7242/pen/jOzOzRZ?editors=1100) # 1강 - [CODEPEN](https://codepen.io/sangwon7242/pen/gOeOYxy?editors=1100) - [영상 - 22 06 28, ken 7720, 카카오뱅크 모작, 1강, 위키 만들고 사용하기](https://youtu.be/4dK5h3xToFk) #### 팁 #### 테일윈드로, border-bottom 만 넣는 방법 ```html

``` # 2강 - [CODEPEN](https://codepen.io/sangwon7242/pen/LYdYPBB?editors=1100) - [영상 - 22 06 28, ken 7720, 카카오뱅크 모작, 2강, 탑바, 로고, 우측메뉴 구현](https://youtu.be/JEkQjAmb-Nc) # 3강 - [CODEPEN](https://codepen.io/sangwon7242/pen/jOzOOOB?editors=1100) - [영상 - 22 06 28, ken 7720, 카카오뱅크 모작, 3강, 탑바, 세부 디자인](https://youtu.be/RimW7ZE7My8) # 4강 - [CODEPEN](https://codepen.io/sangwon7242/pen/xxWxxGy?editors=1100) - [영상 - 22 06 28, ken 7720, 카카오뱅크 모작, 4강, 탑바, 밑줄 애니메이션 추가](https://youtu.be/kHBQcxcPAJU) # 5강 - [영상 - 22 06 29, ken 7720, 카카오뱅크 모작, 5강, 탑바, 재구현](https://youtu.be/1KlZOzaIM_k) # 목표 ### 카카오 뱅크, 탑바, 2차 메뉴 구현 - [X] [탑바, 2차 메뉴 레이아웃](https://codepen.io/sangwon7242/pen/OJvJZPg?editors=1100) - [X] [탑바, 2차 메뉴 아이템](https://codepen.io/sangwon7242/pen/QWmWrMV?editors=1100) - [X] [탑바, 2, 3차 메뉴 완성](https://codepen.io/sangwon7242/pen/wvmvjQE?editors=1100) # 6강 - [CODEPEN](https://codepen.io/sangwon7242/pen/OJvJZPg?editors=1100) - [영상 - 22 06 29, ken 7720, 카카오뱅크 모작, 6강, 탑바, 2차 메뉴 레이아웃](https://youtu.be/G6Q-9M-obdA) # 7강 - [CODEPEN](https://codepen.io/sangwon7242/pen/QWmWrMV?editors=1100) - [영상 - 22 06 29, ken 7720, 카카오뱅크 모작, 7강, 탑바, 2차 메뉴 아이템](https://youtu.be/NGRD_wKpb2I) # 8강 - [CODEPEN](https://codepen.io/sangwon7242/pen/wvmvjQE?editors=1100) - [영상 - 22 06 29, ken 7720, 카카오뱅크 모작, 8강, 탑바, 2, 3차 메뉴 완성](https://youtu.be/LEu8KT1xipI) ## 목표 ### 카카오 뱅크, 상단 배너박스 1 구현 - [X] [상단 배너박스 1, 1차 시도, 실패](https://codepen.io/sangwon7242/pen/QWmwNOL?editors=1100) - [X] [상단 배너박스 1, 실험 1차](https://codepen.io/sangwon7242/pen/VwXYaBd) - [X] [상단 배너박스 1, 실험 2차](https://codepen.io/sangwon7242/pen/BaryKGg) - [X] [상단 배너박스 1, content 배치](https://codepen.io/sangwon7242/pen/qBoEZGY?editors=1010) - [X] [상단 배너박스 1, 스프라이트 이미지 실험](https://codepen.io/sangwon7242/pen/rNdaLxG?editors=1100) - [X] [상단 배너박스 1, 스프라이트 이미지 적용](https://codepen.io/sangwon7242/pen/YzaPWwB) - [X] [상단 배너박스 1, 완성 후 탑바와 합침](https://codepen.io/sangwon7242/pen/mdxyEEZ?editors=1100) # 9강 - [CODEPEN](https://codepen.io/sangwon7242/pen/QWmwNOL?editors=1100) - [영상 - 22 06 30, ken 7720, 카카오뱅크 모작, 9강, 상단 배너, 1차 시도, 실패](https://youtu.be/5wpCF5oxtrM) # 10강 - [CODEPEN, 실험 1](https://codepen.io/sangwon7242/pen/VwXYaBd) - [CODEPEN, 실험 2](https://codepen.io/sangwon7242/pen/BaryKGg) - [영상 - 22 06 30, ken 7720, 카카오뱅크 모작, 10강, 상단 배너, 실험 1차](https://youtu.be/4hCO3siznu8) - [영상 - 22 06 30, ken 7720, 카카오뱅크 모작, 10강, 상단 배너, 실험 2차](https://youtu.be/w9zi0W5lI6U) # 11강 - [CODEPEN](https://codepen.io/sangwon7242/pen/qBoEZGY?editors=1010) - [영상 - 22 06 30, ken 7720, 카카오뱅크 모작, 11강, 상단 배너, content 배치](https://youtu.be/Q4ayICaq1lw) # 12강 - [CODEPEN](https://codepen.io/sangwon7242/pen/rNdaLxG?editors=1100) - [영상 - 22 06 30, ken 7720, 카카오뱅크 모작, 12강, 상단 배너, 스프라이트 이미지 실험](https://youtu.be/SX-_xan4vi4) # 13강 - [CODEPEN](https://codepen.io/sangwon7242/pen/YzaPWwB) - [영상 - 22 06 30, ken 7720, 카카오뱅크 모작, 13강, 상단 배너, 스프라이트 이미지 적용](https://youtu.be/GUm7tBLcWfs) # 14강 - [CODEPEN](https://codepen.io/sangwon7242/pen/mdxyEEZ?editors=1100) - [영상 - 22 06 30, ken 7720, 카카오뱅크 모작, 14강, 상단 배너, 완성 후 탑바와 합침](https://youtu.be/3TzwsuYu34o) ## 목표 ### 카카오 뱅크, 상단 배너박스 2 ~ 6 구현 - [X] [상단 배너박스 2 ~ 6, 전체 레이아웃 잡기](https://codepen.io/sangwon7242/pen/GRxgwNb) - [X] [상단 배너박스 2, 레이아웃 잡기](https://codepen.io/sangwon7242/pen/RwMNqVm?editors=1100) - [X] [상단 배너박스 3, 레이아웃 잡기](https://codepen.io/sangwon7242/pen/wvmBQpM?editors=1100) - [X] [상단 배너박스 4 ~ 6, 레이아웃 잡기](https://codepen.io/sangwon7242/pen/vYREQzo?editors=0100) # 15강 - [CODEPEN](https://codepen.io/sangwon7242/pen/GRxgwNb) - [영상 - 22 07 01, ken 7720, 카카오뱅크 모작, 15강, 상단 배너박스 2 ~ 6, 전체 레이아웃 잡기](https://youtu.be/IbWwWJhLU1c) # 16강 - [CODEPEN](https://codepen.io/sangwon7242/pen/RwMNqVm?editors=1100) - [영상 - 22 07 01, ken 7720, 카카오뱅크 모작, 16강, 상단 배너박스 2, 레이아웃 잡기](https://youtu.be/-a0You9F9jc) # 17강 - [CODEPEN](https://codepen.io/sangwon7242/pen/wvmBQpM?editors=1100) - [영상 - 22 07 01, ken 7720, 카카오뱅크 모작, 17강, 상단 배너박스 3, 레이아웃 잡기](https://youtu.be/bigZ_mGBy2I) - [영상 - 22 07 01, ken 7720, 카카오뱅크 모작, 17강, 상단 배너박스 3, 레이아웃 잡기, 누락 된 이미지 추가](https://youtu.be/oWH6ygB5SWg) # 18강 - [CODEPEN](https://codepen.io/sangwon7242/pen/vYREQzo?editors=0100) - [영상 - 22 07 01, ken 7720, 카카오뱅크 모작, 18강, 상단 배너박스 4 ~ 6, 레이아웃 잡기](https://youtu.be/v12qjPaDuCA) # 목표 ### 카카오 뱅크, 상단 배너박스 2 ~ 6 구현 2 - [X] [상단 배너박스 2 ~ 6, 세부디자인](https://codepen.io/sangwon7242/pen/ExEjqjp?editors=0100) - [X] [상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리 연습](https://codepen.io/sangwon7242/pen/eYMNqzr) - [X] [상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리 연습 2](https://codepen.io/sangwon7242/pen/KKopOvZ?editors=1010) - [X] [상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용](https://codepen.io/sangwon7242/pen/MWVwNPq) - [X] [상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용 2, 활성화 횟수조절](https://codepen.io/sangwon7242/pen/xxWGvYe) - [X] [상단 배너박스2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용 3, 애니메이션 속도감조절](https://codepen.io/sangwon7242/pen/PoRPOXM) # 19강 - [CODEPEN](https://codepen.io/sangwon7242/pen/ExEjqjp?editors=0100) - [영상 - 22 07 04, ken 7720, 카카오뱅크 모작, 19강, 상단 배너박스 2 ~ 6, 세부 디자인](https://youtu.be/EhNhIs5rx6g) # 20강 - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/eYMNqzr?editors=1010) - [CODEPEN - 결과 미리보기](https://cdpn.io/pen/debug/dymoxXB) - [CODEPEN - 결과](https://codepen.io/sangwon7242/pen/dymoxXB) - [영상 - 22 07 04, ken 7720, 카카오뱅크 모작, 20강, 상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리 연습](https://youtu.be/TeCwzYpEDgQ) ```html ``` # 21강 - [CODEPEN](https://codepen.io/sangwon7242/pen/KKopOvZ?editors=1010) - [영상 - 22 07 04, ken 7720, 카카오뱅크 모작, 21강, 상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리 연습2](https://youtu.be/gRP5ejzWwA0) # 22강 - [CODEPEN](https://codepen.io/sangwon7242/pen/MWVwNPq) - [영상 - 22 07 04, ken 7720, 카카오뱅크 모작, 22강, 상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용](https://youtu.be/VP3ipeOT87g) # 23강 - [CODEPEN](https://codepen.io/sangwon7242/pen/xxWGvYe) - [영상 - 22 07 04, ken 7720, 카카오뱅크 모작, 23강, 상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용 2, 활성화 횟수조절](https://youtu.be/3Ar94iWGEHA) # 24강 - [CODEPEN](https://codepen.io/sangwon7242/pen/PoRPOXM) - [CSS 트랜지션 애니메이션 베이지 함수 테스터](https://cubic-bezier.com/) - [영상 - 22 07 05, ken 7720, 카카오뱅크 모작, 24강, 상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용 3, 애니메이션 속도감조절](https://youtu.be/zjuSz96Svjg) # 목표 ### 대출박스 - [X] [대출박스, 밤이 되는 애니메이션](https://codepen.io/sangwon7242/pen/gOeaXEV) - [X] [대출박스, 밤이 되는 애니메이션 2](https://codepen.io/sangwon7242/pen/rNdOYXY) - [X] [대출박스, 해와 달 만들기](https://codepen.io/sangwon7242/pen/eYMpyYe) - [X] [대출박스, 별 만들기, 기존 소스 코드 가져오기](https://codepen.io/sangwon7242/pen/JjLYMpz?editors=0100) - [X] [대출박스, 별 만들기, 기존 소스 코드 분석하기](https://codepen.io/sangwon7242/pen/PoRPERz) - [X] [대출박스, 별 만들기, 별 적용하기](https://codepen.io/sangwon7242/pen/KKodZeZ) - [X] [대출박스, 밤에서 낮이 될 때 달 관련 버그 수정](https://codepen.io/sangwon7242/pen/oNqbgrv?editors=0110) - [X] [대출박스, 텍스트 내용 넣기](https://codepen.io/sangwon7242/pen/MWVKYNB?editors=0100) # 25강 - [CODEPEN](https://codepen.io/sangwon7242/pen/gOeaXEV) - [영상 - 22 07 05, ken 7720, 카카오뱅크 모작, 25강, 대출박스, 밤이 되는 애니메이션](https://youtu.be/BrM7-OndNLg) # 26강 - [CODEPEN](https://codepen.io/sangwon7242/pen/rNdOYXY) - [영상 - 22 07 05, ken 7720, 카카오뱅크 모작, 26강, 대출박스, 밤이 되는 애니메이션 2](https://youtu.be/fJpfZlDwkHw) # 27강 - [CODEPEN](https://codepen.io/sangwon7242/pen/eYMpyYe) - [영상 - 22 07 05, ken 7720, 카카오뱅크 모작, 27강, 대출박스, 해와 달 만들기](https://youtu.be/yG_5-wHCreY) # 28강 - [CODEPEN](https://codepen.io/sangwon7242/pen/JjLYMpz?editors=0100) - [영상 - 22 07 05, ken 7720, 카카오뱅크 모작, 28강, 대출박스, 별 만들기, 기존 소스 가져오기](https://youtu.be/XmJAYQmXX0M) # 29강 - [CODEPEN-카뱅코드](https://codepen.io/sangwon7242/pen/JjLYMpz?editors=1100) - [CODEPEN-강사코드](https://codepen.io/sangwon7242/pen/OJvypWN) - [영상 - 22 07 05, ken 7720, 카카오뱅크 모작, 29강, 대출박스, 별 만들기, 기존 소스 분석하기](https://youtu.be/csKhk0bk724) # 30강 - [CODEPEN](https://codepen.io/sangwon7242/pen/KKodZeZ) - [영상 - 22 07 05, ken 7720, 카카오뱅크 모작, 30강, 대출박스, 별 적용하기](https://youtu.be/UjL0aEaoENk) # 31강 - [CODEPEN](https://codepen.io/sangwon7242/pen/oNqbgrv?editors=0110) - [영상 - 22 07 06, ken 7720, 카카오뱅크 모작, 31강, 대출박스, 밤에서 낮이 될때 달 관련 버그수정](https://youtu.be/yS6hhpyqbrU) # 32강 - [CODEPEN](https://codepen.io/sangwon7242/pen/MWVKYNB?editors=0100) - [영상 - 22 07 06, ken 7720, 카카오뱅크 모작, 31강, 대출박스, 대출박스, 텍스트 내용 넣기](https://youtu.be/eY6TWujK3MM) # 목표 ### 체크카드박스 - [X] [체크카드박스, 상단 텍스트 내용](https://codepen.io/sangwon7242/pen/yLKeNXQ) - [X] [체크카드박스, 슬라이더 레이아웃](https://codepen.io/sangwon7242/pen/JjLGdpY) - [X] [체크카드박스, 슬릭 슬라이더 연습, 레이아웃](https://codepen.io/sangwon7242/pen/RwMrPYZ) - [X] [체크카드박스, 슬릭 슬라이더 연습, 좌우버튼 꾸미기](https://codepen.io/sangwon7242/pen/KKoVBzL?editors=1010) - [X] [체크카드박스, 슬릭 슬라이더 적용](https://codepen.io/sangwon7242/pen/abYdjWB) # 33강 - [CODEPEN](https://codepen.io/sangwon7242/pen/yLKeNXQ) - [영상 - 22 07 06, ken 7720, 카카오뱅크 모작, 33강, 체크카드박스, 상단 텍스트 내용](https://youtu.be/i5ncrXLKx1M) # 34강 - [CODEPEN](https://codepen.io/sangwon7242/pen/JjLGdpY) - [영상 - 22 07 06, ken 7720, 카카오뱅크 모작, 34강, 체크카드박스, 슬라이더 레이아웃](https://youtu.be/EmteqnNaPfo) # 35강 - [CODEPEN](https://codepen.io/sangwon7242/pen/RwMrPYZ) - [영상 - 22 07 06, ken 7720, 카카오뱅크 모작, 35강, 체크카드박스, 슬릭 슬라이더로 연습, 레이아웃](https://youtu.be/vJBbr_bL2Bg) ```html ``` # 36강 - [CODEPEN](https://codepen.io/sangwon7242/pen/KKoVBzL?editors=1010) - [영상 - 22 07 07, ken 7720, 카카오뱅크 모작, 36강, 체크카드박스, 슬릭 슬라이더로 연습, 좌우버튼 꾸미기](https://youtu.be/nSFEYXvE6ng) # 37강 - [CODEPEN](https://codepen.io/sangwon7242/pen/abYdjWB) - [영상 - 22 07 07, ken 7720, 카카오뱅크 모작, 37강, 체크카드박스, 슬라이더 적용](https://youtu.be/0c2absQrC30) # 목표 ### IT 기술 박스 - [X] [IT 기술 박스](https://codepen.io/sangwon7242/pen/WNzwGyG?editors=1100) # 38강 - [CODEPEN](https://codepen.io/sangwon7242/pen/WNzwGyG?editors=1100) - [영상 - 22 07 07, ken 7720, 카카오뱅크 모작, 38강, IT기술박스, 구현](https://youtu.be/k-AHm7ZPoWk) # 목표 ### 하단바 - [X] [하단 박스, 레이아웃, box-2까지 구현](https://codepen.io/sangwon7242/pen/dymGjLK?editors=1100) - [X] [하단 박스, 레이아웃, box-3까지 구현](https://codepen.io/sangwon7242/pen/jOzqMyq?editors=1100) # 39강 - [CODEPEN](https://codepen.io/sangwon7242/pen/dymGjLK?editors=1100) - [영상 - 22 07 08, ken 7720, 카카오뱅크 모작, 39강, 하단바, 레이아웃, box-2까지 구현](https://youtu.be/Lb5u7AzYhlU) # 40강 - [CODEPEN](https://codepen.io/sangwon7242/pen/jOzqMyq?editors=1100) - [영상 - 22 07 08, ken 7720, 카카오뱅크 모작, 40강, 하단바, 레이아웃, box-3까지 구현](https://youtu.be/_wtovibmKoQ) # 목표 ### 병합 - [X] [병합, 일단 합치기](https://codepen.io/sangwon7242/pen/NWYNRYN) - [X] [병합, 세부 디자인 수정](https://codepen.io/sangwon7242/pen/gOerwjO) # 41강 - [CODEPEN](https://codepen.io/sangwon7242/pen/NWYNRYN) - [영상 - 22 07 08, ken 7720, 카카오뱅크 모작, 41강, 병합, 일단 합치기](https://youtu.be/IFZfgso3QQA) # 42강 - [CODEPEN](https://codepen.io/sangwon7242/pen/gOerwjO) - [영상 - 22 07 08, ken 7720, 카카오뱅크 모작, 42강,세부 디자인 수정](https://youtu.be/OWTFu-3YiiM) # 43강 - [CODEPEN](https://codepen.io/sangwon7242/pen/VwXjWRM?editors=0110) - [영상 - 22 07 11, ken 7720, 카카오뱅크 모작, 43강, 로컬작업환경으로 옮기기 1](https://youtu.be/S3hD1SjjQd8) - [영상 - 22 07 11, ken 7720, 카카오뱅크 모작, 43강, 로컬작업환경으로 옮기기 2](https://youtu.be/b6xTc2Yz80E) ```html ``` # 44강 - [GIT](https://github.com/SangWon7242/kakao_07_11) - [완료](https://sangwon7242.github.io/kakao_07_11/) - [영상 - 22 07 11, ken 7720, 카카오뱅크 모작, 44강, 깃허브에 배포](https://youtu.be/jX0hhFnz_tA) # 45강 - [영상 - 22 07 11, ken 7720, 카카오뱅크 모작, 45강, 로컬 환경에서 소스 코드 수정 후 깃허브에 올리는 방법(기초)](https://youtu.be/A193g9rxF2Q) # 46강 - [영상 - 22 07 11, ken 7720, 카카오뱅크 모작, 46강, github pages 로 포폴 관리하기](https://youtu.be/nvIWJzIIvE0)

게시글 상세