카카오뱅크 모작

# 카카오뱅크 모작 # 카카오뱅크 모작 시작 - [카카오뱅크](https://kakaobank.com/) ## 시작코드 - [시작 코드](https://codepen.io/sangwon7242/pen/abrqbBe?editors=1100) ## 1강, 탑바 레이아웃 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/oNRENBj) - [CODEPEN](https://codepen.io/sangwon7242/pen/oNRENBj?editors=1100) - [영상 - 24 06 18, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 1강, 탑바 레이아웃 구현](https://youtu.be/5FIuELcKKcs) ## 2강, 로고 구현 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/WNBMNpz) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNBMNpz?editors=1100) - [영상 - 24 06 18, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 2강, 로고 구현 구현](https://youtu.be/VEKBU-USAnI) ## 3강, 1차 메뉴 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/RwmQwgK) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwmQwgK?editors=1100) - [영상 - 24 06 18, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 3강, 1차 메뉴 구현](https://youtu.be/sGDE5w5n-OU) ## 4강, '관련사이트' 버튼 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/abrqbEb) - [CODEPEN](https://codepen.io/sangwon7242/pen/abrqbEb?editors=1100) - [영상 - 24 06 18, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 4강, '관련사이트' 버튼 구현](https://youtu.be/g4Kjriw5ITU) ## 5강, '관련사이트' 드롭다운 메뉴 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/PovQoXQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/PovQoXQ?editors=1100) - [영상 - 24 06 18, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 5강, '관련사이트' 드롭다운 메뉴 구현](https://youtu.be/_Eewg-U1e4c) ## 6강, '관련사이트' 드롭다운 메뉴에 대해서 후작업 - [CODEPEN - 예시](https://cdpn.io/pen/debug/rNgJNXa) - [CODEPEN](https://codepen.io/sangwon7242/pen/rNgJNXa?editors=1100) - [영상 - 24 06 18, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 6강, '관련사이트' 드롭다운 메뉴에 대해서 후작업](https://youtu.be/SazL14iR3ho) ## 7강, 드롭다운 메뉴 버튼에 클릭 이벤트 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/rNgJNXa) - [CODEPEN](https://codepen.io/sangwon7242/pen/rNgJNXa?editors=0010) - [영상 - 24 06 18, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 7강, 드롭다운 메뉴 버튼에 클릭 이벤트 구현](https://youtu.be/qqD4C3OuRBw) ### 제이쿼리를 이용하여 클릭 이벤트 구현 #### 어려우신 분은 해당 코드를 복붙만 하시면 되고, 대략 의미만 이해하시면 됩니다. ```js console.clear(); // $('') : 검색 // .click : 선택된 대상에게 클릭이벤트 부여 // function() {} : 함수 실행 $('.drop-down-menu__btn').click(function() { let $this = $(this); // 클릭 당한 대상(.drop-down-menu__btn) let has = $(this).hasClass('active'); // hasClass : active 붙어 있는지 여부 확인(있으면 true, 없으면 false) // closest(조상검색) : 클릭 당한 대상의 조상을 검색 let dropDownMenuBox = $this.closest('.drop-down-menu-box'); // 조건문의 결과가 true냐 또는 false 이냐에 따라서 // active 를 붙이고, active 제거한다. // addClass : active를 추가 // removeClass : active를 제거 if(has) { $this.removeClass('active'); dropDownMenuBox.find(' > .drop-down-menu').removeClass('active'); } else { $this.addClass('active'); dropDownMenuBox.find(' > .drop-down-menu').addClass('active'); } }); ``` ## 8강, 드롭다운 메뉴에 css 애니메이션 추가, 글로벌 아이콘 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/zYQRPag) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYQRPag) - [영상 - 24 06 19, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 8강, 드롭다운 메뉴에 css 애니메이션 추가, 글로벌 아이콘 구현](https://youtu.be/o_BObEZJle8) ## 9강, 탑바 메가메뉴 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/zYQRpOG) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYQRpOG) - [영상 - 24 06 19, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 9강, 탑바 메가메뉴 구현](https://youtu.be/q6orbTkcI6M) ```html ul.flex.h-full>li*4>a[href="#"]{1차메뉴아이템$}+div.con-min-width>div.con.mx-auto>ul.flex>li*6.flex-1>a[href="#"]{2차메뉴아이템$}+ul>li*9>a[href="#"]{3차메뉴아이템$} ``` ## 10강, 메가메뉴 세부 디자인 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/ZENrvab) - [CODEPEN](https://codepen.io/sangwon7242/pen/ZENrvab?editors=1010) - [영상 - 24 06 19, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 10강, 메가메뉴 세부 디자인 구현](https://youtu.be/-gAugQBm4Iw) ## 11강, 상단 배너박스, 이미지 배치 및 배경색 적용 - [CODEPEN - 예시](https://cdpn.io/pen/debug/ExzQBZM) - [CODEPEN](https://codepen.io/sangwon7242/pen/ExzQBZM?editors=1100) - [영상 - 24 06 20, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 11강, 상단 배너박스, 이미지 배치 및 배경색 적용](https://youtu.be/EUKr-v9GbWQ) ## 12강, 상단 배너박스에 컨텐츠 제목, 내용 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/OJYQexm) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJYQexm?editors=1100) - [영상 - 24 06 20, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 12강, 상단 배너박스에 컨텐츠 제목, 내용 구현](https://youtu.be/tIWTPbTGKFg) ## 13강, 상단 배너박스, 스토어 링크 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/RwmQzJo) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwmQzJo?editors=1100) - [영상 - 24 06 20, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 13강, 상단 배너박스, 스토어 링크 구현](https://youtu.be/xaQiXbj743Q) ## 14강, 배너박스 1~5, 레이아웃 잡기 - [CODEPEN - 예시](https://cdpn.io/pen/debug/gOJvNNG) - [CODEPEN](https://codepen.io/sangwon7242/pen/gOJvNNG?editors=1100) - [영상 - 24 06 20, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 14강, 배너박스 1~5, 레이아웃 잡기](https://youtu.be/68JQyd1_R-Y) ## 15강, 배너박스 1 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/xxNYvbZ) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxNYvbZ?editors=0100) - [영상 - 24 06 20, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 15강, 배너박스 1 구현](https://youtu.be/7f_I-shiB3Y) ## 16강, 배너박스 2 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/jOozwEw) - [CODEPEN](https://codepen.io/sangwon7242/pen/jOozwEw?editors=0100) - [영상 - 24 06 21, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 16강, 배너박스 2 구현](https://youtu.be/fYM5hSNhVEU) ## 17강, 배너박스 3 ~ 5 구현 - [CODEPEN - 예시](https://cdpn.io/pen/debug/pomLwyd) - [CODEPEN](https://codepen.io/sangwon7242/pen/pomLwyd?editors=1100) - [영상 - 24 06 21, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 17강, 배너박스 3 ~ 5 구현 구현](https://youtu.be/6C-8IG5Le-8) ## 18강, 배너박스 세부 디자인 조정 - [CODEPEN - 예시](https://cdpn.io/pen/debug/pomLwyd) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYQWzRb?editors=0100) - [영상 - 24 06 21, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 18강, 배너박스 세부 디자인 조정](https://youtu.be/r1_6xb8n8Lw) ## 19강, 발견되면 활성화 되는 라이브러리 연습 - [CODEPEN - 라이브러리 코드](https://codepen.io/sangwon7242/pen/qBLZjye) - [CODEPEN - 예시](https://cdpn.io/pen/debug/OJYvgaj) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJYvgaj) - [영상 - 24 06 21, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 19강, 발견되면 활성화 되는 라이브러리 연습](https://youtu.be/-fXvlu9veF0) ## 20강, 발견되면 활성화 되는 라이브러리 연습 2 - [CODEPEN - 예시](https://cdpn.io/pen/debug/eYaMRxX) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYaMRxX?editors=1100) - [영상 - 24 06 21, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 20강, 발견되면 활성화 되는 라이브러리 연습 2](https://youtu.be/JOJFqlauIuA) ## 21강, 발견되면 활성화 되는 라이브러리 적용 - [CODEPEN - 예시](https://cdpn.io/pen/debug/LYomgbz) - [CODEPEN](https://codepen.io/sangwon7242/pen/LYomgbz) - [영상 - 24 06 24, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 21강, 발견되면 활성화 되는 라이브러리 적용](https://youtu.be/AI0W4A5EbWk) ## 22강, 발견되면 활성화 되는 라이브러리 적용 2, 활성화 횟수조절 - [CODEPEN - 예시](https://cdpn.io/pen/debug/yLWjRve) - [CODEPEN](https://codepen.io/sangwon7242/pen/yLWjRve?editors=1010) - [영상 - 24 06 24, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 22강, 발견되면 활성화 되는 라이브러리 적용 2, 활성화 횟수조절](https://youtu.be/mk3pWL35RQg) ## 23강, 발견되면 활성화 되는 라이브러리 적용 3, 애니메이션 속도감조절 - [CSS 트랜지션 애니메이션 베이지 함수 테스터](https://cubic-bezier.com/) - [CODEPEN - 예시](https://cdpn.io/pen/debug/abrGRGy) - [CODEPEN](https://codepen.io/sangwon7242/pen/abrGRGy?editors=0100) - [영상 - 24 06 24, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기, 23강, 발견되면 활성화 되는 라이브러리 적용 3, 애니메이션 속도감조절](https://youtu.be/3HtGjEwuBmE) ## 24강, 대출박스, 밤이 되는 애니메이션 - [CODEPEN - 예시](https://cdpn.io/pen/debug/QWRrZZb) - [CODEPEN](https://codepen.io/sangwon7242/pen/QWRrZZb?editors=1100) - [영상 - 24 06 24, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 24강, 대출박스, 밤이 되는 애니메이션](https://youtu.be/UqsNWXW_R5g) ## 25강, 대출박스, 밤이 되는 애니메이션 2 - [CODEPEN - 예시](https://cdpn.io/pen/debug/VwOxVLg) - [CODEPEN](https://codepen.io/sangwon7242/pen/VwOxVLg?editors=1100) - [영상 - 24 06 24, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 25강, 대출박스, 밤이 되는 애니메이션 2](https://youtu.be/VTWV1TktXrw) ## 26강, 대출박스, 해와 달 만들기 - [CODEPEN - 예시](https://cdpn.io/pen/debug/eYarQJG) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYarQJG) - [영상 - 24 06 24, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 26강, 대출박스, 해와 달 만들기](https://youtu.be/XFFjAteFTPM) ## 27강, 밤에서 낮이 될때 달 관련 버그수정 - [CODEPEN - 예시](https://cdpn.io/pen/debug/eYarQJG) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYarQJG?editors=1100) - [영상 - 24 06 24, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 27강, active 대상 수정, 밤에서 낮이 될 때 달 관련 버그수정](https://youtu.be/pFBC0d9dHgA) ## 28강, 대출박스, 별 만들기, 기존 소스코드 가져오기 - [CODEPEN - 예시](https://cdpn.io/pen/debug/MWdXmxe) - [CODEPEN](https://codepen.io/sangwon7242/pen/MWdXmxe?editors=0100) - [영상 - 24 06 25, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 28강, 대출박스, 별 만들기, 기존 소스코드 가져오기](https://youtu.be/zSJDdBvm0kQ) ## 29강, 대출박스, 별 만들기, 기존 소스코드 분석하기 - [CODEPEN - 예시](https://cdpn.io/pen/debug/mdYKmNv) - [CODEPEN - 카뱅 코드 변형](https://codepen.io/sangwon7242/pen/LYoryad?editors=0100) - [CODEPEN](https://codepen.io/sangwon7242/pen/mdYKmNv?editors=1100) - [영상 - 24 06 25, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 29강, 대출박스, 별 만들기, 기존 소스코드 분석하기](https://youtu.be/xNl_ASPW-QY) ## 30강, 대출박스, 별 만들기, 별 적용하기 - [CODEPEN - 예시](https://cdpn.io/pen/debug/eYbzEYQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYbzEYQ?editors=0100) - [영상 - 24 06 25, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 30강, 대출박스, 별 만들기, 별 적용하기](https://youtu.be/-kV9YA9wjOM) ## 31강, 대출박스, 텍스트 넣기 - [CODEPEN - 예시](https://cdpn.io/pen/debug/jOoKwPq) - [CODEPEN](https://codepen.io/sangwon7242/pen/jOoKwPq?editors=1100) - [영상 - 24 06 25, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 31강, 대출박스, 텍스트 넣기](https://youtu.be/M1Ycx80_yMI) ## 32강, 체크카드박스, 상단 텍스트 내용 넣기 - [CODEPEN - 예시](https://cdpn.io/pen/debug/KKLeqvW) - [CODEPEN](https://codepen.io/sangwon7242/pen/KKLeqvW?editors=0100) - [영상 - 24 06 25, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 32강, 체크카드박스, 상단 텍스트 내용 넣기](https://youtu.be/60tyk2QX45g) ## 33강, 체크카드박스, 체크카드박스, 슬라이더 레이아웃 - [CODEPEN - 예시](https://cdpn.io/pen/debug/yLWEXpo) - [CODEPEN](https://codepen.io/sangwon7242/pen/yLWEXpo?editors=1100) - [영상 - 24 06 25, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 33강, 체크카드박스, 슬라이더 레이아웃](https://youtu.be/ZoGc8LtxACs) ## 34강, 체크카드박스, 스와이퍼로 연습, 레이아웃 - [CODEPEN - 예시](https://cdpn.io/pen/debug/wvbYqza) - [CODEPEN](https://codepen.io/sangwon7242/pen/wvbYqza) - [영상 - 24 06 26, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 34강, 체크카드박스, 스와이퍼로 연습, 레이아웃](https://youtu.be/FI3Ic3qL9Ek) ```html ``` ## 35강, 체크카드박스, 스와이퍼로 연습, 좌우버튼 꾸미기 - [CODEPEN - 예시](https://cdpn.io/pen/debug/pomxWOq) - [CODEPEN](https://codepen.io/sangwon7242/pen/pomxWOq?editors=1100) - [영상 - 24 06 26, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 35강, 체크카드박스, 스와이퍼 연습, 좌우버튼 꾸미기](https://youtu.be/FL0UV3v0tqE) ## 36강, 체크카드박스, 스와이퍼로 연습, 가운데를 기점으로 이미지 좌우로 좁히기 - [CODEPEN - 예시](https://cdpn.io/pen/debug/BaeqYBp) - [CODEPEN](https://codepen.io/sangwon7242/pen/BaeqYBp?editors=0100) - [영상 - 24 06 26, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 35강, 체크카드박스, 스와이퍼 연습, 가운데를 기점으로 이미지 좌우로 좁히기](https://youtu.be/802WqYvFLu4) ## 37강, 체크카드박스, 스와이퍼 적용 - [CODEPEN - 예시](https://cdpn.io/pen/debug/wvbZyoZ) - [CODEPEN](https://codepen.io/sangwon7242/pen/wvbZyoZ?editors=1100) - [영상 - 24 06 27, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 37강, 체크카드박스, 스와이퍼 적용](https://youtu.be/Vf5RikIJNUo) ## 38강, IT 기술 박스, 상단 텍스트 작업 - [CODEPEN - 예시](https://cdpn.io/pen/debug/mdYgXrj) - [CODEPEN](https://codepen.io/sangwon7242/pen/mdYgXrj?editors=1100) - [영상 - 24 06 27, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 38강, IT 기술 박스, 상단 텍스트 작업](https://youtu.be/JXlFGRHIkdQ) ## 39강, IT 기술 박스, 하단 이미지, 텍스트 작업 - [CODEPEN - 예시](https://cdpn.io/pen/debug/oNROEoq) - [CODEPEN](https://codepen.io/sangwon7242/pen/oNROEoq?editors=1100) - [영상 - 24 06 27, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 39강, IT 기술 박스, IT 기술 박스, 하단 이미지, 텍스트 작업](https://youtu.be/5UumWyzxZYU) ## 40강, 하단바 구현, 상단텍스트 작업 - [CODEPEN - 예시](https://cdpn.io/pen/debug/XWwQZQe) - [CODEPEN](https://codepen.io/sangwon7242/pen/XWwQZQe?editors=1100) - [영상 - 24 06 27, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 40강, IT 기술 박스, 하단바 구현, 상단텍스트 작업](https://youtu.be/pW1vC9Gr0C4) ## 41강, 하단바 구현, 하단텍스트 작업, 아이콘 배치 - [CODEPEN - 예시](https://cdpn.io/pen/debug/RwmOzWm) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwmOzWm?editors=1100) - [영상 - 24 06 28, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 41강, IT 기술 박스, 하단바 구현, 하단텍스트 작업, 아이콘 배치](https://youtu.be/O0PH4m3xO8k) ## 42강, 카카오뱅크 모작, 탑바부터 하단바까지 완성된 부분 일단 합치기 - [CODEPEN - 예시](https://cdpn.io/pen/debug/PovgreN) - [CODEPEN](https://codepen.io/sangwon7242/pen/PovgreN?editors=0100) - [영상 - 24 06 28, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 42강, 카카오뱅크 모작, 탑바부터 하단바까지 완성된 부분 일단 합치기](https://youtu.be/xus9toh7WeI) ## 43강, 카카오뱅크 모작, 합친 디자인 세부 수정 - [CODEPEN - 예시](https://cdpn.io/pen/debug/OJYGeEX) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJYGeEX?editors=1100) - [영상 - 24 06 28, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 43강, 카카오뱅크 모작, 합친 디자인 세부 수정](https://youtu.be/TtgFbf3yyqo) ## 44강, Visual Studio Code 설치 - [영상 - 24 06 28, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 44강, 카카오뱅크 모작, Visual Studio Code](https://youtu.be/hRV8kXmvtsA) ![설치](https://ifh.cc/g/v2p168.jpg) ## 45강, Visual Studio Code 기본 세팅, 폴더 세팅 - [영상 - 24 06 28, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 45강, 카카오뱅크 모작, Visual Studio Code 기본 세팅, 폴더 세팅](https://youtu.be/h90Cn8Tm9uA) ### 기본세팅 ``` # 기본세팅(파일 - 기본 설정 - 설정) 1. Font Size는 본인이 원하는 크기로 2. Tab Size, 2로 변경 3. Mouse 검색 후, Mouse Wheel Zoom 체크(마우스 휠로 폰트 사이즈 조절 가능) # 확장 프로그램 1. 확장 플러그인에서 한국어 플러그인 설치 및 반영 2. Mateiral Theme 설치, 테마 변경 3. Mateiral Icon 설치, 아이콘 모양 변경 4. Live Server 설치, 기본 브라우저 chrome 으로 변경 # 폴더 및 파일 세팅 1. index.html 파일 생성 2. style 폴더 생성 후, style.css 파일 생성 3. script 폴더 생성 후, script.js 파일 생성 4. 라이브 서버 열어서 연결 테스트 ``` ### 연결 기본 구조 ```html 카카오뱅크 모작

