$$config title: ? 프론트 - 그램그램 UI keywords: - IT - 멋쟁이 사자처럼 자바 백엔드스쿨 3기 $$ ![img](https://i.postimg.cc/dQRWQsYw/Combination-vertical-backendschool-1.png) --- --- # 부모수업 - 부모수업 : 멋쟁이 사자처럼 자바 백엔드스쿨 3기 수업페이지 - [주소 : https://slog.gg/p/2372](https://slog.gg/p/2372) # 수업 - [주소 : https://slog.gg/p/12210](https://slog.gg/p/12210) # 1강 - [23 04 05, ken 12210, 1강, 그램그램 UI 구현](https://youtu.be/6yr61fFtAF8) # 2강 - [23 04 05, ken 12210, 2강, 기반 소스코드 만들기](https://youtu.be/iMPmKdSv5p4) - [CODEPEN](https://codepen.io/jangka44/pen/eYPOeRV) - [to2.kr/esJ](https://to2.kr/esJ) - [폰트어썸 - 아이콘 리스트 - https://fontawesome.com/search?o=r&m=free](https://fontawesome.com/search?o=r&m=free) - [테일윈드 - 치트시트 - https://nerdcave.com/tailwind-cheat-sheet](https://nerdcave.com/tailwind-cheat-sheet) # 3강 - [23 04 05, ken 12210, 3강, 상단 내비바 구현](https://youtu.be/McsSn3VzqOg) - [CODEPEN - 작업 1](https://codepen.io/jangka44/pen/OJBLOZX) - [CODEPEN - 작업 2](https://codepen.io/jangka44/pen/ZEqzaxx) - [데이지UI - https://daisyui.com/](https://daisyui.com/) # 4강 - [23 04 05, ken 12210, 4강, 그램그램 상단바로 꾸미기](https://youtu.be/VJPIYewiCvE) - [CODEPEN](https://codepen.io/jangka44/pen/yLRBPEv) # 5강 - [23 04 06, ken 12210, 5강, 상황에 따라 사용할 대표적인 레이아웃 2개를 미리 만들어 두기](https://youtu.be/xS0L2UM_c5k) - [CODEPEN - 작업 1 - 마크업](https://codepen.io/jangka44/pen/jOeObaB) - [CODEPEN - 작업 2 - flex](https://codepen.io/jangka44/pen/xxyxwpa) - [CODEPEN - 작업 3 - flex-col](https://codepen.io/jangka44/pen/gOBOavb) - [CODEPEN - 작업 4 - flex-grow](https://codepen.io/jangka44/pen/VwEwvXO) - [CODEPEN - 작업 5 - 레이아웃 유형 1, 상단부터 시작](https://codepen.io/jangka44/pen/ZEqEbrv) - [CODEPEN - 작업 6 - 레이아웃 유형 2, 중단부터 시작](https://codepen.io/jangka44/pen/RwewWyb) ## 레이아웃 유형 1 : 상단에서 부터 시작해야할 때 사용하시면 됩니다. ```html ...

...

안녕하세요.

``` ## 레이아웃 유형 2 : 중단에서 부터 시작해야할 때 사용하시면 됩니다. ```html ...

...

안녕하세요.

``` # 6강 - [23 04 06, ken 12210, 6강, 레이아웃 유형 2에서 시작하여, 로그인 화면 구현](https://youtu.be/k1x1DgXz2Bo) - [CODEPEN - 작업 1 - 레이아웃 유형 2 에서 시작, 아이디 폼 필드, autofocus, px-4](https://codepen.io/jangka44/pen/RwewWvN) - [CODEPEN - 작업 2 - 비밀번호 폼 필드](https://codepen.io/jangka44/pen/mdzdevJ) - [CODEPEN - 작업 3 - 전송버튼](https://codepen.io/jangka44/pen/GRYRpzp) - [CODEPEN - 작업 4 - 폼 요소 사이에 gap-6](https://codepen.io/jangka44/pen/gOBOaqP) - [CODEPEN - 작업 5 - 페이지 제목, 완성](https://codepen.io/jangka44/pen/PoyoPVN) ## 최종 ```html ...

...

``` # 7강 - [23 04 07, ken 12210, 7강, 카카오, 네이버, 구글 로그인 버튼 추가](https://youtu.be/7rwpnx-AL7A) - [CODEPEN - 작업 1 - 레이아웃 유형 2 에서 시작, 아이디 폼 필드, autofocus, px-4](https://codepen.io/jangka44/pen/KKGKGJw) - [CODEPEN - 작업 2 - 비밀번호 폼 필드](https://codepen.io/jangka44/pen/yLRLRwY) # 8강 - [23 04 10, ken 12210, 8강, 로그인 폼에서 소셜 로그인 버튼 태그를 a 로 교체, 관련링크도 추가](https://youtu.be/3VXTjlIY2lI) - [CODEPEN - 작업 1 - 소셜 로그인 버튼 태그를 a 로 교체](https://codepen.io/jangka44/pen/xxyGGjV) - [CODEPEN - 작업 2 - 관련링크 추가](https://codepen.io/jangka44/pen/vYVOOrJ) # 9강 - [23 04 11, ken 12210, 9강, 로그인 폼 관련링크박스 가운데 정렬, flex, flex-wrap](https://youtu.be/8VixHXpdqq0) - 목표 - ![img](https://i.imgur.com/UcyHFgs.png) - [CODEPEN - 작업 1 - text-center](https://codepen.io/jangka44/pen/oNaXMXw) - [CODEPEN - 작업 2 - flex flex-wrap](https://codepen.io/jangka44/pen/mdzJjJx) - [CODEPEN - 작업 3 - 배경색 제거해서 완성](https://codepen.io/jangka44/pen/ExdjpVg) # 10강 - [23 04 11, ken 12210, 10강, 인스타아이디 인증 폼 구현](https://youtu.be/wXdNcQgHS3k) - [CODEPEN - 작업 1 - 인스타아이디 입력부분 꾸미기](https://codepen.io/jangka44/pen/MWPwByY) - [CODEPEN - 작업 2 - 성별선택 부분 꾸미기](https://codepen.io/jangka44/pen/bGmdjwZ) # 11강 - [23 04 12, ken 12210, 11강, 입력상자에 다양한 이벤트를 추가하여 입력상자의 값이 실시간으로 특정 엘럼먼트의 TEXT로 갱신되도록](https://youtu.be/HTxJKUB9ZAY) - [CODEPEN - 작업 1 - 레이아웃](https://codepen.io/jangka44/pen/xxywqNM) - [CODEPEN - 작업 2 - onkeyup, onchange, onpaste](https://codepen.io/jangka44/pen/NWOGpZj) - [CODEPEN - 작업 3 - keyup 이벤트 발생시 하단 span TEXT 갱신(메롱)](https://codepen.io/jangka44/pen/PoyPmYG) - [CODEPEN - 작업 4 - keyup 이벤트 발생시 하단 span TEXT 갱신(입력내용)](https://codepen.io/jangka44/pen/qBJOmWG) - [CODEPEN - 작업 5 - 다른 이벤트가 발생해도 TEXT 갱신](https://codepen.io/jangka44/pen/OJBymJb) - [CODEPEN - 작업 6 - 이벤트 위임구조를 적용하여 중복제거](https://codepen.io/jangka44/pen/qBJOmdz) ## input 엘리먼트 이벤트 - onkeyup : 키를 눌렀다가 떼는 순간 - onchange : 내용을 입력 후 포커스를 해제 - onpaste : 붙여넣기를 한 순간 ## 강사가 만든 setTimeoutZero 함수의 사용법 ```javascript function setTimeoutZero(callback) { setTimeout(callback); } // 적용안한 버전, 즉시 수행됨 $(this).keyup(); // 적용한 버전, 살짝 뒤늦게 실행됨 setTimeoutZero(() => $(this).keyup()); ``` # 12강 - [23 04 13, ken 12210, 12강, 입력된 인스타아이디를 이용해서 클릭시 해당 인스타 URL이 새창으로 뜨도록](https://youtu.be/Eckon5opluc) - [CODEPEN - 작업 1 - div 태그를 a 태그로 변경](https://codepen.io/jangka44/pen/KKGVKqL) - [CODEPEN - 작업 2 - return false; 를 통해서 preventDefault 처리](https://codepen.io/jangka44/pen/yLReLbd) - [CODEPEN - 작업 3 - $(this).attr('href', '주소') 를 통해서 href 속성값 조작](https://codepen.io/jangka44/pen/rNqxNzV) - [CODEPEN - 작업 4 - $(this).text() 를 이용해서 입력된 값에 따라 다른 인스타 URL로 이동](https://codepen.io/jangka44/pen/MWPKWEg) - [CODEPEN - 작업 5 - replaceAll(' ', '') 를 통해서 주소 사이에 생기는 공백제거](https://codepen.io/jangka44/pen/YzJwzrr) - [CODEPEN - 작업 6 - 모바일에서 축소되지 않게](https://codepen.io/jangka44/pen/KKGVKXL) - [주소 : https://to2.kr/euh](https://to2.kr/euh) ## onclick 속성이 아닌 자바스크립트를 이용해서 이벤트 바인딩 하는 방법 - [CODEPEN - 바닐라 방법, 제이쿼리 방법](https://codepen.io/jangka44/pen/rNqxNbM) # 13강 - [23 04 17, ken 12210, 13강, 인스타아이디 인증 폼에 인스타주소 실시간 디스플레이 적용](https://youtu.be/xaz-fyEKkis) - [CODEPEN - 작업 1 - 인스타아이디 input 하단에 인스타주소 디스플레이 레이아웃](https://codepen.io/jangka44/pen/xxyObEg) - [CODEPEN - 작업 2 - onkeyup, onchange, onpaste](https://codepen.io/jangka44/pen/yLRJygL) - [CODEPEN - 작업 3 - keyup 이벤트 발생시 하단 span TEXT 갱신(입력내용)](https://codepen.io/jangka44/pen/oNaLgBe) - [CODEPEN - 작업 4 - 최초 1회 keyup 이벤트 강제 실행](https://codepen.io/jangka44/pen/NWOrPdJ) # 14강 - [23 04 17, ken 12210, 14강, 자식선택자와 동생선택자 복습](https://youtu.be/t2O6ZKGfPr4) - [CODEPEN - 작업 1 - 레이아웃](https://codepen.io/jangka44/pen/NWOrPwV) - [CODEPEN - 작업 2 - span 본인에게 hover](https://codepen.io/jangka44/pen/rNqLapM) - [CODEPEN - 작업 3 - span의 부모에게 hover](https://codepen.io/jangka44/pen/dygXPJd) - [CODEPEN - 작업 4 - span의 동생으로 a와 label 추가](https://codepen.io/jangka44/pen/RweRNxB) - [CODEPEN - 작업 5 - span에 hover를 하면 인접동생인 a의 배경색 변경](https://codepen.io/jangka44/pen/WNaxbdV) # 15강 - [23 04 17, ken 12210, 15강, peer를 이용하여 체크박스의 상태에 따른 디자인 변화 만들기](https://youtu.be/ZOhRKQUOWsc) - [CODEPEN - 작업 1 - 레이아웃](https://codepen.io/jangka44/pen/qBJNEYV) - [CODEPEN - 작업 2 - label 도입하여 label 을 클릭해도 라디오버튼 클릭된 효과](https://codepen.io/jangka44/pen/NWOrPBQ) - [CODEPEN - 작업 3 - 일반적인 방식으로 동생선택자 사용](https://codepen.io/jangka44/pen/abRZzay) - [CODEPEN - 작업 4 - 테일윈드 방식으로 동생선택자 사용](https://codepen.io/jangka44/pen/NWOrPOK) - [CODEPEN - 작업 5 - 텍스트를 라디오버튼 앞으로 보내면서도 기존의 형제관계를 유지, flex, -order-1](https://codepen.io/jangka44/pen/WNaxbYN) - [CODEPEN - 작업 6 - 아이콘까지 추가](https://codepen.io/jangka44/pen/BaqzyGe) # 16강 - [23 04 17, ken 12210, 16강, 성별선택에 따른 디자인 효과](https://youtu.be/oT3Qut3r4zw) - [CODEPEN - 작업 1 - 인스타주소 링크 꾸미기](https://codepen.io/jangka44/pen/OJBXVyL) - [CODEPEN - 작업 2 - 성별선택에 따른 디자인 효과](https://codepen.io/jangka44/pen/GRYqJZb) - [CODEPEN - 작업 3 - 성별선택에 따른 디자인 효과, 텍스트 앞으로, 글자 굵기](https://codepen.io/jangka44/pen/WNaxvrr)