카카오뱅크 안녕

# 카카오뱅크 모작 # 카카오뱅크 모작 시작 - [카카오뱅크](https://kakaobank.com/) # 시작코드 - [시작코드](https://codepen.io/sangwon7242/pen/KwPPbBd?editors=1100) ## INTRO, 카카오뱅크 모작 준비 - [영상 - 24 11 26, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, INTRO, 카카오뱅크 모작준비](https://youtu.be/nHqdu9WdQyk) ## 1강, 탑바 레이아웃 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/gbYYZjq?editors=1100) - [결과 미리보기](https://cdpn.io/pen/debug/gbYYZjq) - [영상 - 24 11 26, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 1강, 탑바 레이아웃 구현](https://youtu.be/5aH5EWNmy_k) ## 2강, 탑바, 로고 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/NPKKeEW?editors=1100) - [결과 미리보기](https://cdpn.io/pen/debug/NPKKeEW) - [영상 - 24 11 26, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 2강, 탑바, 로고 구현](https://youtu.be/Dz3xHsDPVwU) ## 3강, 탑바, 1차 메뉴 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/vEBBvbQ?editors=1100) - [결과 미리보기](https://cdpn.io/pen/debug/vEBBvbQ) - [영상 - 24 11 26, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 3강, 탑바, 1차 메뉴 구현](https://youtu.be/F5dc3R_SVDE) ## 4강, 탑바, 메가 메뉴 레이아웃 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/ogvvJOy?editors=1100) - [결과 미리보기](https://cdpn.io/pen/debug/ogvvJOy) - [영상 - 24 11 26, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 4강, 탑바, 메가 메뉴 레이아웃 구현](https://youtu.be/d6RVJAsYgxc) ## 5강, 탑바, 2차, 3차 메뉴 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/KwPPJVN?editors=1100) - [결과 미리보기](https://cdpn.io/pen/debug/KwPPJVN) - [영상 - 24 11 26, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 5강, 탑바, 2차, 3차 메뉴 구현](https://youtu.be/V4m1HkRXSEM) ## 6강, 탑바, 2차, 3차 메뉴 텍스트에 outline icon 적용 - [CODEPEN - 클래스를 이용하지 않은 방법](https://codepen.io/sangwon7242/pen/YPKzVKJ?editors=0100) - [결과 미리보기](https://cdpn.io/pen/debug/YPKzVKJ) - [CODEPEN - 클래스를 이용한 아이콘 반영](https://codepen.io/sangwon7242/pen/raBNyPj?editors=0100) - [결과 미리보기](https://codepen.io/sangwon7242/pen/raBNyPj?editors=0100) - [영상 - 24 11 27, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 6강, 2차, 3차 메뉴 텍스트에 outline icon 적용, 클래스를 이용하지 않은 버전](https://youtu.be/IzRY8dz5c0k) - [영상 - 24 11 27, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 6강, 2차, 3차 메뉴 텍스트에 outline icon 적용, 클래스를 이용한 버전](https://youtu.be/IO1gtE27OMI) ## 7강, 탑바, '관련사이트' 버튼 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/emOYWvE?editors=1100) - [결과 미리보기](https://cdpn.io/pen/debug/emOYWvE) - [영상 - 24 11 27, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 7강, 탑바, '관련사이트' 버튼 구현](https://youtu.be/QZhSXMMKnUQ) ## 8강, 탑바, 드롭다운 메뉴 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/mybdmxb?editors=1100) - [결과 미리보기](https://cdpn.io/pen/debug/mybdmxb) - [영상 - 24 11 27, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 8강, 탑바, 드롭다운 메뉴 구현](https://youtu.be/Q9dlMqmK8cE) ## 9강, 탑바, 자바스크립트를 이용해 드롭다운 메뉴 토글 기능 추가 - [CODEPEN](https://codepen.io/sangwon7242/pen/bNbGWKe) - [결과 미리보기](https://cdpn.io/pen/debug/mybdmxb) - [영상 - 24 11 27, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 9강, 탑바, 자바스크립트를 이용해 드롭다운 메뉴 토글 기능 추가](https://youtu.be/yKr6aclEWpg) ## 10강, 탑바, 언어 변경 아이콘 적용 - [CODEPEN](https://codepen.io/sangwon7242/pen/qEWBwQX) - [결과 미리보기](https://cdpn.io/pen/debug/qEWBwQX) - [영상 - 24 11 28, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 10강, 탑바, 언어 변경 아이콘 적용](https://youtu.be/26zc8pmk-n0) ## 11강, 메인 배너에 배경 이미지, 배경색 반영 - [CODEPEN](https://codepen.io/sangwon7242/pen/mybdgvG?editors=1100) - [결과 미리보기](https://cdpn.io/pen/debug/mybdgvG) - [영상 - 24 11 28, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 11강, 메인 배너에 배경 이미지, 배경색 반영](https://youtu.be/342xl1U45Dk) ## 12강, 메인 배너에 title및 sub text 적용 - [CODEPEN](https://codepen.io/sangwon7242/pen/dPbyLBm?editors=1100) - [결과 미리보기](https://cdpn.io/pen/debug/dPbyLBm) - [영상 - 24 11 28, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 12강, 메인 배너에 title및 sub text 적용](https://youtu.be/4k7uWXgg5wc) ## 13강, 메인 배너에 스토어 링크 구현, 스프라이트 이미지 반영 - [CODEPEN](https://codepen.io/sangwon7242/pen/KwPKLaM?editors=1100) - [결과 미리보기](https://cdpn.io/pen/debug/KwPKLaM) - [영상 - 24 11 28, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 13강, 메인 배너에 스토어 링크 구현, 스프라이트 이미지 반영](https://youtu.be/TJQGLiuOuNw) ## 14강, 배너박스 1 ~ 5, 레이아웃 잡기 - [CODEPEN](https://codepen.io/sangwon7242/pen/WbeNBRQ?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/WbeNBRQ) - [영상 - 24 11 28, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 14강, 배너박스 1 ~ 5, 레이아웃 잡기](https://youtu.be/bKZtUf30h3U) ## 15강, 배너박스 1, 왼쪽 이미지 반영 - [CODEPEN](https://codepen.io/sangwon7242/pen/VYZwOyq?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/VYZwOyq) - [영상 - 24 11 28, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 15강, 배너박스 1, 왼쪽 이미지 반영](https://youtu.be/yzGy4Zd3mUo) ## 16강, 배너박스 1에 텍스트 적용, 구현 완료 - [CODEPEN](https://codepen.io/sangwon7242/pen/zxOxzvL?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/zxOxzvL) - [영상 - 24 11 29, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 16강, 배너박스 1에 텍스트 적용, 구현 완료](https://youtu.be/JjwN2x7yKx8) ## 17강, 배너박스 2 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/wBwBeeJ?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/wBwBeeJ) - [영상 - 24 11 29, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 17강, 배너박스 2 구현](https://youtu.be/80Vqkj2v_pk) ## 18강, 배너박스 3 ~ 5 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/qEWEjVz?editors=0100) - [결과미리보기](https://cdpn.io/pen/debug/qEWEjVz) - [영상 - 24 11 29, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 18강, 배너박스 3 ~ 5 구현](https://youtu.be/HXNWkdlVMSk) ## 19강, 배너박스 세부 조정 - [CODEPEN](https://codepen.io/sangwon7242/pen/emOmRxx?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/emOmRxx) - [영상 - 24 11 29, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 19강, 배너박스 세부 조정](https://youtu.be/Cd_muflQRU4) ## 20강, 발견되면 활성화 되는 라이브러리 연습 - [CODEPEN - 라이브러리 코드](https://codepen.io/sangwon7242/pen/qBLZjye) - [CODEPEN](https://codepen.io/sangwon7242/pen/PwYqJrM) - [결과미리보기](https://cdpn.io/pen/debug/PwYqJrM) - [영상 - 24 12 02, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 20강,발견되면 활성화 되는 라이브러리 연습](https://youtu.be/IgeW8h11C58) ## 21강, 발견되면 활성화 되는 라이브러리 연습 2 - [CODEPEN](https://codepen.io/sangwon7242/pen/ogvXogQ?editors=0110) - [결과미리보기](https://cdpn.io/pen/debug/ogvXogQ) - [영상 - 24 12 02, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 21강,발견되면 활성화 되는 라이브러리 연습 2](https://youtu.be/Jfv3EeP-A58) ## 22강, 배너박스에 발견되면 활성화 되는 라이브러리 적용 - [CODEPEN](https://codepen.io/sangwon7242/pen/PwYqONw?editors=1000) - [결과미리보기](https://cdpn.io/pen/debug/PwYqONw) - [영상 - 24 12 02, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 22강, 배너박스에 발견되면 활성화 되는 라이브러리 적용](https://youtu.be/SCa-DUxYKGg) ## 23강, 배너박스에 발견되면 활성화 되는 라이브러리 적용, 활성화 횟수조절 - [CODEPEN](https://codepen.io/sangwon7242/pen/MYgwOmO) - [결과미리보기](https://cdpn.io/pen/debug/MYgwOmO) - [영상 - 24 12 02, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 23강,배너박스에 발견되면 활성화 되는 라이브러리 적용, 활성화 횟수조절](https://youtu.be/A5_PW6qASII) ## 24강, 배너박스에 발견되면 활성화 되는 라이브러리 적용, 애니메이션 속도감 조절 - [CSS 트랜지션 애니메이션 베이지 함수 테스터](https://cubic-bezier.com/) - [CODEPEN](https://codepen.io/sangwon7242/pen/YPKXEVo?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/YPKXEVo) - [영상 - 24 12 02, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 24강, 배너박스에 발견되면 활성화 되는 라이브러리 적용, 애니메이션 속도감 조절](https://youtu.be/8wFgIn7c8Ac) ## 25강, 대출박스, 밤이 되는 애니메이션 - [CODEPEN](https://codepen.io/sangwon7242/pen/wBwaPrz?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/wBwaPrz) - [영상 - 24 12 02, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 25강, 대출박스, 밤이 되는 애니메이션](https://youtu.be/skhewpdn4p0) ## 26강, 대출박스, 밤이 되는 애니메이션 2 - [CODEPEN](https://codepen.io/sangwon7242/pen/bNbdYvg?editors=1010) - [결과미리보기](https://cdpn.io/pen/debug/bNbdYvg) - [영상 - 24 12 02, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 26강, 대출박스, 밤이 되는 애니메이션 2](https://youtu.be/-PLnE8M-5_g) ## 27강, 대출박스, 해와 달 만들기 - [CODEPEN](https://codepen.io/sangwon7242/pen/MYgwOGQ?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/MYgwOGQ) - [영상 - 24 12 02, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 27강, 대출박스, 해와 달 만들기](https://youtu.be/3YQYxqL2Qug) ## 28강, 밤에서 낮이 될때 달 관련 버그수정 - [CODEPEN](https://codepen.io/sangwon7242/pen/OPLyLaG/403763f8b658d30ae5c7be0d3d761b70??editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/OPLyLaG/403763f8b658d30ae5c7be0d3d761b70) - [영상 - 24 12 03, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 28강, 밤에서 낮이 될때 달 관련 버그수정](https://youtu.be/jWfmTvLdNrU) ## 29강, 대출박스, 별 만들기, 기존 소스코드 가져오기 - [CODEPEN](https://codepen.io/sangwon7242/pen/jENbNJb?editors=0100) - [결과미리보기](https://cdpn.io/pen/debug/jENbNJb) - [영상 - 24 12 03, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 29강, 대출박스, 별 만들기, 기존 소스코드 가져오기](https://youtu.be/VX4GHewbxm0) ## 30강, 대출박스, 별 만들기, 기존 소스코드 분석하기 - [CODEPEN](https://codepen.io/sangwon7242/pen/mybebYv?editors=0100) - [결과미리보기](https://cdpn.io/pen/debug/mybebYv) - [영상 - 24 12 03, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 30강, 대출박스, 별 만들기, 기존 소스코드 분석하기](https://youtu.be/JBrO4CuhXc4) ## 31강, 대출박스, 별 만들기, 별 적용하기 - [CODEPEN](https://codepen.io/sangwon7242/pen/bNbVGbN/f3be0b2c00ee609ba464ea66fff13e56?editors=0100) - [결과미리보기](https://cdpn.io/pen/debug/bNbVGbN/f3be0b2c00ee609ba464ea66fff13e56) - [영상 - 24 12 03, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 31강, 대출박스, 별 만들기, 별 적용하기](https://youtu.be/8lp4grBVYUs) ## 32강, 대출박스, 텍스트 내용 넣기 - [CODEPEN](https://codepen.io/sangwon7242/pen/pvzjoNe/c2c537e5be886df5f6b72d996ddef6d3?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/pvzjoNe/c2c537e5be886df5f6b72d996ddef6d3) - [영상 - 24 12 03, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 32강, 대출박스, 텍스트 내용 넣기](https://youtu.be/E3NY2a5jHyc) ## 33강, 체크카드박스, 상단 텍스트 내용 넣기 - [CODEPEN ](https://codepen.io/sangwon7242/pen/NPKGWyb?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/NPKGWyb) - [영상 - 24 12 03, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 33강, 체크카드박스, 상단 텍스트 내용 넣기](https://youtu.be/YELB-QJbmWI) ## 34강, 체크카드박스, 체크카드박스 슬라이드 레이아웃 - [CODEPEN ](https://codepen.io/sangwon7242/pen/azovYEK?editors=0100) - [결과미리보기](https://cdpn.io/pen/debug/azovYEK) - [영상 - 24 12 04, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 34강, 체크카드박스, 체크카드박스 슬라이드 레이아웃](https://youtu.be/e3hzrpTFlIE) ## 35강, 체크카드박스, 스와이퍼로 연습, 레이아웃 - [스와이퍼 공식문서](https://swiperjs.com/) - [CODEPEN](https://codepen.io/sangwon7242/pen/wBwKjwg) - [결과미리보기](https://cdpn.io/pen/debug/wBwKjwg) - [영상 - 24 12 04, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 35강, 체크카드박스, 스와이퍼로 연습, 레이아웃](https://youtu.be/PwRA1etR3Do) ```html ``` ## 36강, 체크카드박스, 스와이퍼로 연습, 좌우버튼 꾸미기 - [CODEPEN](https://codepen.io/sangwon7242/pen/bNbVMpR?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/bNbVMpR) - [영상 - 24 12 04, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 36강, 체크카드박스, 스와이퍼로 연습, 좌우버튼 꾸미기](https://youtu.be/7dAiLFkpZLM) ## 37강, 체크카드박스, 스와이퍼로 연습, 가운데를 기점으로 이미지 좌우로 좁히기 - [CODEPEN](https://codepen.io/sangwon7242/pen/RNbrrBG?editors=0100) - [결과미리보기](https://cdpn.io/pen/debug/RNbrrBG) - [영상 - 24 12 05, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 37강, 체크카드박스, 스와이퍼로 연습, 가운데를 기점으로 이미지 좌우로 좁히기](https://youtu.be/Pjy9QjFBbMs) ## 38강, 체크카드박스, 스와이퍼 적용 - [CODEPEN](https://codepen.io/sangwon7242/pen/EaYPPdB) - [결과미리보기](https://cdpn.io/pen/debug/EaYPPdB) - [영상 - 24 12 05, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 38강, 체크카드박스, 스와이퍼 적용](https://youtu.be/SqtUxRh13B0) ## 39강, IT 기술 박스, 상단 텍스트 작업 - [CODEPEN](https://codepen.io/sangwon7242/pen/gbYPPZW?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/gbYPPZW) - [영상 - 24 12 05, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 39강, IT 기술 박스, 상단 텍스트 작업](https://youtu.be/Lsk1ND2iosg) ## 40강, IT 기술 박스, 하단 이미지, 텍스트 작업 - [CODEPEN](https://codepen.io/sangwon7242/pen/GgKooaE?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/GgKooaE) - [영상 - 24 12 05, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 40강, IT 기술 박스, 하단 이미지, 텍스트 작업](https://youtu.be/-OKG_MzxygA) ## 41강, 하단바 구현, 상단 텍스트 작업 - [CODEPEN](https://codepen.io/sangwon7242/pen/emOJZgO?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/emOJZgO) - [영상 - 24 12 05, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 41강, 하단바 구현, 상단 텍스트 작업](https://youtu.be/K6n02bLoTr0) ## 42강, 하단바 구현, 주소 및 copyright 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/LEPGNLx?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/LEPGNLx) - [영상 - 24 12 05, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 42강, 하단바 구현, 주소 및 copyright 구현](https://youtu.be/P1Vp9ccbxio) ## 43강, 하단바 구현, 하단 텍스트 및 sns list 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/MYgKyoN?editors=1100) - [결과미리보기](https://cdpn.io/pen/debug/MYgKyoN) - [영상 - 24 12 05, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 43강, 하단바 구현, 하단 텍스트 및 sns list 구현](https://youtu.be/MIzTd-XJFQs) ## 44강, 카카오뱅크 일단 합침 - [CODEPEN](https://codepen.io/sangwon7242/pen/GgKoXMZ?editors=0010) - [결과미리보기](https://cdpn.io/pen/debug/GgKoXMZ) - [영상 - 24 12 06, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 44강, 카카오뱅크 일단 합침](https://youtu.be/cM_wj-DCTCc) ## 45강, 카카오뱅크 합친 디자인 세부 조정 - [CODEPEN](https://codepen.io/sangwon7242/pen/ogvbPPN) - [결과미리보기](https://cdpn.io/pen/debug/ogvbPPN) - [영상 - 24 12 06, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 45강, 카카오뱅크 합친 디자인 세부 조정](https://youtu.be/5qWwZ0jMois) ## 46강, 카카오뱅크 로고에 스크롤 이벤트 구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/emOJLVL?editors=0110) - [결과미리보기](https://cdpn.io/pen/debug/emOJLVL) - [영상 - 24 12 06, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 46강, 카카오뱅크 로고에 스크롤 이벤트 구현](https://youtu.be/f1fwrjAvCe4) ## 47강, 메가메뉴 선택시 메뉴가 사라지는 문제 해결, 메뉴 선택시 드롭다운 버튼 초기화 - [CODPEPEN](https://codepen.io/sangwon7242/pen/VYZeGqv?editors=0110) - [결과미리보기](https://cdpn.io/pen/debug/VYZeGqv) - [영상 - 24 12 06, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 47강, 메가메뉴 선택시 메뉴가 사라지는 문제 해결, 메뉴 선택시 드롭다운 버튼 초기화](https://youtu.be/ME1yzXFRpJ0) ## 48강, Visual Studio Code 설치 및 실행 - [Visual Studio Code](https://code.visualstudio.com/) - [영상 - 24 12 06, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 48강, Visual Studio Code 설치 및 실행](https://youtu.be/s4M5ZXoH3pA) ## 49강, Visual Studio Code 기본 세팅 - [d2conding](https://github.com/naver/d2codingfont/releases/tag/VER1.3.2) - [영상 - 24 12 06, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 49강, Visual Studio Code 기본 세팅](https://youtu.be/nAwU7vt-WsU) #### settings.json(파일 - 기본설정 - 설정 - settings.json 검색) #### 또는 ctrl + shift + p 눌러서 settings.json 선택 ```json "liveSassCompile.settings.generateMap": false, // 만일 .map 파일 생성을 끄고 싶다면 "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../style" // 내가 원하는 css 저장 폴더 경로 설정 } ], "liveServer.settings.donotShowInfoMsg": true ``` ## 50강, Visual Studio Code 폴더 및 파일 세팅 - [영상 - 24 12 06, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 50강, Visual Studio Code 폴더 및 파일 세팅](https://youtu.be/y-4Td6cbYoI) ### html 초기 코드 ```html 카카오뱅크 안녕