``` ## 46강, 카카오뱅크 모작, 코드펜에서 작업한 내용 vsc에 옮겨담기 - [영상 - 24 07 01, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 46강, 카카오뱅크 모작, 코드펜에서 작업한 내용 vsc에 옮겨담기](https://youtu.be/X1QPDtlihCI) ## 47강, 카카오뱅크 모작, images dowloader 이용해서 이미지 다운 받고 이미지를 로컬이미지로 변경 - [Image Downloader](https://chromewebstore.google.com/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj) - [CODEPEN](https://codepen.io/sangwon7242/pen/wvbLRyd) - [영상 - 24 07 01, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 47강, images dowloader 이용해서 이미지 다운 받고 이미지를 로컬이미지로 변경](https://youtu.be/TKJPFMdnEvU) ## 48강, 카카오뱅크 모작, 누락된 이미지 반영 - [누락된 이미지1](https://kakaobank.com/static/images/web/svg_line_outlink.svg) - [누락된 이미지2](https://kakaobank.com/static/images/web/svg_line_arrow_down.svg) - [영상 - 24 07 01, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 48강, 카카오뱅크 모작, 누락된 이미지 반영](https://youtu.be/a6BbdrTh2aI) ## 49강, 카카오뱅크 모작, github pages에 박제하기 - [강사 리포지터리](https://github.com/SangWon7242/kabang0701) - [강사 카카오뱅크 모작 깃허브 페이지스](https://sangwon7242.github.io/kabang0701/) - [영상 - 24 07 01, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 49강, 카카오뱅크 모작, github pages에 박제하기](https://youtu.be/xPl4u30gVnY) ![리포지터리 생성](https://ifh.cc/g/xdg8nn.jpg) 1. [https://github.com/new](https://github.com/new) 2. 리포지터리 생성 --- ![깃허브박제](https://ifh.cc/g/vdSj09.jpg) 1. 생성된 리포지터리 선택 2. settings 클릭 -> Pages 선택 3. Branch를 master 또는 main 선택 4. 우측에 파일 경로 `/docs` 선택 # 깃허브 페이지스 업로드 방법 ### 순서1 ![업로드방법1](https://ifh.cc/g/AC4qjT.jpg) ### 순서2 ![업로드방법2](https://ifh.cc/g/BANyw7.jpg) ### 순서3 ![업로드방법3](https://ifh.cc/g/l0aNHL.jpg) ### 순서4 ![업로드방법4](https://ifh.cc/g/FkLGxg.jpg) ## 50강, 카카오뱅크 모작, github에 박제한 코드 수정하기 - [강사 리포지터리](https://github.com/SangWon7242/kabang0701) - [강사 카카오뱅크 모작 깃허브 페이지스](https://sangwon7242.github.io/kabang0701/) - [영상 - 24 07 01, slog 13512, HTML, CSS 강좌, 카카오뱅크 모작하기 50강, 카카오뱅크 모작, github에 박제한 코드 수정하기](https://youtu.be/bWHcWjpxuZY)

카카오뱅크 모작(오전반)