$$config title: 카카오뱅크 웹사이트 모작 keywords: - IT - 카카오뱅크 웹사이트 모작 $$ # 수업 - 주소 : [https://slog.gg/p/10713](https://slog.gg/p/10713) # 관련링크 - [카카오뱅크 : 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/WNJKWYP) - [x] [탑바, 메뉴 세부 디자인](https://codepen.io/sangwon7242/pen/NWMBmZJ) - [X] [탑바, 메뉴 밑줄 애니메이션 추가](https://codepen.io/sangwon7242/pen/BaxPeyv) # 강의 # 1강 - [CODEPEN](https://codepen.io/sangwon7242/pen/gOeOYxy?editors=1100) - [영상 - 22 10 06, ken 10713, 카카오뱅크 모작, 1강, 기본 세팅](https://youtu.be/USOvg_yHqVE) #### 팁 #### 테일윈드로, border-bottom 만 넣는 방법 ```html

``` # 2강 - [CODEPEN](https://codepen.io/sangwon7242/pen/LYdYPBB?editors=1100) - [영상 - 22 10 06, ken 10713, 카카오뱅크 모작, 2강, 탑바, 로고 구현](https://youtu.be/XnifqrvMHrQ) # 3강 - [CODEPEN](https://codepen.io/sangwon7242/pen/WNJKWYP) - [영상 - 22 10 06, ken 10713, 카카오뱅크 모작, 3강, 탑바, 메뉴 구현](https://youtu.be/q9lS5dQzCQo) # 4강 - [CODEPEN](https://codepen.io/sangwon7242/pen/NWMBmZJ) - [영상 - 22 10 06, ken 10713, 카카오뱅크 모작, 4강, 탑바, 세부 디자인](https://youtu.be/zdU_fY5Kwzg) # 5강 - [CODEPEN](https://codepen.io/sangwon7242/pen/BaxPeyv) - [영상 - 22 10 06, ken 10713, 카카오뱅크 모작, 5강, 탑바, 밑줄 애니메이션 추가](https://youtu.be/USHNr_o4d20) # 목표 ### 카카오 뱅크, 탑바, 2차 메뉴 구현 - [X] [탑바, 2차 메뉴 레이아웃](https://codepen.io/sangwon7242/pen/NWMBVRZ) - [X] [탑바, 2, 3차 메뉴 마크업 및 간단 구현](https://codepen.io/sangwon7242/pen/ExLpzWm?editors=1100) - [x] [탑바, 2, 3차 메뉴 완성](https://codepen.io/sangwon7242/pen/LYmJrpy?editors=0100) # 6강 - [CODEPEN](https://codepen.io/sangwon7242/pen/NWMBVRZ) - [영상 - 22 10 06, ken 10713, 카카오뱅크 모작, 6강, 탑바, 2차 메뉴 레이아웃](https://youtu.be/_vTKo3woh0M) # 7강 - [CODEPEN](https://codepen.io/sangwon7242/pen/ExLpzWm?editors=1100) - [영상 - 22 10 06, ken 10713, 카카오뱅크 모작, 7강, 탑바, 2, 3차 메뉴 마크업 및 간단 구현](https://youtu.be/HyhGtD3lwFI) # 8강 - [CODEPEN](https://codepen.io/sangwon7242/pen/LYmJrpy?editors=0100) - [영상 - 22 10 07, ken 10713, 카카오뱅크 모작, 8강, 탑바, 2, 3차 메뉴 완성](https://youtu.be/k3YLOxP0iNg) ## 목표 ### 카카오 뱅크, 상단 배너박스 1 구현 - [X] [상단 배너박스 1, 1차 시도, 실패](https://codepen.io/sangwon7242/pen/bGMxKYy?editors=1100) - [X] [상단 배너박스 1, 실험 1차](https://codepen.io/sangwon7242/pen/dyeqKee) - [X] [상단 배너박스 1, 실험 2차](https://codepen.io/sangwon7242/pen/LYmJrXd?editors=1100) - [X] [상단 배너박스 1, content 배치](https://codepen.io/sangwon7242/pen/eYrLjYR?editors=0100) - [X] [상단 배너박스 1, 스프라이트 이미지 실험](https://codepen.io/sangwon7242/pen/mdLGjyY) - [X] [상단 배너박스 1, 스프라이트 이미지 적용](https://codepen.io/sangwon7242/pen/abGajOY?editors=1100) # 9강 - [CODEPEN](https://codepen.io/sangwon7242/pen/bGMxKYy?editors=1100) - [영상 - 22 10 07, ken 10713, 카카오뱅크 모작, 9강, 상단 배너, 1차 시도, 실패](https://youtu.be/NvM3NCB8ZHU) # 10강 - [CODEPEN, 실험 1](https://codepen.io/sangwon7242/pen/dyeqKee) - [CODEPEN, 실험 2](https://codepen.io/sangwon7242/pen/LYmJrXd?editors=1100) - [영상 - 22 10 07, ken 10713, 카카오뱅크 모작, 10강, 상단 배너, 실험 1차](https://youtu.be/HSYtm4lhHUs) - [영상 - 22 10 07, ken 10713, 카카오뱅크 모작, 10강, 상단 배너, 실험 2차](https://youtu.be/tHVPYQeJS6s) # 11강 - [CODEPEN](https://codepen.io/sangwon7242/pen/eYrLjYR?editors=0100) - [영상 - 22 10 07, ken 10713, 카카오뱅크 모작, 11강, 상단 배너, content 배치](https://youtu.be/JdGhZjpjrz0) # 12강 - [CODEPEN](https://codepen.io/sangwon7242/pen/mdLGjyY) - [영상 - 22 10 07, ken 10713, 카카오뱅크 모작, 12강, 상단 배너, 스프라이트 이미지 실험](https://youtu.be/-ursWG3RsKo) # 13강 - [CODEPEN](https://codepen.io/sangwon7242/pen/abGajOY?editors=1100) - [영상 - 22 10 07, ken 10713, 카카오뱅크 모작, 13강, 상단 배너, 스프라이트 이미지 적용](https://youtu.be/whq-324p-Q8) ## 목표 ### 카카오 뱅크, 상단 배너박스 2 ~ 6 구현 - [x] [상단 배너박스 2 ~ 6, 전체 레이아웃 잡기](https://codepen.io/sangwon7242/pen/yLjQQge?editors=1100) - [x] [상단 배너박스 2, 레이아웃 잡기](https://codepen.io/sangwon7242/pen/qBYQQXx?editors=1100) - [x] [상단 배너박스 3, 레이아웃 잡기](https://codepen.io/sangwon7242/pen/JjveeVB?editors=1100) - [x] [상단 배너박스 4, 레이아웃 잡기](https://codepen.io/sangwon7242/pen/WNJYLvo?editors=0100) - [x] [상단 배너박스 5, 6, 레이아웃 잡기](https://codepen.io/sangwon7242/pen/wvjRqLe?editors=1100) - [x] [상단 배너박스 2 ~ 6, 세부 디자인](https://codepen.io/sangwon7242/pen/ExLGwYJ?editors=0100) # 14강 - [CODEPEN](https://codepen.io/sangwon7242/pen/yLjQQge?editors=1100) - [영상 - 22 10 11, ken 10713, 카카오뱅크 모작, 14강, 상단 배너박스 2 ~ 6, 전체 레이아웃 잡기](https://youtu.be/xBm8P2CcffI) # 15강 - [CODEPEN](https://codepen.io/sangwon7242/pen/qBYQQXx?editors=1100) - [영상 - 22 10 11, ken 10713, 카카오뱅크 모작, 15강, 상단 배너박스 2, 레이아웃 잡기](https://youtu.be/st5YdewcClA) # 16강 - [CODEPEN](https://codepen.io/sangwon7242/pen/JjveeVB?editors=1100) - [영상 - 22 10 11, ken 10713 카카오뱅크 모작, 16강, 상단 배너박스 3, 레이아웃 잡기](https://youtu.be/2THQvCF9LS4) # 17강 - [CODEPEN](https://codepen.io/sangwon7242/pen/WNJYLvo?editors=0100) - [영상 - 22 10 11, ken 10713, 카카오뱅크 모작, 17강, 상단 배너박스 4, 레이아웃 잡기](https://youtu.be/eJw0-gNzkPw) # 18강 - [CODEPEN](https://codepen.io/sangwon7242/pen/wvjRqLe?editors=1100) - [영상 - 22 10 12, ken 10713, 카카오뱅크 모작, 18강, 상단 배너박스 5, 6, 레이아웃 잡기](https://youtu.be/lq0qBjvbegs) # 19강 - [CODEPEN](https://codepen.io/sangwon7242/pen/ExLGwYJ?editors=0100) - [영상 - 22 10 12, ken 10713, 카카오뱅크 모작, 19강, 상단 배너박스 2 ~ 6, 세부디자인](https://youtu.be/dhJtpxixsuw) # 목표 ### 카카오 뱅크, 상단 배너박스 2 ~ 6 구현, 발견되면 활성화 되는 라이브러리 - [X] [상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리 연습](https://codepen.io/sangwon7242/pen/ExLGwyB) - [X] [상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리 연습 2](https://codepen.io/sangwon7242/pen/NWMeaaz?editors=1010) - [X] [상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용](https://codepen.io/sangwon7242/pen/LYmMzax) - [X] [상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용 2, 활성화 횟수조절](https://codepen.io/sangwon7242/pen/jOxXGdJ) - [X] [상단 배너박스2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용 3, 애니메이션 속도감조절](https://codepen.io/sangwon7242/pen/poVqWBm?editors=0110) # 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 10 12, ken 10713, 카카오뱅크 모작, 20강, 상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리 연습](https://youtu.be/BlcsItaDWDc) ```html ``` # 21강 - [CODEPEN](https://codepen.io/sangwon7242/pen/NWMeaaz?editors=1010) - [영상 - 22 10 12, ken 10713, 카카오뱅크 모작, 21강, 상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리 연습2](https://youtu.be/dyeeTcp31bY) # 22강 - [CODEPEN](https://codepen.io/sangwon7242/pen/LYmMzax) - [영상 - 22 10 12, ken 10713, 카카오뱅크 모작, 22강, 상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용](https://youtu.be/ZUTmmjMD0Yc) # 23강 - [CODEPEN](https://codepen.io/sangwon7242/pen/jOxXGdJ) - [영상 - 22 10 12, ken 10713, 카카오뱅크 모작, 23강, 상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용 2, 활성화 횟수조절](https://youtu.be/zaqThulqRyQ) # 24강 - [CODEPEN](https://codepen.io/sangwon7242/pen/poVqWBm?editors=0110) - [CSS 트랜지션 애니메이션 베이지 함수 테스터](https://cubic-bezier.com/) - [영상 - 22 10 12, ken 10713, 카카오뱅크 모작, 24강, 상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용 3, 애니메이션 속도감조절](https://youtu.be/oMzrs_G1824) # 목표 ### 대출박스 - [X] [대출박스, 밤이 되는 애니메이션](https://codepen.io/sangwon7242/pen/abGXOQO) - [X] [대출박스, 밤이 되는 애니메이션 2](https://codepen.io/sangwon7242/pen/wvjNabX) - [X] [대출박스, 해와 달 만들기](https://codepen.io/sangwon7242/pen/PoeVPYR?editors=1100) - [X] [대출박스, 별 만들기, 기존 소스 코드 가져오기](https://codepen.io/sangwon7242/pen/WNJPQOB?editors=1100) - [X] [대출박스, 별 만들기, 기존 소스 코드 분석하기](https://codepen.io/sangwon7242/pen/eYrxpVZ?editors=0110) - [X] [대출박스, 별 만들기, 별 적용하기](https://codepen.io/sangwon7242/pen/qBYgOKP?editors=0100) - [X] [대출박스, 밤에서 낮이 될 때 달 관련 버그 수정](https://codepen.io/sangwon7242/pen/QWrYjVW?editors=0100) - [X] [대출박스, 텍스트 내용 넣기](https://codepen.io/sangwon7242/pen/jOxdXMW?editors=1100) # 25강 - [CODEPEN](https://codepen.io/sangwon7242/pen/abGXOQO) - [영상 - 22 10 13, ken 10713, 카카오뱅크 모작, 25강, 대출박스, 밤이 되는 애니메이션](https://youtu.be/WVaAoDrPAJo) # 26강 - [CODEPEN](https://codepen.io/sangwon7242/pen/wvjNabX) - [영상 - 22 10 13, ken 10713, 카카오뱅크 모작, 26강, 대출박스, 밤이 되는 애니메이션 2](https://youtu.be/3R10fykS1Yc) # 27강 - [CODEPEN](https://codepen.io/sangwon7242/pen/PoeVPYR?editors=1100) - [영상 - 22 10 13, ken 10713, 카카오뱅크 모작, 27강, 대출박스, 해와 달 만들기](https://youtu.be/uD01uwH4TAw) # 28강 - [CODEPEN](https://codepen.io/sangwon7242/pen/JjLYMpz?editors=0100) - [영상 - 22 10 13, ken 10713, 카카오뱅크 모작, 28강, 대출박스, 별 만들기, 기존 소스 가져오기](https://youtu.be/Lpy1npoFgVA) # 29강 - [CODEPEN-카뱅코드](https://codepen.io/sangwon7242/pen/rNvPOpL?editors=0100) - [CODEPEN-강사코드](https://codepen.io/sangwon7242/pen/eYrxpVZ?editors=0110) - [영상 - 22 10 13, ken 10713, 카카오뱅크 모작, 29강, 대출박스, 별 만들기, 기존 소스 분석하기](https://youtu.be/hcVbfkf6cIk) # 30강 - [CODEPEN](https://codepen.io/sangwon7242/pen/qBYgOKP?editors=0100) - [영상 - 22 10 13, ken 10713, 카카오뱅크 모작, 30강, 대출박스, 별 적용하기](https://youtu.be/GaCldMQgvZ8) # 31강 - [CODEPEN](https://codepen.io/sangwon7242/pen/QWrYjVW?editors=0100) - [영상 - 22 10 13, ken 10713, 카카오뱅크 모작, 31강, 대출박스, 밤에서 낮이 될때 달 관련 버그수정](https://youtu.be/8XP7hr5Bnko) # 32강 - [CODEPEN](https://codepen.io/sangwon7242/pen/jOxdXMW?editors=1100) - [영상 - 22 10 14, ken 10713, 카카오뱅크 모작, 32강, 대출박스, 대출박스, 텍스트 내용 넣기](https://youtu.be/21wPJUk0nHQ) # 목표 ### 체크카드박스 - [X] [체크카드박스, 상단 텍스트 내용](https://codepen.io/sangwon7242/pen/GRxRKEz) - [X] [체크카드박스, 슬라이더 레이아웃](https://codepen.io/sangwon7242/pen/rNvPPNK?editors=0100) - [X] [체크카드박스, 슬릭 슬라이더 연습, 레이아웃](https://codepen.io/sangwon7242/pen/LYmvNwY?editors=0110) - [X] [체크카드박스, 슬릭 슬라이더 적용](https://codepen.io/sangwon7242/pen/VwxNjzm?editors=1100) # 33강 - [CODEPEN](https://codepen.io/sangwon7242/pen/GRxRKEz) - [영상 - 22 10 14, ken 10713, 카카오뱅크 모작, 33강, 체크카드박스, 상단 텍스트 내용](https://youtu.be/eGPM-dhbdnU) # 34강 - [CODEPEN](https://codepen.io/sangwon7242/pen/rNvPPNK?editors=0100) - [영상 - 22 10 14, ken 10713, 카카오뱅크 모작, 34강, 체크카드박스, 슬라이더 레이아웃](https://youtu.be/J9Q2YJxHpmw) # 35강 - [CODEPEN](https://codepen.io/sangwon7242/pen/LYmvNwY?editors=0110) - [영상 - 22 10 17, ken 10713, 카카오뱅크 모작, 35강, 체크카드박스, 슬릭 슬라이더로 연습, 레이아웃](https://youtu.be/Ctf1Xcku21Y) ```html ``` # 36강 - [CODEPEN](https://codepen.io/sangwon7242/pen/VwxNjzm?editors=1100) - [영상 - 22 10 17, ken 10713, 카카오뱅크 모작, 36강, 체크카드박스, 슬라이더 적용](https://youtu.be/fvOEVav7ge4) # 목표 ### IT 기술 박스 - [X] [IT 기술 박스](https://codepen.io/sangwon7242/pen/MWGReGM?editors=1100) # 37강 - [CODEPEN](https://codepen.io/sangwon7242/pen/MWGReGM?editors=1100) - [영상 - 22 10 17, ken 10713, 카카오뱅크 모작, 37강, IT기술박스, 구현](https://youtu.be/Ga1j88oQOoQ) # 목표 ### 하단바 - [X] [하단 박스, 레이아웃, box-2까지 구현](https://codepen.io/sangwon7242/pen/WNJKWYP) - [X] [하단 박스, 레이아웃, box-3까지 구현](https://codepen.io/sangwon7242/pen/wvjZbaB?editors=1100) # 38강 - [CODEPEN](https://codepen.io/sangwon7242/pen/WNJKWYP) - [영상 - 22 10 18, ken 10713, 카카오뱅크 모작, 38강, 하단바, 레이아웃, box-2까지 구현](https://youtu.be/toloC9BHVRc) # 39강 - [CODEPEN](https://codepen.io/sangwon7242/pen/wvjZbaB?editors=1100) - [영상 - 22 10 18, ken 10713, 카카오뱅크 모작, 39강, 하단바, 레이아웃, box-3까지 구현](https://youtu.be/83w51ESWbyY) # 목표 ### 병합 - [X] [병합, 일단 합치기](https://codepen.io/sangwon7242/pen/YzLMbMP) - [X] [병합, 세부 디자인 수정](https://codepen.io/sangwon7242/pen/xxjNjad?editors=0110) # 40강 - [CODEPEN](https://codepen.io/sangwon7242/pen/YzLMbMP) - [영상 - 22 10 18, ken 10713, 카카오뱅크 모작, 40강, 병합, 일단 합치기](https://youtu.be/Vz-w8UlmXiQ) # 41강 - [CODEPEN](https://codepen.io/sangwon7242/pen/xxjNjad?editors=0110) - [영상 - 22 10 19, ken 10713, 카카오뱅크 모작, 41강,세부 디자인 수정](https://youtu.be/66qDukE8SVw) # 42강 - [CODEPEN](https://codepen.io/sangwon7242/pen/NWMVzPW) - [영상 - 22 10 19, ken 10713, 카카오뱅크 모작, 42강, 로컬작업환경으로 옮기기, 1부](https://youtu.be/V1lZ3B4qZOw) - [영상 - 22 10 19, ken 10713, 카카오뱅크 모작, 42강, 로컬작업환경으로 옮기기, 2부](https://youtu.be/OyDFZToQ0eI) ```html ``` # 43강 - [GIT](https://github.com/SangWon7242/kakao_bank_2022_10_20) - [깃허브 페이지스에 업로드 완료](https://sangwon7242.github.io/kakao_bank_2022_10_20/) - [영상 - 22 10 20, ken 10713, 카카오뱅크 모작, 43강, 깃허브에 배포](https://youtu.be/mXiNMtqbv98) # 44강 - [영상 - 22 10 20, ken 10713, 카카오뱅크 모작, 44강, 로컬 환경에서 소스 코드 수정 후 깃허브에 올리는 방법(기초)](https://youtu.be/g9PiaULTIHo) # 45강 - [영상 - 22 10 20, ken 10713, 카카오뱅크 모작, 45강, github pages 로 포폴 관리하기](https://youtu.be/TTL6GoBEhaA)

게시글 상세