``` ## 51강, CODEPEN에서 작업한 작업물 Visual Studio Code에 옮기기 - [영상 - 24 12 06, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 51강, CODEPEN에서 작업한 작업물 Visual Studio Code에 옮기기](https://youtu.be/uwyntjVmEgc) ## 52강, Image Downloader를 이용해 이미지 내려받고, 로컬 이미지로 이미지 변경 - [Image Downloader](https://chromewebstore.google.com/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj) - [영상 - 24 12 06, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 52강, Image Downloader를 이용해 이미지 내려받고, 로컬 이미지로 이미지 변경](https://youtu.be/FvZpkc02XvE) ## 53강, 모작한 결과물은 github pages를 이용해 영원히 박제 - [강사 GIT](https://github.com/SangWon7242/kabang_project_2024_12_06) - [결과물, https://sangwon7242.github.io/kabang_project_2024_12_06/](https://sangwon7242.github.io/kabang_project_2024_12_06/) - [영상 - 24 12 06, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 53강, 모작한 결과물은 github pages를 이용해 영원히 박제](https://youtu.be/8qmTeX2QN3g) ## 54강, git 설치 - [GIT](https://git-scm.com/) - [영상 - 24 12 09, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 54강, git설치](https://youtu.be/3wBOe1U0oDE) ## 55강, git과 github를 이용해서 프로젝트 관리하기 - [영상 - 24 12 09, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 55강, git과 github를 이용해서 프로젝트 관리하기](https://youtu.be/dWplRXERnPo) ### 깃허브 명령어 ```bash 깃 기본 명령어 # 깃 초기화(로컬 저장소 생성) git init # 깃허브 연동 git remote add origin "깃허브 주소" # 계정 연동(--global 키워드는 최초의 한번만) git config --global user.name "아이디" git config --global user.email "이메일" git config user.name "아이디" git config user.email "이메일" # 현재 브랜치 확인(이미 main인 경우 패스) git branch # branch 변경(master -> main) git branch -m master main # 로컬 저장소 상태 확인 git status # 로컬 저장소 코드 업로드 & 커밋 메시지 기록 git add . git commit -m "커밋 메시지" # 깃허브에 업로드 git push origin main(branch 이름에 맞게) ``` ## 56강, 수정된 코드를 git을 이용하여 github에 반영하는 방법 - [강사 GIT](https://github.com/SangWon7242/kakao_project_ver2) - [깃허브 페이지스 최종 결과물](https://sangwon7242.github.io/kakao_project_ver2/) - [영상 - 24 12 09, slog 13857, HTML, CSS 심화, 카카오뱅크 모작하기 with SCSS, 56강, git과 github를 이용해서 프로젝트 관리하기](https://youtu.be/iMmQvPaMFkg) ## 할 일 ### 작업 후 강사 이메일로 보내주세요. - qoro33@naver.com - 금일 중으로 해주세요. ``` 지금 할일 1. git 설치후, github 리포지터리 생성 2. 프로젝트 관리하는 폴더 생성 폴더 구조 - kakao_project - docs - HTML, CSS, JS 파일 위치 3. git 명령어를 이용해 github에 프로젝트 업로드 4. 프로젝트 코드 수정후 수정 된 코드 github에 업로드 - 수정된 내용이 반영되도록 5. 강사한테 프로젝트 관리하는 깃허브 주소와 깃허브 페이지스 동시에 첨부 - 디스코드 있는 분들은 디스코드에 올려주세요. - 오프라인은 강사 호출!! - 파비콘 작업은 안해도 됩니다!!!! 하다가 안되는 건 질문 주세요 : ) ```