$$config title: https://codepen.io/jangka44/pen/ZEparea keywords: - IT - ... $$ # 페이지 정보 - 주소 : [https://to2.kr/bmw](https://to2.kr/bmw) --- # 강좌 ## WELCOME - 01 : 반갑습니다, 15년차 웹 개발자 몰입코딩 입니다. - 02 : 웹 코딩 개요 및 교육 툴 세팅 - 관련링크 - [https://codepen.io/pen](https://codepen.io/pen) - 03 : 코칭권 사용법 ## 01 HTML, CSS 기초와 DISPLAY 속성 - 01 : DISPLAY 속성 - 개념 - [개념 - HTML, CSS, JS 개요](https://codepen.io/jangka44/pen/vzYVYb) - [개념 - display 속성 정리](https://codepen.io/jangka44/debug/ZjbpPR) - 수업자료 - [관련소스 1](https://codepen.io/jangka44/pen/RwGjjNR) - [관련소스 2](https://codepen.io/jangka44/pen/abmVVzr) - [관련소스 3](https://codepen.io/jangka44/pen/rNMYYOP) - 숙제 - [문제 - 다음 화면을 혼자힘으로 구현해주세요.(5분완성)](https://codepen.io/jangka44/pen/xxEPWrx) - [예시](https://codepen.io/jangka44/debug/rNMYYOP) - [정답](https://codepen.io/jangka44/pen/rNMYYOP) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) - 02 : 엘리먼트의 부모/자식/형제 관계와 텍스트 - 개념 - [개념 - display 속성 정리](https://codepen.io/jangka44/debug/ZjbpPR) - [개념 - 글자](https://codepen.io/jangka44/pen/oNzoqBj) - [개념 - 엘리먼트(배우)의 부모, 자식, 형제관계](https://codepen.io/jangka44/pen/bQqbpZ) - [개념 - 기본적으로 사용가능한 태그 4종, div, article, nav, section](https://codepen.io/jangka44/pen/zYKPWLY) - block과 inline-block의 특징 - block 요소의 너비 : 너비를 지정하지 않는 한, 최대한 늘어난다. - block 요소의 높이 : 높이를 지정하지 않는 한, 최소한으로 줄어든다. - block 요소의 줄사용 : 한 줄을 무!조!건 혼자 쓴다.(세로모드) - inline-block 요소의 너비 : 너비를 지정하지 않는 한, 최소한으로 줄어든다. - inline-block 요소의 높이 : 높이를 지정하지 않는 한, 최소한으로 줄어든다. - inline-block 요소의 줄사용 : 가능하면 최대한 한줄을 여럿이서 쓴다. - div, section, nav, article의 기본 display 속성값 - div, section, nav, article의 기본 display 속성값은 block 이다. - 숙제 - [문제 - block과 inline-block이 너비, 높이, 줄사용에 관련하여 어떤 변화를 일으키는지 실험으로 증명해주세요.](https://codepen.io/jangka44/pen/JjROLrd) - [정답 - block의 너비](https://codepen.io/jangka44/pen/bGwYvov) - [정답 - block의 높이](https://codepen.io/jangka44/pen/KKgyoXG) - [정답 - block의 줄사용](https://codepen.io/jangka44/pen/ZEpaxXP) - [정답 - inline-block의 너비](https://codepen.io/jangka44/pen/KKgyojY) - [정답 - inline-block의 높이](https://codepen.io/jangka44/pen/gOwXeVz) - [정답 - inline-block의 줄사용](https://codepen.io/jangka44/pen/WNGXzVP) - [문제 - 다음 글자를 똑같은 스타일로 만들어주세요.](https://codepen.io/jangka44/debug/bGwYvWL) - [예시](https://codepen.io/jangka44/debug/KKgyomx) - [정답](https://codepen.io/jangka44/pen/KKgyomx) - [문제 - display 속성과 관련된 문제를 풀어주세요.](https://codepen.io/jangka44/pen/YzGEaVG) - [정답](https://codepen.io/jangka44/pen/PoGORmK) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) - 03 : DISPLAY 연습문제와 a, br 태그 - 개념 - [개념 - a와 br](https://codepen.io/jangka44/pen/zLqQam) - [개념 - 자바스크립트, console.log](https://codepen.io/jangka44/pen/YzGEvWg) - [개념 - 자바스크립트, 변수](https://codepen.io/jangka44/pen/yLaPEab) - 숙제 - [문제 - div, section, article 태그를 사용해서 3가지 색의 막대를 만들어주세요.](https://codepen.io/jangka44/pen/KBdaGd) - [예시](https://codepen.io/jangka44/debug/VBvPeM) - [정답](https://codepen.io/jangka44/pen/VBvPeM) - [문제 - section(green 색 막대)과 article(blue 색 막대)을 한 줄에 보이게 해주세요.](https://codepen.io/jangka44/pen/qyOqrE) - [예시](https://codepen.io/jangka44/debug/WKQRGW) - [정답](https://codepen.io/jangka44/pen/WKQRGW) - [문제 - 각각의 사이트 명에 링크를 걸어주세요.(새창으로 떠야 합니다.)](https://codepen.io/jangka44/pen/ZEEMPpy) - [예시](https://codepen.io/jangka44/debug/mddGorY) - [정답](https://codepen.io/jangka44/pen/mddGorY) - [문제 - 젠코딩으로 네이버, 구글, 다음으로 가는 링크를 만들어주세요.](https://codepen.io/jangka44/pen/pBWYyR) - [예시](https://codepen.io/jangka44/debug/pBWYyR) - [정답](https://codepen.io/jangka44/pen/pBWYyR) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) - 04 : 젠코딩과 자식/후손 선택자 그리고 text-align - 개념 - [개념 - short code(자식, 인접동생)](https://codepen.io/jangka44/pen/rreXjL) - [개념 - 자식/후손 선택자](https://codepen.io/jangka44/pen/KBzjzB) - [개념 - text-align](https://codepen.io/jangka44/pen/JBXgNy) - [개념 - text-align 2](https://codepen.io/jangka44/pen/JaLwpr) - [개념 - 자바스크립트, 조건문](https://codepen.io/jangka44/pen/OJROEbV) - [개념 - 자바스크립트, if, else, else if](https://codepen.io/jangka44/pen/NWRwzbr) - 숙제 - [문제 - 각각의 크기와 색상이 다른 링크 버튼 3개 만들어주세요.](https://codepen.io/jangka44/pen/JaoBNQ) - [예시](https://codepen.io/jangka44/debug/yxyqQQ) - [정답](https://codepen.io/jangka44/pen/yxyqQQ) - [문제 - 각각의 크기와 색상과 정렬상태가 다른 링크 버튼 3개 만들어주세요.](https://codepen.io/jangka44/pen/XPJByw) - [예시](https://codepen.io/jangka44/debug/rZarQb) - [정답](https://codepen.io/jangka44/pen/rZarQb) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) - 05 : hover, transition, text-decoration, nbsp - 개념 - [개념 - hover](https://codepen.io/jangka44/pen/KBzOKj) - [개념 - transition](https://codepen.io/jangka44/pen/VwKrBKe) - [개념 - `nbsp;`](https://codepen.io/jangka44/pen/yqOmxJ) - [개념 - text-deocration:none](https://codepen.io/jangka44/pen/eLNreO) - [개념 - 자바스크립트, 반복문](https://codepen.io/jangka44/pen/QWKOxGG) - [개념 - 자바스크립트, for문](https://codepen.io/jangka44/pen/yLaPEVX) - 문제 - [문제 - 100칸 짜리 바둑판을 만들고 하나의 칸에 마우스를 올리면 해당 칸의 배경색이 바뀌도록 해주세요.](https://codepen.io/jangka44/pen/VGYGvp) - [예시](https://codepen.io/jangka44/debug/QVwVWZ) - [정답](https://codepen.io/jangka44/pen/QVwVWZ) - [정답 v2](https://codepen.io/jangka44/pen/vYOKqNg) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) - 06 : BMX 사이트의 상단바 따라만들기 - 개념 - [개념 - 자바스크립트, 2중 for문](https://codepen.io/jangka44/pen/QWKOxGG) - [개념 - 자바스크립트, 다양한 반복문 활용](https://codepen.io/jangka44/pen/yLaPEVX) - 문제 - [문제 - div 태그만 사용하여 사과의 색상을 red로 변경해주세요.](https://codepen.io/jangka44/pen/jOWqvPR) - [예시](https://codepen.io/jangka44/debug/XWXdPXX) - [정답](https://codepen.io/jangka44/pen/XWXdPXX) - [문제 - bmx 사이트의 상단 메뉴까지 구현해주세요.](https://codepen.io/jangka44/pen/oMxKZp) - [예시 v1](https://codepen.io/jangka44/debug/wQdWEG) - [정답 v1](https://codepen.io/jangka44/pen/wQdWEG) - [예시 v2](https://codepen.io/jangka44/debug/ejZqvz) - [정답 v2](https://codepen.io/jangka44/pen/ejZqvz) - [예시 v3](https://codepen.io/jangka44/debug/zLBYrQ) - [정답 v3](https://codepen.io/jangka44/pen/zLBYrQ) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) - 07 : 이미지 - 개념 - [개념 - 이미지](https://codepen.io/jangka44/pen/pZEYmx) - [개념 - 자바스크립트, 함수](https://codepen.io/jangka44/pen/WNGXyRG) - [개념 - 자바스크립트, 함수 매개변수](https://codepen.io/jangka44/pen/QWKOxdG) - 문제 - [문제 - bmx 사이트의 상단 메뉴까지 구현해주세요, 계속](https://codepen.io/jangka44/pen/oMxKZp) - [예시 v4](https://codepen.io/jangka44/debug/PxjWxY) - (div+a)+(section>a[href="#"]*7) - [정답 v4](https://codepen.io/jangka44/pen/PxjWxY) - [예시 v5](https://codepen.io/jangka44/debug/qMdKbP) - (div+a)+(section>nav*7>a[href="#"]) - [정답 v5](https://codepen.io/jangka44/pen/qMdKbP) - [문제 - 이미지 6개를 3x2 가운데 정렬로 배열해주세요.](https://codepen.io/jangka44/pen/MWwJJYr) - [힌트](https://codepen.io/jangka44/pen/WNrGbQg) - [예시](https://codepen.io/jangka44/debug/KKpaNYm) - [정답, 4가지 방법](https://codepen.io/jangka44/pen/OJXNyWX) - [정답, 6가지 방법](https://codepen.io/jangka44/pen/KKpaNYm) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) - 08 : margin, padding과 inline vs inline-block - 개념 - [자바스크립트 훈련팁, code.org 코스2](https://studio.code.org/s/course2) - [자바스크립트 훈련팁, code.org 코스3](https://studio.code.org/s/course3) - [개념 - margin, padding](https://codepen.io/jangka44/pen/PBGgQa) - [개념 - margin, padding v2](https://codepen.io/jangka44/pen/rZvRmQ) - [개념 - display:inline 에는 width, height, padding, margin이 제대로 작동하지 않는다.](https://codepen.io/jangka44/pen/xJEoPe) - [개념 - display:inline 에는 width, height, padding, margin이 제대로 작동하지 않는다. v2](https://codepen.io/jangka44/pen/ZMRPMM) - [개념 - 자바스크립트, 함수 리턴](https://codepen.io/jangka44/pen/LYROrxX) - [개념 - 자바스크립트, 함수 만들기](https://codepen.io/jangka44/pen/oNzoyBJ) - 문제 - [문제 - 이미지 6개를 3x2 가운데 정렬로 배열해주세요, margin, padding](https://codepen.io/jangka44/pen/OJROrMo) - [예시](https://codepen.io/jangka44/debug/BaLmvjq) - [정답](https://codepen.io/jangka44/pen/BaLmvjq) - [정답 v2](https://codepen.io/jangka44/pen/MWjOZyW) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) - 09 : nth-child - 개념 - [개념 - nth-child](https://codepen.io/jangka44/pen/xJEeag) - [개념 - nth-child v2](https://codepen.io/jangka44/pen/wEXOJo) - [개념 - 자바스크립트, 객체](https://codepen.io/jangka44/pen/OJROEpV) - [개념 - 자바스크립트, 객체 활용](https://codepen.io/jangka44/pen/wvzPXJM) - 문제 - [문제 - 무지개를 만들어주세요.](https://codepen.io/jangka44/pen/OJLKjBX) - [예시](https://codepen.io/jangka44/debug/aboeyRQ) - [정답](https://codepen.io/jangka44/pen/aboeyRQ) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) - 10 : block 요소 정렬 - 개념 - [개념 - 클래스와 ID](https://codepen.io/jangka44/pen/XWdBoMO) - [개념 - 개념 : 모든 보이는 엘리먼트의 부모는 body이고, 그의 부모는 html 이다.](https://codepen.io/jangka44/pen/RwWvRMe) - [개념 : block 요소 좌측,가운데,우측 정렬하는 방법](https://codepen.io/jangka44/pen/zJNKwN) - [개념 : block 요소 좌측,가운데,우측 정렬하는 방법 v2](https://codepen.io/jangka44/pen/EeGyKK) - [개념 : 모든 보이는 엘리먼트의 부모는 body이고, 그의 부모는 html 이다.](https://codepen.io/jangka44/pen/RwWvRMe) - [개념 - 자바스크립트, 배열](https://codepen.io/jangka44/pen/QWKOxpG) - [개념 - 자바스크립트, 배열 활용](https://codepen.io/jangka44/pen/yLaPEMX) - 문제 - [문제 - bmx 사이트의 상단 이미지 4개 까지만 구현해주세요.](https://codepen.io/jangka44/pen/KKgyepN) - [예시 v1, br과 nbsp](https://codepen.io/jangka44/debug/MWjOXKm) - [정답 v1, br과 nbsp](https://codepen.io/jangka44/pen/MWjOXKm) - [예시 v2, margin](https://codepen.io/jangka44/debug/LYROrGg) - [정답 v2, margin](https://codepen.io/jangka44/pen/LYROrGg) - [예시 v3, 엘리먼트 5개 이하, body](https://codepen.io/jangka44/debug/bGwYKpE) - [정답 v3, 엘리먼트 5개 이하, body](https://codepen.io/jangka44/pen/bGwYKpE) - [예시 v4](https://codepen.io/jangka44/debug/zYKPaqR) - [정답 v4](https://codepen.io/jangka44/pen/zYKPaqR) - [CSS DINER](https://flukeout.github.io/) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) ## 02 메뉴와 레이아웃 - border-radius와 inherit 그리고 a의 노말라이즈 - 내용1 - [개념 - border-radius](https://codepen.io/jangka44/pen/bjwyMd) - [개념 - border-radius v2](https://codepen.io/jangka44/pen/KxeEqX) - [문제 - 슬라이더의 페이지 메뉴 구현, border-radius 약간](https://codepen.io/jangka44/pen/bGwaRRo) - [예시](https://codepen.io/jangka44/debug/VGdRMZ) - [정답](https://codepen.io/jangka44/pen/VGdRMZ) - [문제 - 슬라이더의 페이지 메뉴 구현, border-radius 50%](https://codepen.io/jangka44/pen/KKgZqqR) - [예시](https://codepen.io/jangka44/debug/XyeREQ) - [정답](https://codepen.io/jangka44/pen/XyeREQ) - 내용2 - [개념 - inherit](https://codepen.io/jangka44/pen/JBRgyK) - [개념 - inherit v2](https://codepen.io/jangka44/pen/aaKMxg) - [개념 - a 노말라이즈](https://codepen.io/jangka44/pen/BPLXrO) - 내용3 - [개념 - 자바스크립트, 경고창](https://codepen.io/jangka44/pen/eYdyPje) - [개념 - 자바스크립트, 제이쿼리](https://codepen.io/jangka44/pen/zYKpmLW) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) - 회색 사이트, 메뉴바 구현 - 1차 메뉴 - 내용1 - [문제 - 메뉴를 구현해주세요.(1차 메뉴까지만, width, height 사용금지)](https://codepen.io/jangka44/pen/dypJQYx) - [힌트](https://codepen.io/jangka44/pen/RwwbqJQ) - [예시](https://codepen.io/jangka44/debug/wvzpQMg) - [정답](https://codepen.io/jangka44/pen/wvzpQMg) - 내용2 - [개념 - 자바스크립트, 제이쿼리, DOM 조작](https://codepen.io/jangka44/pen/MWjrzKV) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) - body의 노말라이즈와 클래스 선택자 그리고 BEM - 내용1 - [개념 - body 노말라이즈](https://codepen.io/jangka44/pen/djvqLM) - 내용2 - [개념 - 클래스 선택자](https://codepen.io/jangka44/pen/oMZMyQ) - [개념 - BEM 선택자](https://codepen.io/jangka44/pen/gOwvwbG) - 내용3 - [문제 - 모든 엘리먼트의 태그를 div로 바꿔주세요.](https://codepen.io/jangka44/pen/aQqGbO) - [예시](https://codepen.io/jangka44/debug/oQEqrL) - [정답](https://codepen.io/jangka44/pen/oQEqrL) - [문제 - 최상위 엘리먼트의 클래스 속성을 제외한 나머지는 전부 지워주세요.](https://codepen.io/jangka44/pen/ZmroEN) - [예시](https://codepen.io/jangka44/debug/xQYjbw) - [정답](https://codepen.io/jangka44/pen/xQYjbw) - 내용4 - [개념 - 자바스크립트, 제이쿼리, 버튼을 누르면 div 7개를 각각 빨, 주, 노, 초, 파, 남, 보로 변경](https://codepen.io/jangka44/pen/vYXdvje) - [개념 - 자바스크립트, 제이쿼리, 버튼을 누르면 div 700개의 배경색을 파란색으로 변경](https://codepen.io/jangka44/pen/RwGQEyj) - [실무에서 굉장히 유용한 추가 교육자료(주의 : 학습 중반 이후부터 보시는걸 추천합니다.)](https://slog.gg/p/832) - 클래스(1) - 내용1 - [개념 - calc, var](https://codepen.io/jangka44/pen/MWjQjbd) - 내용2 - [개념 - con-min-width, con](https://codepen.io/jangka44/pen/YzGeBVj) - 내용3 - [개념 - 웹폰트 사용법](https://codepen.io/jangka44/pen/poEaGrg) - [링크 - 눈누 상업용 무료한글폰트 사이트, 눈누](https://noonnu.cc/) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 클래스(2) - 내용4 - [문제 - bem을 이용해서 사이트 상단바 만들기](https://codepen.io/jangka44/pen/dypdaJj) - 어려움 주의, 실무예제 - [예시](https://codepen.io/jangka44/debug/BaLYMdg) - [정답, 단계 1, 헤더 마크업](https://codepen.io/jangka44/pen/xxEWVmY) - [정답, 단계 2, 좌측박스와 우측박스사이의 여백제거로 한줄처리](https://codepen.io/jangka44/pen/zYKWqeP) - [정답, 단계 3, 로고완성](https://codepen.io/jangka44/pen/bGwvpZd) - [정답, 단계 4, 우측메뉴박스1 마크업](https://codepen.io/jangka44/pen/ZEpxWNy) - [정답, 단계 5, 우측메뉴박스1 완성](https://codepen.io/jangka44/pen/MWjVyNm) - [정답, 단계 6, 좌측박스너비 변수화, 마무리](https://codepen.io/jangka44/pen/BaLYMdg) - 내용5 - [개념 - 자바스크립트, 제이쿼리, 버튼을 누르면 div 2개의 배경색을 변경](https://codepen.io/jangka44/pen/VwKXamX) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - ul, li, h1 - 내용1 - [개념 - ul, li](https://codepen.io/jangka44/pen/EpWOam) - [개념 - ol, li](https://codepen.io/jangka44/pen/PxQeEB) - [개념 - h1, h2, h3, h4, h5, h6](https://codepen.io/jangka44/pen/KrQRVJ) - 내용2 - [문제 - 방탄소년단의 노래소개와 멤버구성을 ul, ol, li, h1, h2 태그만으로 표현해주세요.](https://codepen.io/jangka44/pen/LXQmzW) - [예시](https://codepen.io/jangka44/debug/BGrJqO) - [정답](https://codepen.io/jangka44/pen/BGrJqO) - 내용3 - [개념 - ul, li 노말라이즈](https://codepen.io/jangka44/pen/ajJQzw) - [개념 - h1, h2, h3, h4, h5, h6 노말라이즈](https://codepen.io/jangka44/pen/PxaKWb) - 내용4 - [개념 - 상황에 맞는 태그를 알면 그걸 사용하고, 모르면 div](https://codepen.io/jangka44/pen/zLZmXo) - 내용5 - [개념 - 자바스크립트, 제이쿼리, 짝수번째 버튼은 body 엘리먼트의 배경을 red로, 홀수번째 버튼은 body 엘리먼트의 배경을 blue로 변경](https://codepen.io/jangka44/pen/RwGMaoB) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 복습 튜토리얼 - 내용1 - [CSS DINER](https://flukeout.github.io/) - 22단계까지 풀어주세요. - 내용2 - [드롭 다운 메뉴 만들기 1](https://codepen.io/jangka44/pen/wmamMY) - [드롭 다운 메뉴 만들기 2](https://codepen.io/jangka44/pen/oqXqBe) - [드롭 다운 메뉴 만들기 3](https://codepen.io/jangka44/pen/JLdLVM) - [드롭 다운 메뉴 만들기 4](https://codepen.io/jangka44/pen/VXvQOK) - [드롭 다운 메뉴 만들기 5](https://codepen.io/jangka44/pen/NYGyZM) - [드롭 다운 메뉴 만들기 6](https://codepen.io/jangka44/pen/yKYKBZ) - [드롭 다운 메뉴 만들기 7](https://codepen.io/jangka44/pen/Zxbxbd) - [드롭 다운 메뉴 만들기 8](https://codepen.io/jangka44/pen/NYGYrL) - [드롭 다운 메뉴 만들기 9](https://codepen.io/jangka44/pen/QmjmvY) - [드롭 다운 메뉴 만들기 10](https://codepen.io/jangka44/pen/jzbzpj) - [드롭 다운 메뉴 만들기 11](https://codepen.io/jangka44/pen/JLGLpX) - [드롭 다운 메뉴 만들기 12](https://codepen.io/jangka44/pen/KoVoRE) - [드롭 다운 메뉴 만들기 13](https://codepen.io/jangka44/pen/eMJMPY) - [드롭 다운 메뉴 만들기 14](https://codepen.io/jangka44/pen/zWrWVB) - [드롭 다운 메뉴 만들기 15](https://codepen.io/jangka44/pen/JLGvXJ) - [드롭 다운 메뉴 만들기 16](https://codepen.io/jangka44/pen/eMJreg) - [드롭 다운 메뉴 만들기 17](https://codepen.io/jangka44/pen/mxVLXa) - [드롭 다운 메뉴 만들기 18](https://codepen.io/jangka44/pen/KoVRRz) - [드롭 다운 메뉴 만들기 19](https://codepen.io/jangka44/pen/KoVRez) - [드롭 다운 메뉴 만들기 20](https://codepen.io/jangka44/pen/wmMjxw) - 내용3 - [문제 - 3가지 메뉴를 구현해주세요.(1차 메뉴까지만)](https://codepen.io/jangka44/pen/EegZdW) - [예시](https://codepen.io/jangka44/debug/JaREmy) - [정답](https://codepen.io/jangka44/pen/JaREmy) - 내용4 - [개념 - 자바스크립트, 제이쿼리, 엘리먼트를 3개 만들고 각각을 클릭하면 서로 다른 경고창 내용이 나오도록 해주세요.](https://codepen.io/jangka44/pen/wvzmGoZ) - [재생목록, 1차 ~ 3차 메뉴 만들기가 어려우면 보세요.](https://to2.kr/caz) - [재생목록, 반응형 웹사이트 구현이 궁금하면 보세요, float 활용](https://to2.kr/caA) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - inline-grid - 내용1 - [개념 - inline grid](https://codepen.io/jangka44/pen/QWKQYrj) - 내용2 - [개념 - img-box](https://codepen.io/jangka44/pen/rNMdpvX) - 내용3 - [문제 - 이미지 리스트를 만들어주세요.](https://codepen.io/jangka44/pen/MWjQLRm) - [링크 - lorem img, lorem picsum](https://picsum.photos/) - [예시](https://codepen.io/jangka44/debug/eYdVxxE) - [정답](https://codepen.io/jangka44/pen/eYdVxxE) - 내용4 - [문제 - 이미지 리스트를 만들어주세요. 한줄에 3개](https://codepen.io/jangka44/pen/eYdVxxE) - [예시](https://codepen.io/jangka44/debug/poEaGXe) - [정답](https://codepen.io/jangka44/pen/poEaGXe) - 내용5 - [문제 - 이미지 리스트를 만들어주세요. 한줄에 3개, 사이여백 20px](https://codepen.io/jangka44/pen/poEaGXe) - 어려움 주의, 실무예제 - [예시](https://codepen.io/jangka44/debug/oNzEmrQ) - [정답](https://codepen.io/jangka44/pen/oNzEmrQ) - 내용6 - [개념 - 자바스크립트, 제이쿼리, 클릭하면 엘리먼트를 커지게 하고 나머지를 원상태로 만들어주세요.](https://codepen.io/jangka44/pen/JjRLMgb) - [재생목록, 1차 ~ 3차 메뉴 만들기가 어려우면 보세요.](https://to2.kr/caz) - [재생목록, 반응형 웹사이트 구현이 궁금하면 보세요, float 활용](https://to2.kr/caA) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - text-shadow, box-shadow, 시멘틱 태그(1) - 내용1 - [개념 - flex](https://codepen.io/jangka44/pen/KKgoVzx) - 내용2 - [개념- 애니메이션 타이밍 펑션](https://codepen.io/jangka44/pen/poELjyw) - [링크 - 베지어 함수 매개변수 생성기 - cubic-bezier](https://cubic-bezier.com/) - 내용3 - [개념 - box-shadow, 단계 1, 또렷한](https://codepen.io/jangka44/pen/JOaBWj) - [개념 - box-shadow, 단계 2, blur](https://codepen.io/jangka44/pen/rYZrmR) - [개념 - box-shadow, 단계 3, 멀티](https://codepen.io/jangka44/pen/javpap) - [개념 - box-shadow, 단계 4, 트랜지션](https://codepen.io/jangka44/pen/BmOPYJ) - [개념 - box-shadow, 단계 5, 애니메이션 타이밍 펑션](https://codepen.io/jangka44/pen/gXdjex) - 내용4 - [개념 - text-shadow](https://codepen.io/jangka44/pen/gOwvyWX) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - text-shadow, box-shadow, 시멘틱 태그(2) - 내용5 - [개념 - text-shadow, 글자 외곽선 표시](https://codepen.io/jangka44/pen/GRjQLqE) - 내용6 - [개념 - text-shadow, hover 그림자 이동](https://codepen.io/jangka44/pen/mdrxVdO) - 내용7 - [개념 - text-shadow, 긴 그림자](https://codepen.io/jangka44/pen/ZEprPgV) - 내용8 - [개념 - background-image](https://codepen.io/jangka44/pen/PoGRqmV) - 내용9 - [개념 - 고정비율엘리먼트](https://codepen.io/jangka44/pen/xxEWvdK) - 내용10 - [문제 - 매터리얼 이미지 그리드 리스트 구현](https://codepen.io/jangka44/pen/KKgoVEL) - [예시](https://codepen.io/jangka44/debug/jOMzPxb) - [정답, 단계 1, 기초 마크업, 기초 CSS](https://codepen.io/jangka44/pen/QWKmyJY) - [정답, 단계 2, 이미지 그리드 리스트](https://codepen.io/jangka44/pen/RwGMrmQ) - [정답, 단계 3, 배경이미지, after를 통한 고정비율 엘리먼트](https://codepen.io/jangka44/pen/BaLrjgq) - [정답, 단계 4, 리스트 아이템 여백](https://codepen.io/jangka44/pen/GRjxZKG) - [정답, 단계 5, 리스트 아이템 크기 키우기, 한줄에 3개](https://codepen.io/jangka44/pen/gOwerbj) - [정답, 단계 6, hover 그림자 적용](https://codepen.io/jangka44/pen/jOMzPxb) - 내용10 - [개념 - 시멘틱 태그](https://codepen.io/jangka44/pen/NWRYVEK) - 내용11 - [개념 - 자바스크립트, 제이쿼리, css 함수의 원리](https://codepen.io/jangka44/pen/mdrxNGw) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - developer 사이트, 상단바 구현 - 내용1 - [개념 - 폰트어썸](https://codepen.io/jangka44/pen/bGwMbOX) - [링크 - 폰트어썸](https://fontawesome.com/) - [링크 - 폰트어썸, 무료 아이콘 리스트](https://fontawesome.com/icons?d=gallery&m=free) - [링크 - cdnjs.com](https://cdnjs.com) - 내용2 - [문제 - 로고를 구현해주세요.](https://codepen.io/jangka44/pen/MWjGgLe) - [예시](https://codepen.io/jangka44/debug/BaLyrrN) - [정답](https://codepen.io/jangka44/pen/abmGNZZ) - 내용3 - [문제 - 메뉴바를 구현해주세요.](https://codepen.io/jangka44/pen/qBaYZqr) - [예시](https://codepen.io/jangka44/debug/BaLyrrN) - [정답](https://codepen.io/jangka44/pen/oNzdvmd) - 내용4 - [문제 - 로고바와 메뉴바를 구현해주세요.](https://codepen.io/jangka44/pen/vYXjBbV) - [예시](https://codepen.io/jangka44/debug/BaLyrrN) - [정답](https://codepen.io/jangka44/pen/abmGNZZ) - 내용5 - [개념 - 자바스크립트, 제이쿼리, addClass와 removeClass](https://codepen.io/jangka44/pen/zYKjObz) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - display로 레이아웃 만들기 - 내용1 - [개념 - box-sizing](https://codepen.io/jangka44/pen/OJRZNzr) - 내용2 - [flex 개구리](https://flexboxfroggy.com/#ko) - [flex 디펜스](http://www.flexboxdefense.com/) - [flex play ground](https://codepen.io/enxaneta/pen/adLPwv) - 내용3 - [개념 : 음수마진](https://codepen.io/jangka44/pen/wvzjGyO) - 내용4 - [개념 : float](https://codepen.io/jangka44/pen/oNzdxqo) - 내용5 - [개념 : float grid](https://codepen.io/jangka44/pen/VwKxaXQ) - 내용6 - [개념 : 좌측 1, 우측 3 레이아웃](https://codepen.io/jangka44/pen/MWjGyGa) - 내용7 - [개념 - 자바스크립트, 제이쿼리, toggleClass](https://codepen.io/jangka44/pen/PoGeNeX) - [재생목록, 1차 ~ 3차 메뉴 만들기가 어려우면 보세요.](https://to2.kr/caz) - [재생목록, 반응형 웹사이트 구현이 궁금하면 보세요, float 활용](https://to2.kr/caA) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) ## 03 메뉴와 레이아웃 - POSITION 속성 - 내용1 - [개념 - position](https://codepen.io/jangka44/pen/NWRMYax) - 내용2 - [개념 - z-index](https://codepen.io/jangka44/pen/poEVLWR) - 내용3 - [개념 - position 속성 정리](https://codepen.io/jangka44/debug/xxEjYqE) - 내용4 - [문제 - position:absolute를 이용해서 화면을 4등분 해주세요.](https://codepen.io/jangka44/pen/NYgaaw) - [예시](https://codepen.io/jangka44/debug/dmOVEj) - [정답, 단계 1, 1개](https://codepen.io/jangka44/pen/NYgaaw) - [정답, 단계 2, 2개](https://codepen.io/jangka44/pen/pLNWYy) - [정답, 단계 3, 3개](https://codepen.io/jangka44/pen/OvbxGe) - [정답, 단계 4, 4개](https://codepen.io/jangka44/pen/dmOVEj) - 내용5 - [문제 - position:absolute를 이용해서 화면을 3등분 해주세요.](https://codepen.io/jangka44/pen/wvzjmpK) - [예시](https://codepen.io/jangka44/debug/rNBmbER) - [정답](https://codepen.io/jangka44/pen/rNBmbER) - 내용6 - [문제 - position:absolute를 이용해서 화면을 9등분 해주세요.](https://codepen.io/jangka44/pen/ZEpoxvJ) - [예시](https://codepen.io/jangka44/debug/LdbOYB) - [정답](https://codepen.io/jangka44/pen/LdbOYB) - 내용7 - [문제 - position:absolute를 이용해서 화면을 4등분 해주세요, width와 height 금지](https://codepen.io/jangka44/pen/JjRvZEb) - [예시](https://codepen.io/jangka44/debug/eYdrKZO) - [정답](https://codepen.io/jangka44/pen/eYdrKZO) - 내용8 - [개념 - 자바스크립트, 제이쿼리, hasClass](https://codepen.io/jangka44/pen/XWjqqKy) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - TOP, LEFT, RIGHT, BOTTOM과 RELATIVE - 내용1 - [개념 - relative](https://codepen.io/jangka44/pen/eYYwqLO) - 내용2 - [문제 - position을 이용해서 유령들을 가운데로 모아주세요.](https://codepen.io/jangka44/pen/MWjGGoq) - [예시](https://codepen.io/jangka44/debug/vYXjjZG) - [정답](https://codepen.io/jangka44/pen/vYXjjZG) - 내용3 - [문제 - 유령을 중첩해서 사용해서, 유령안에 유령들을 만들어주세요.](https://codepen.io/jangka44/pen/abmGGwr) - [예시](https://codepen.io/jangka44/debug/dypeezo) - [정답](https://codepen.io/jangka44/pen/dypeezo) - 내용4 - [개념 - 자바스크립트, 제이쿼리, this](https://codepen.io/jangka44/pen/bGwMMKa) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 선택자 튜토리얼 문제 - 내용1 - [CSS DINER](https://flukeout.github.io/) - 끝까지 풀어주세요. - 내용2 - [선택자 튜토리얼, 단계 1](https://codepen.io/jangka44/pen/aYNGjw) - [선택자 튜토리얼, 단계 2](https://codepen.io/jangka44/pen/dmMKyq) - [선택자 튜토리얼, 단계 3](https://codepen.io/jangka44/pen/mxPKeg) - [선택자 튜토리얼, 단계 4](https://codepen.io/jangka44/pen/Kozezg) - [선택자 튜토리얼, 단계 5](https://codepen.io/jangka44/pen/WzwyGw) - [선택자 튜토리얼, 단계 6](https://codepen.io/jangka44/pen/jzrzwY) - [선택자 튜토리얼, 단계 7](https://codepen.io/jangka44/pen/EEyEbJ) - [선택자 튜토리얼, 단계 8](https://codepen.io/jangka44/pen/qoNowO) - [선택자 튜토리얼, 단계 9](https://codepen.io/jangka44/pen/OvXvYO) - [선택자 튜토리얼, 단계 10](https://codepen.io/jangka44/pen/pLbVoq) - 내용3 - [문제 - 해당 선택자가 몇개의 엘리먼트를 선택하는지 주석으로 적어주세요.](https://codepen.io/jangka44/pen/ZxLXMb) - [정답](https://codepen.io/jangka44/pen/pLeWWY) - 내용4 - [문제 - 해당 선택자가 몇개의 엘리먼트를 선택하는지 주석으로 적어주세요, 3차풀다운메뉴](https://codepen.io/jangka44/pen/KKwVaLL) - [문제](https://codepen.io/jangka44/pen/VRwyep) - 내용5 - [개념 - white-space:nowrap, 줄바꿈 금지](https://codepen.io/jangka44/pen/NLdRyK) - [개념 - overflow-x:auto, 스크롤바 자동생성](https://codepen.io/jangka44/pen/vzgXjV) - [개념 - overflow-x:scroll, 스크롤바 무조건 생성](https://codepen.io/jangka44/pen/ZMLpRB) - [개념 - overflow-x:hidden, 넘치는 내용 숨김](https://codepen.io/jangka44/pen/vzgXrV) - [개념 - text-overflow:ellipsis, 넘쳐서 숨겨지는 텍스트 ... 처리](https://codepen.io/jangka44/pen/ZMLpjL) - 내용6 - [개념 - 자바스크립트, 제이쿼리, hasClass, addClass, removeClass](https://codepen.io/jangka44/pen/mdrLjmg) - [시작](https://codepen.io/jangka44/pen/xxEjJdW) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 회색 사이트, 메뉴바 구현, 드롭다운 - 2차 메뉴 - 내용1 - [문제 - 2차 드롭다운메뉴를 만들어주세요.](https://codepen.io/jangka44/pen/QWKxGxP) - [예시](https://codepen.io/jangka44/debug/vYXryMj) - [정답, 단계 1, 마크업](https://codepen.io/jangka44/pen/MWjXbqW) - [정답, 단계 2, 기본 레이아웃](https://codepen.io/jangka44/pen/bGwKBxz) - [정답, 단계 3, 1차 메뉴아이템 호버시 텍스트 효과](https://codepen.io/jangka44/pen/jOMKVQj) - [정답, 단계 4, 1차 메뉴아이템 호버시 2차 메뉴 보여줌](https://codepen.io/jangka44/pen/ZEpRBVb) - [정답, 단계 5, 2차 메뉴 유령화](https://codepen.io/jangka44/pen/PoGabXy) - [정답, 단계 6, 2차 메뉴아이템텍스트 꾸미기](https://codepen.io/jangka44/pen/KKgeNJP) - [정답, 단계 7, 2차 메뉴너비 100%](https://codepen.io/jangka44/pen/NWRzbom) - [정답, 단계 8, 2차 메뉴 배경색 지정](https://codepen.io/jangka44/pen/RwGJody) - [정답, 단계 9, 2차 메뉴아이템 호버시 텍스트 효과](https://codepen.io/jangka44/pen/ExgRNJZ) - [정답, 단계 10, 사이트너비 정상화](https://codepen.io/jangka44/pen/vYXryMj) - 내용2 - [문제 - 회색사이트, 2차 드롭다운메뉴를 만들어주세요.](https://codepen.io/jangka44/pen/zYKaoWr) - [예시](https://codepen.io/jangka44/pen/ExgRNQK) - [정답, 단계 1, 메뉴박스 레이아웃](https://codepen.io/jangka44/pen/WNGyvNK) - [정답, 단계 2, 1차 메뉴아이템 호버시 텍스트 효과](https://codepen.io/jangka44/pen/oNzyYBY) - [정답, 단계 3, 1차 메뉴아이템 호버시 2차 메뉴 보여줌](https://codepen.io/jangka44/pen/jOMKVBd) - [정답, 단계 4, 2차 메뉴 유령화](https://codepen.io/jangka44/pen/yLaEVXW) - [정답, 단계 5, 2차 메뉴아이템텍스트 꾸미기](https://codepen.io/jangka44/pen/gOwKLWv) - [정답, 단계 6, 2차 메뉴너비 100%](https://codepen.io/jangka44/pen/oNzyYoZ) - [정답, 단계 7, 2차 메뉴 배경색 지정](https://codepen.io/jangka44/pen/bGwKBYm) - [정답, 단계 8, 2차 메뉴아이템텍스트 글자색 지정](https://codepen.io/jangka44/pen/JjRZbMb) - [정답, 단계 9, 2차 메뉴아이템 호버시 텍스트 효과](https://codepen.io/jangka44/pen/BaLVQJO) - [정답, 단계 10, 2차 메뉴아이템에 보더](https://codepen.io/jangka44/pen/ExgRNQK) - [정답, 단계 11, 사이트너비 정상화](https://codepen.io/jangka44/pen/JjRZbBE) - 내용3 - [개념 - 자바스크립트, 제이쿼리, next, prev](https://codepen.io/jangka44/pen/MWjXprX) - [시작](https://codepen.io/jangka44/pen/mdrLjmg) - [재생목록, 1차 ~ 3차 메뉴 만들기가 어려우면 보세요.](https://to2.kr/caz) - [재생목록, 반응형 웹사이트 구현이 궁금하면 보세요, float 활용](https://to2.kr/caA) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 회색 사이트, 메뉴바 구현, 드롭다운 - 3차 메뉴 - 내용1 - [개념 - 구글 웹 폰트](https://codepen.io/jangka44/pen/BaLVpyE) - [링크 - 구글 웹 폰트](https://fonts.google.com/) - 내용2 - [문제 - 3차 드롭다운메뉴를 만들어주세요.](https://codepen.io/jangka44/pen/vYXryMj) - [예시](https://codepen.io/jangka44/debug/dypKvyL) - [정답, 단계 11, 추가 마크업](https://codepen.io/jangka44/pen/jOMKyBb) - [정답, 단계 12, 서브메뉴 숨기기](https://codepen.io/jangka44/pen/WNGyRZQ) - [정답, 단계 13, 아이템 호버시, 자식메뉴 보이기](https://codepen.io/jangka44/pen/MWjXJOJ) - [정답, 단계 14, 서브메뉴 유령화](https://codepen.io/jangka44/pen/GRjGrOL) - [정답, 단계 13, 서브메뉴 배경색 지정](https://codepen.io/jangka44/pen/qBaKRpK) - [정답, 단계 14, 아이템을 유령의 집으로 지정](https://codepen.io/jangka44/pen/XWjYpZe) - [정답, 단계 15, 3차 메뉴 이상부터는 유령의 집 우측에 위치](https://codepen.io/jangka44/pen/NWRzdYG) - [정답, 단계 16, 3차 메뉴 이상부터는 너비를 자연스럽게 지정](https://codepen.io/jangka44/pen/bGwKgjV) - [정답, 단계 17, `Join` 아이템에 서브메뉴(소셜계정으로 가입, 일반가입) 추가](https://codepen.io/jangka44/pen/NWRzdEN) - [정답, 단계 18, 아이템텍스트에 줄바꿈 금지](https://codepen.io/jangka44/pen/RwGJKqm) - [정답, 단계 19, 2차 메뉴 아이템 텍스트 글자수 늘리기](https://codepen.io/jangka44/pen/rNMKjbJ) - [정답, 단계 20, 메뉴 아이템 텍스트에 flex 적용하여 넘치는것 방지](https://codepen.io/jangka44/pen/RwGJKOX) - [정답, 단계 21, 마지막 1차 메뉴 아이템에 3차메뉴까지 추가](https://codepen.io/jangka44/pen/OJREWey) - [정답, 단계 22, 마지막 1차 메뉴 아이템에 3차메뉴는 유령의 집 좌측에 위치](https://codepen.io/jangka44/pen/PoGaWMq) - [실험, 단계 1](https://codepen.io/jangka44/pen/dypKvoE) - [실험, 단계 2](https://codepen.io/jangka44/pen/QWKxpQa) - [정답, 단계 23, 4차 메뉴 추가](https://codepen.io/jangka44/pen/dypKvyL) - [정답, 단계 24, 영문텍스트만, 폰트를 Roboto로 변경](https://codepen.io/jangka44/pen/vYXrxJO) - 내용3 - [문제 - 회색사이트, 3차 드롭다운메뉴를 만들어주세요.](https://codepen.io/jangka44/pen/JjRZbBE) - [예시](https://codepen.io/jangka44/debug/bGwKqgq) - [정답](https://codepen.io/jangka44/pen/bGwKqgq) - 내용4 - [개념 - 자바스크립트, 제이쿼리, siblings](https://codepen.io/jangka44/pen/LYRrWQP) - [시작](https://codepen.io/jangka44/pen/mdrLjmg) - [재생목록, 1차 ~ 3차 메뉴 만들기가 어려우면 보세요.](https://to2.kr/caz) - [재생목록, 반응형 웹사이트 구현이 궁금하면 보세요, float 활용](https://to2.kr/caA) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - fixed와 before/after 그리고 트랜지션 심화(1) - 내용1 - [문제 - position:fixed;를 사용해서 스크롤바를 따라다니는 유령을 만들어주세요.](https://codepen.io/jangka44/pen/PxXwWX) - [예시](https://codepen.io/jangka44/debug/GwPgWY) - [정답](https://codepen.io/jangka44/pen/GwPgWY) - 내용2 - [문제 - `연예인` 뒤에 `님`을 붙이기](https://codepen.io/jangka44/pen/rNMKzwZ) - [정답](https://codepen.io/jangka44/pen/rNMKzmZ) - [문제 - `연예인` 앞에 `위대하신 `을 붙이기](https://codepen.io/jangka44/pen/XWjYagx) - [정답](https://codepen.io/jangka44/pen/xxEzLdB) - [문제 - before와 after에 display:block 처리](https://codepen.io/jangka44/pen/zYKadzM) - [정답](https://codepen.io/jangka44/pen/mdrKMwV) - 내용3 - [구현, 로딩바, 트랜지션 만들기, 작업 1](https://codepen.io/jangka44/pen/VXbrrX) - [구현, 로딩바, 트랜지션 만들기, 작업 2](https://codepen.io/jangka44/pen/RMVjxB) - [구현, 로딩바, 트랜지션 만들기, 작업 3](https://codepen.io/jangka44/pen/PRmOQX) - [구현, 로딩바, 트랜지션 만들기, 작업 4](https://codepen.io/jangka44/pen/geWXeZ) - 내용4 - [문제 - 너비가 늘어나는데 3초, 줄어드는데 1초가 걸리게 해주세요.](https://codepen.io/jangka44/pen/GRjGvyq) - [예시](https://codepen.io/jangka44/debug/RwwRpJr) - [정답](https://codepen.io/jangka44/pen/RwwRpJr) - 내용5 - [문제 - body에 마우스를 올리면 화면을 4등분하는 div가 나타날때 애니메이션 효과](https://codepen.io/jangka44/pen/zYBWNqB) - [정답 v1 예시](https://codepen.io/jangka44/debug/qBNoRZm) - [정답 v1](https://codepen.io/jangka44/pen/qBNoRZm) - [정답 v2 예시](https://codepen.io/jangka44/debug/LYZdxbj) - [정답 v2](https://codepen.io/jangka44/pen/LYZdxbj) - [정답 v3 예시](https://codepen.io/jangka44/debug/ExyEZZN) - [정답 v3](https://codepen.io/jangka44/pen/ExyEZZN) - 내용6 - [문제 - 호버시 활성화 되는 사이드 바](https://codepen.io/jangka44/pen/gOwKxvw) - [예시](https://codepen.io/jangka44/debug/qBaKXgB) - [정답, 단계 1, 사이드바 레이아웃](https://codepen.io/jangka44/pen/bGwKrLR) - [정답, 단계 2, 상태 아이콘 표시](https://codepen.io/jangka44/pen/GRjGvxj) - [정답, 단계 3, 호버상태에 따라 표시되는 상태아이콘 스위치](https://codepen.io/jangka44/pen/JjRZyLQ) - [정답, 단계 4, 메뉴 마크업](https://codepen.io/jangka44/pen/KKgeveo) - [정답, 단계 5, 메뉴에서 몇몇 서브메뉴 삭제](https://codepen.io/jangka44/pen/KKgevBR) - [정답, 단계 6, 서브메뉴 숨기고, 메뉴에 기본 디자인](https://codepen.io/jangka44/pen/GRjGvXN) - [정답, 단계 7, 호버시 펼쳐짐 예고하기](https://codepen.io/jangka44/pen/oNzyeag) - [정답, 단계 8, 서브메뉴 유령화](https://codepen.io/jangka44/pen/oNzyeJX) - [정답, 단계 9, 호버시에만 사이드바 노출, fixed](https://codepen.io/jangka44/pen/qBaKXgB) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - fixed와 before/after 그리고 트랜지션 심화(2) - 내용7 - [개념 - 자바스크립트, 제이쿼리, parent, children](https://codepen.io/jangka44/pen/PoGaKLj) - [시작](https://codepen.io/jangka44/pen/mdrLjmg) - 내용8 - [개념 - 자바스크립트, 제이쿼리, find](https://codepen.io/jangka44/pen/ZEpRJPV) - [시작](https://codepen.io/jangka44/pen/mdrLjmg) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 이미지 갤러리 사이트, 사이드바 만들기 1 - 기초 레이아웃 - 내용1 - 우측 갤러리 구현 - [예시](https://codepen.io/jangka44/debug/LYRrewp) - [작업 1, 마크업](https://codepen.io/jangka44/pen/rNMKGZO) - [작업 2, 기본 CSS 레이아웃](https://codepen.io/jangka44/pen/yLaEzZL) - [작업 3, float으로 한줄에 2개](https://codepen.io/jangka44/pen/dypKVqz) - [작업 4, 우측에 들어올 사이드바를 위해 갤러리 너비 줄이기](https://codepen.io/jangka44/pen/dypKVQV) - 내용2 - 아이콘 애니메이션 - [예시](https://codepen.io/jangka44/debug/LYRrewp) - [작업 1, 마크업](https://codepen.io/jangka44/pen/gOwKGEd) - [작업 2, 햄버거 아이콘](https://codepen.io/jangka44/pen/WNGyZPW) - [작업 3, 아이콘 애니메이션, 1부, 가운데 막대 회전](https://codepen.io/jangka44/pen/poEKWXo) - [작업 4, 아이콘 애니메이션, 2부, 가운데 막대가 좌측하단을 축으로 회전](https://codepen.io/jangka44/pen/vYXreqj) - [작업 5, 아이콘 애니메이션, 3부, 가운데 막대의 너비 짧아짐](https://codepen.io/jangka44/pen/abmKVoJ) - [작업 6, 아이콘 애니메이션, 4부, 세번째 막대가 올라감](https://codepen.io/jangka44/pen/eYdKGqZ) - [작업 7, 아이콘 애니메이션, 5부, 세번째 막대의 너비가 짧아짐](https://codepen.io/jangka44/pen/abmKVzW) - [작업 8, 아이콘 애니메이션, 6부, 세번째 막대가 오른쪽으로 정렬](https://codepen.io/jangka44/pen/mdrKqyG) - [작업 9, 아이콘 애니메이션, 7부, 세번째 막대 회전](https://codepen.io/jangka44/pen/xxEzPGr) - [작업 10, 아이콘 애니메이션, 8부, 세번째 막대가 우측하단을 축으로 회전](https://codepen.io/jangka44/pen/zYKaPvZ) - [작업 11, 아이콘 애니메이션, 9부, 첫번째 막대의 너비가 줄고 높이가 늘어남](https://codepen.io/jangka44/pen/PoGaOPV) - [작업 12, 아이콘 애니메이션, 10부, 첫번째 막대를 가운데 정렬 유지한 상태로, 너비 변경](https://codepen.io/jangka44/pen/YzGvEwv) - [작업 13, 아이콘 애니메이션, 11부, 각각의 2, 3번째 막대의 길이를 더 증가](https://codepen.io/jangka44/pen/bGwKYpP) - [작업 14, 아이콘 애니메이션, 12부, 첫번째 막대의 너비를 먼저 변경](https://codepen.io/jangka44/pen/rNMKYyy) - [작업 15, 아이콘 애니메이션, 13부, 돌아갈때는 첫번째 막대의 높이를 먼저 변경](https://codepen.io/jangka44/pen/RwGJjoe) - [작업 16, 아이콘 애니메이션, 14부, 트랜지션 듀레이션 변수화](https://codepen.io/jangka44/pen/WNGyXRN) - [작업 17, 아이콘 애니메이션, 15부, 크기조절](https://codepen.io/jangka44/pen/qBaKVrx) - 내용3 - [개념 - 자바스크립트, 제이쿼리, index, eq](https://codepen.io/jangka44/pen/abmKxax) - [시작](https://codepen.io/jangka44/pen/mdrLjmg) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 이미지 갤러리 사이트, 사이드바 만들기 2 - 텍스트효과 - 내용1 - 메뉴 레이아웃 - [예시](https://codepen.io/jangka44/debug/LYRrewp) - [작업 1, 마크업, 기본 CSS](https://codepen.io/jangka44/pen/VwKdrEq) - [작업 2, 아이콘 추가](https://codepen.io/jangka44/pen/gOwKXNO) - [작업 3, 아이콘에 외곽선](https://codepen.io/jangka44/pen/MWjXOxo) - [작업 4, 아이콘에 외곽선 둥글게](https://codepen.io/jangka44/pen/MWjXOME) - [작업 5, 아이콘을 박스안에서 수직, 수평중앙 정렬](https://codepen.io/jangka44/pen/gOwKXVb) - [작업 6, 아이콘과 우측 텍스트를 수직정렬](https://codepen.io/jangka44/pen/YzGvYym) - 내용2 - 형광 텍스트 효과 - [예시](https://codepen.io/jangka44/debug/LYRrewp) - [작업 1, 마크업](https://codepen.io/jangka44/pen/xxEzPzW) - [작업 2, 그림자](https://codepen.io/jangka44/pen/zYKaPaP) - [작업 3, 호버 애니메이션](https://codepen.io/jangka44/pen/NWRzwzG) - [작업 4, 형광효과](https://codepen.io/jangka44/pen/xxEzPPY) - [작업 5, 트랜지션 듀레이션 조절](https://codepen.io/jangka44/pen/MWjXOBp) - [작업 6, 글자 크기 조절](https://codepen.io/jangka44/pen/PoGaOdY) - 내용3 - [개념 - 자바스크립트, 제이쿼리, attr](https://codepen.io/jangka44/pen/GRjGaOO) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 이미지 갤러리 사이트, 사이드바 만들기 3 - 완성 - 내용1 - 우측 갤러리, 아이콘, 메뉴 레이아웃, 형광 텍스트 효과 병합 - [예시](https://codepen.io/jangka44/debug/LYRrewp) - [작업 1, 마크업, 기본 CSS](https://codepen.io/jangka44/pen/vYXrpGB) - [작업 2, 사이드바 호버시 너비 변동, 상태 아이콘 넣기](https://codepen.io/jangka44/pen/VwKdyjo) - [작업 3, 메뉴 넣기](https://codepen.io/jangka44/pen/mdrKpme) - [작업 4, exit 메뉴 아이템은 최하단에 위치](https://codepen.io/jangka44/pen/poEKpda) - [작업 5, 메뉴아이템에 형광효과 넣기](https://codepen.io/jangka44/pen/QWKxaqq) - [작업 6, 우측 갤러리 넣기](https://codepen.io/jangka44/pen/bGwKaLR) - 내용2 - 메뉴 완성하기 - [예시](https://codepen.io/jangka44/debug/LYRrewp) - [작업 1, 시작소스](https://codepen.io/jangka44/pen/bGwKaLR) - [작업 2, 메뉴 아이템 페이드 효과](https://codepen.io/jangka44/pen/PoGaEaW) - [작업 3, 메뉴 아이템 페이드 효과, 순차](https://codepen.io/jangka44/pen/RwGJxqR) - [작업 4, 메뉴 아이템 호버시 밑줄, 계속](https://codepen.io/jangka44/pen/abmKEPg) - [작업 5, 메뉴 아이템 호버시 밑줄](https://codepen.io/jangka44/pen/KKgeZEe) - [작업 6, 메뉴 아이템 호버시 아이콘 우측으로 살짝 이동](https://codepen.io/jangka44/pen/xxEzpeK) - 내용3 - 메뉴에 서브메뉴 적용 - [예시](https://codepen.io/jangka44/debug/LYRrewp) - [작업 1, 시작소스](https://codepen.io/jangka44/pen/xxEzpeK) - [작업 2, 서브메뉴 마크업](https://codepen.io/jangka44/pen/yLaEpdR) - [작업 3, 아이템 호버시, 서브메뉴 노출](https://codepen.io/jangka44/pen/LYRrewp) - 내용4 - [개념 - 자바스크립트, 제이쿼리, mouseenter, mouseleave](https://codepen.io/jangka44/pen/vYXrqNj) - [시작](https://codepen.io/jangka44/pen/GRjGaOO) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) ## 04 Query & Javascript 기초와 활용 - 변수, 출력, 조건문 - 내용1(출력) - [문제 - 콘솔에 1부터 50까지 출력해주세요.](https://codepen.io/jangka44/pen/dyXLZeZ?editors=0012) - [정답](https://codepen.io/jangka44/pen/eYzoerJ?editors=0012) - 내용2(숫자와 문장) - [개념 - 숫자와 문장](https://codepen.io/jangka44/pen/PozgEPg?editors=0012) - 내용3(변수) - [개념 - 변수](https://codepen.io/jangka44/pen/PozgEZv?editors=0012) - [문제 - 변수 a와 b의 값을 서로 교체해주세요.(변수 없이)](https://codepen.io/jangka44/pen/KBrYXP?editors=0012) - [정답](https://codepen.io/jangka44/pen/pZQBWo?editors=0012) - [문제 - 변수 a와 b의 값을 서로 교체해주세요.(temp 변수 활용)](https://codepen.io/jangka44/pen/MBzROw?editors=0012) - [정답](https://codepen.io/jangka44/pen/MBzROa?editors=0012) - 내용4(조건문) - [개념 - 조건문](https://codepen.io/jangka44/pen/wvWVMNb?editors=0012) - [문제 - age의 값에 따라서 성년인지 미성년인지 출력해주세요.](https://codepen.io/jangka44/pen/OBzmVw?editors=0012) - [정답](https://codepen.io/jangka44/pen/NOXjqe?editors=0012) - [문제 - if문 개념문제 - 실행되는 출력문에는 참 그렇지 않으면 거짓 이라고 적어주세요.](https://codepen.io/jangka44/pen/rNamKJP?editors=0012) - [정답](https://codepen.io/jangka44/pen/dyPWKQM?editors=0012) - [문제 - 할인 대상인지 아닌지 출력(|| 사용)](https://codepen.io/jangka44/pen/PowmaBj?editors=0012) - [정답](https://codepen.io/jangka44/pen/bGNWKZv?editors=0012) - [문제 - 할인 대상인지 아닌지 출력(&& 사용)](https://codepen.io/jangka44/pen/zYxwaaQ?editors=0012) - [정답](https://codepen.io/jangka44/pen/wvBdXOy?editors=0012) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 함수, 매개변수, 리턴 - 내용1(함수) - [개념 - 함수](https://codepen.io/jangka44/pen/OBoggj?editors=0012) - [문제 - 함수 3개를 정의하고 실행해주세요.](https://codepen.io/jangka44/pen/MPqoVL?editors=0012) - [정답](https://codepen.io/jangka44/pen/xyarjb) - 내용2(함수 매개변수) - [개념 - 함수 매개변수](https://codepen.io/jangka44/pen/WNxVPVR?editors=0012) - [문제 - 매번 다르게 인사하는 함수를 만들어주세요.](https://codepen.io/jangka44/pen/ePLENm?editors=0012) - [정답](https://codepen.io/jangka44/pen/rqZzVV?editors=0012) - 내용3(함수 반환) - [개념 - 함수 반환](https://codepen.io/jangka44/pen/RwGbLYd?editors=0012) - [개념 - typeof 함수](https://codepen.io/jangka44/pen/zmJzqb?editors=0012) - [문제 - 4칙연산 함수를 만들고 실행해주세요.](https://codepen.io/jangka44/pen/VEVqve?editors=0012) - [정답](https://codepen.io/jangka44/pen/OBaryg?editors=0012) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 객체 - 내용1(객체) - [개념 - 객체](https://codepen.io/jhs512/pen/Exgxaaz?editors=0012) - 내용2(this) - [개념 - this](https://codepen.io/jhs512/pen/qBaBEPb?editors=0012) - 내용3(반복문) - [개념 - 반복문, while](https://codepen.io/jangka44/pen/JjRmbvg?editors=0012) - [개념 - 반복문, for](https://codepen.io/jangka44/pen/MWjPbXq?editors=0012) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 제이쿼리 기초 - 내용1(팝업 만들기) - [작업 1, 첫번째 버튼에 클릭 이벤트 걸기](https://codepen.io/jangka44/pen/OJRBzdP) - [작업 2, 반복문 연습, 1부터 3까지 출력](https://codepen.io/jangka44/pen/dypgJaw) - [작업 3, 각각의 버튼에 클릭 이벤트 걸기](https://codepen.io/jangka44/pen/QWKZaoK) - [작업 4, 팝업 디자인, 2번째 팝업이 기본적으로 보이도록](https://codepen.io/jangka44/pen/oNzapVJ) - [작업 5, 어떤버튼을 눌러도, 2번째 팝업만 보여지도록](https://codepen.io/jangka44/pen/wvzYpbM) - [작업 6, 각 팝업에 닫기버튼 넣고, 해당 버튼에 클릭 이벤트 걸기](https://codepen.io/jangka44/pen/abmRErK) - [작업 7, 닫기 버튼을 누르면 해당 팝업이 종료되도록 처리](https://codepen.io/jangka44/pen/jOMeYgB) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 제이쿼리 이벤트 - 내용1(커스텀 커서, mousemove 함수) - [작업1, 커서 마크업](https://codepen.io/jangka44/pen/XWjxBeJ) - [작업2, mousemove 이벤트](https://codepen.io/jangka44/pen/ExgdpwV?editors=1111) - [작업3, e.clientX](https://codepen.io/jangka44/pen/BaLqPwV?editors=1111) - [작업4, 따라다님](https://codepen.io/jangka44/pen/poExZWB?editors=1111) - [작업5, 버튼클릭이 안됨](https://codepen.io/jangka44/pen/YzGJjEQ) - [작업6, pointer-events, 클릭가능](https://codepen.io/jangka44/pen/bGwmjYx) - [작업7, 기존 커서 숨기기](https://codepen.io/jangka44/pen/NWROBwO) - [작업8, 커서 둥글게](https://codepen.io/jangka44/pen/ExgdpoV) - [작업9, 커서 가운데 정렬, 작게 만들기](https://codepen.io/jangka44/pen/qBaJypa) - [작업10, 커서쉐도우 마크업](https://codepen.io/jangka44/pen/YzGJjYQ) - [작업11, 커서쉐도우도 따라다님](https://codepen.io/jangka44/pen/BaLqPJV) - [작업12, 커서쉐도우는 조금 천천히 따라다님](https://codepen.io/jangka44/pen/KKgGBZE) - [작업13, 커서가 멈춰야 쉐도우가 따라옴](https://codepen.io/jangka44/pen/MWjPBrN) - [작업14, 방금 전 작업 취소, 커서 디자인](https://codepen.io/jangka44/pen/vYXVade) - [작업15, 초기에 커서가 안보이도록 처리](https://codepen.io/jangka44/pen/BaLGyGB) - [작업16, .body-content 마크업](https://codepen.io/jangka44/pen/rNMqZrz) - [작업17, 커서에 블랙엔 화이트](https://codepen.io/jangka44/pen/dypgqjg) - [작업18, 커서가 커서쉐도우 위에 나오도록](https://codepen.io/jangka44/pen/wvzYEEB) - [작업19, 특정 요소에 마우스 올리면 커서가 커지도록](https://codepen.io/jangka44/pen/qBaJMMK) - [작업20, 특정 요소에 마우스 올리면 커서가 부드럽게 커지도록](https://codepen.io/jangka44/pen/bGwmxQV) - [작업21, 커서가 다시 나오도록](https://codepen.io/jangka44/pen/vYXVzQP) - [작업22, 커스텀 커서에 블렌드를 적용하여 내용을 가리지 않도록](https://codepen.io/jangka44/pen/bGwmxOV) - [작업23, 커서쉐도우 속도 조절, 커서 크기 조절](https://codepen.io/jangka44/pen/vYXQEqM) - [작업24, .body-content, min-height:100vh](https://codepen.io/jangka44/pen/XWjxxXq) - 내용2(밑줄 애니메이션, position 함수) - [작업1, 시작](https://codepen.io/jangka44/pen/gOwQpQw) - [작업2, 제이쿼리 불러오기](https://codepen.io/jangka44/pen/gOwQpqL) - [작업3, 기본 마크업](https://codepen.io/jangka44/pen/poEQJGV) - [작업4, 기본 레이아웃](https://codepen.io/jangka44/pen/JjRedxQ) - [작업5, 마우스엔터시 타켓 엘리먼트의 위치 알아내기](https://codepen.io/jangka44/pen/wvzQaZq) - [작업6, 마우스 엔터시 타켓 엘리먼트의 너비 알아내기](https://codepen.io/jangka44/pen/NWREqZw) - [작업7, section에 relative 처리를 해서, section 기준에서의 위치 구하기](https://codepen.io/jangka44/pen/JjRedgP) - [작업8, 밑줄 만들기](https://codepen.io/jangka44/pen/rNMQVXP) - [작업9, 마우스엔터시 타켓 엘리먼트가 있는 곳으로 밑줄 이동, 밑줄 너비도 조정](https://codepen.io/jangka44/pen/YzGRyKq) - [작업10, 밑줄 이동시, 타켓 엘리먼트 밑으로 위치](https://codepen.io/jangka44/pen/LYRXpYE) - [작업11, 밑줄 초기위치랑, 이동속력 수정](https://codepen.io/jangka44/pen/QWKJjWm) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 이미지 갤러리 사이트, 사이드바 만들기 4 - 제이쿼리 적용 - 내용1(아이콘 애니메이션) - [작업1, 시작](https://codepen.io/jangka44/pen/LYRrewp) - [작업2, 사이드바 활성시, 아이콘 scale 감소](https://codepen.io/jangka44/pen/RwGqWVV) - [작업3, scale 감소에 transition 적용](https://codepen.io/jangka44/pen/eYdQpWa) - [작업4, scale 감소와 동시에 회전까지](https://codepen.io/jangka44/pen/JjReYJY) - [작업5, 회전과 동시에, home 아이템을 가리키도록, top, left 조정](https://codepen.io/jangka44/pen/NWREGgz) - [작업6, 제이쿼리로 아이템 선택](https://codepen.io/jangka44/pen/OJRayjQ) - [작업7, 제이쿼리로 아이템 선택, 마지막 아이템 제외](https://codepen.io/jangka44/pen/abmQvLO) - [작업8, 아이템에 마우스엔터되면, 해당 아이템의 위치정보 출력](https://codepen.io/jangka44/pen/VwKVvMP) - [작업9, 마우스엔터시, 아이콘을 타켓 엘리먼트 근처로 이동](https://codepen.io/jangka44/pen/eYdQpGw) - [작업10, 마우스엔터시, 아이콘을 타켓 엘리먼트 근처로 이동, 위치 미세조정](https://codepen.io/jangka44/pen/vYXQNWm) - [작업11, 마우스리브시, 아이콘 위치 원상복구](https://codepen.io/jangka44/pen/XWjymVW) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 회색 사이트, 메뉴바 구현, 드롭다운 - 4차 메뉴, 제이쿼리 적용 - 내용1(이벤트 전파, stopPropagation, preventDefault) - [작업1, 레이아웃 및 클릭 이벤트](https://codepen.io/jangka44/pen/KKgrdjj) - [작업2, preventDefault](https://codepen.io/jangka44/pen/zYKMrGK) - [작업3, 클릭당하면 border-color가 red](https://codepen.io/jangka44/pen/WNGYrQB) - [작업4, 외부의 어떤 곳을 클릭하던, section 안쪽의 효과 모드 제거](https://codepen.io/jangka44/pen/vYXQLLj) - [작업5, section 수준에서 클릭 이벤트를 상부에 보고하지 않게 처리](https://codepen.io/jangka44/pen/LYRXGNz) - 내용2(서브메뉴를 클릭으로 활성화 시키기) - [작업1, 시작](https://codepen.io/jangka44/pen/bGwKqgq) - [작업2, 1차 아이템의 너비 넓히기](https://codepen.io/jangka44/pen/YzGRwGL) - [작업3, 자식메뉴를 품고 있는 아이템의 텍스트에는 + 기호 넣기](https://codepen.io/jangka44/pen/jOMQWVO) - [작업4, 호버시 + 기호를 - 로 변경](https://codepen.io/jangka44/pen/jOMQWyO) - [작업5, 아이템에 호버가 아닌, hover 클래스를 가져야 자식메뉴가 펼쳐지도록](https://codepen.io/jangka44/pen/xxEQZgr) - [작업6, 아이템 클릭시, hover 클래스 가지도록](https://codepen.io/jangka44/pen/GRjworY) - [작업7, 일부 hover 효과가 hover 클래스를 가질 때도 나오도록](https://codepen.io/jangka44/pen/dypQGvm) - [작업8, 메뉴 외 다른 부분을 클릭하면 모든 서브메뉴 펼쳐짐 비활성화](https://codepen.io/jangka44/pen/oNzQbyy) - [작업9, 1차 메뉴 수준에서 모든 클릭이벤트 전파 금지하여, 부작용 해결](https://codepen.io/jangka44/pen/WNGYrKv) - [작업10, 형제중에 이미 활성화된 아이템이 있다면, 형제아이템 비활성화](https://codepen.io/jangka44/pen/GRjwoEw) - [작업11, 내가 활성화 하려고 하는 아이템에 자식메뉴 제외한 다른 서브메뉴들 비활성화](https://codepen.io/jangka44/pen/qBaQbyo) - [작업12, 이전 작업의 부작용을 stopPropagation으로 해결](https://codepen.io/jangka44/pen/JjReGyO) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) ## 05 무조건 쓰이는 제이쿼리 플러그인 활용 - 스와이퍼 사용법 기초 - 내용1 - [스와이퍼 사용하는 방법](https://codepen.io/jangka44/pen/WNGPaNq) - `` - `` - 주의사항!!(아래 소스코드는 절대 사용하면 안됩니다. 위 소스코드를 사용해주세요.) - `` - `` - 내용2 - 이미지 슬라이더 만들기 - [작업1, 라이브러리 불러오고 적용](https://codepen.io/jangka44/pen/wvzNwya) - [스와이퍼 공식 사이트](https://swiperjs.com/) - [스와이퍼, 라이브러리](https://swiperjs.com/get-started/) - [스와이퍼, 데모](https://swiperjs.com/demos/) - [작업2, init 함수 만들기](https://codepen.io/jangka44/pen/jOMdNxV) - [작업3, 두번째 슬라이더에 swiper 적용](https://codepen.io/jangka44/pen/bGwzbxp) - [작업4, 슬라이드 높이 변경](https://codepen.io/jangka44/pen/KKgJPGW) - [작업5, 슬라이드에 색 넣기](https://codepen.io/jangka44/pen/OJRdLaV) - [작업6, 한 화면에 슬라이드 여러개](https://codepen.io/jangka44/pen/bGwzbZe) - [작업7, 슬라이드 사이에 여백](https://codepen.io/jangka44/pen/LYRqPaq) - [작업8, 좌, 우 버튼](https://codepen.io/jangka44/pen/VwKgZNO) - [작업9, loop](https://codepen.io/jangka44/pen/eYdxYOM) - [작업10, 좌, 우 버튼 위치 변경(실패)](https://codepen.io/jangka44/pen/jOMdOOw) - [작업11, 좌, 우 버튼관련 엘리먼트를 .swiper-container 밖으로](https://codepen.io/jangka44/pen/PoGVoNz) - .swiper-container 에 overflow:hidden; 이 걸려 있음 - [작업12, 슬라이더의 높이 줄이기](https://codepen.io/jangka44/pen/qBagBNG) - 슬라이더의 높이가 줄어도, 우 버튼이 따라오지 않음 - [작업13, .my-slider-box-1 에 relative](https://codepen.io/jangka44/pen/eYdxYdj) - .my-slider-box-1 에 position:relative 처리 - 해당 슬라이더 안의 요소가 슬라이더를 벗어나지 않도록 처리 - [작업14, 좌/우 버튼을 완전히 밑으로](https://codepen.io/jangka44/pen/XWjONjR) - .my-slider-box-1 에 padding-bottom 을 주어서, 좌/우 버튼이 들어갈 공간 확보 - [작업15, 좌/우 버튼에 유령화 풀기](https://codepen.io/jangka44/pen/rNMPWym) - .my-slider-box-1 에 padding-bottom 을 다시 제거 - 좌/우 버튼에 margin:0를 넣어서, 기존의 margin 제거 - [작업16, 좌/우 버튼을 가로로 배열](https://codepen.io/jangka44/pen/YzGBpZJ) - 좌 버튼을 왼쪽에, 우 버튼을 오른쪽에 - [작업17, 좌/우 버튼에 outline 없애고 사이즈 줄이기](https://codepen.io/jangka44/pen/qBagqjY) - 좌/우 버튼 자체에 걸려있던 height 제거 - 좌/우 버튼 ::after에 폰트 조절 - [작업18, 좌/우 버튼의 기존 디자인 버리고 다시 만들기](https://codepen.io/jangka44/pen/LYRqbjr) - css에서 선택자 변경 - .my-slider-box-1 .swiper-button-next - 위에서 아래와 같이 변경 - .my-slider-box-1 .my-slider-box-1__btn-right - js에서 navigation.prevEl 과 navigation.nextEl 값 변경 - [작업19, loop 제거시 .swiper-button-disabled 클래스 처리](https://codepen.io/jangka44/pen/JjRxENV) - 더 이상 슬라이드를 좌/우 버튼을 통해 넘길 수 없다면, 해당 버튼에 .swiper-button-disabled 클래스가 들어감 - [작업20, 좌/우 버튼을 아이콘으로 변경](https://codepen.io/jangka44/pen/gOwqRKg) - 폰트어썸 불러오기 - `` - `` - [작업21, 좌/우 버튼을 꾸미기](https://codepen.io/jangka44/pen/BaLMZqd) - display:flex; - align-items:center; - justify-content:center; - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 스와이퍼 사용법 응용 - 내용1 - 이미지 슬라이더 만들기(계속) - [작업22, css 라이브러리 추가](https://codepen.io/jangka44/pen/WNGPZwe) - 사이트 너비 600px - [작업23, 좌/우 버튼을 작게 만들고, 슬라이더 양옆에 위치](https://codepen.io/jangka44/pen/KKgJXQM) - 좌/우 버튼 - position:absolute; - right:calc(100% + 50px); - top:50%; - transform:translateY(-50%); - 우버튼 - right:auto; - left:calc(100% + 50px); - [작업24, 한 화면에 슬라이드 1개, 슬라이드에 이미지 넣기](https://codepen.io/jangka44/pen/abmXLej) - .my-slider-box-1 .swiper-slide { height:calc(50vh); } - 제거 - [작업25, 슬라이드 페이지 표시](https://codepen.io/jangka44/pen/jOMdaWw) - [작업26, 슬라이드 페이지를 상위 엘리먼트로 옮김](https://codepen.io/jangka44/pen/bGwzYeg) - [작업27, 슬라이드 페이지 꾸미기](https://codepen.io/jangka44/pen/xxEMPOm) - .my-slider-box-1 .swiper-pagination { position:static; display:flex; justify-content:center; } - [작업28, 슬라이드 페이지에 번호 넣기](https://codepen.io/jangka44/pen/gOwqjvw) - [작업29, 슬라이드 페이지에 기존 디자인 제거](https://codepen.io/jangka44/pen/yLaZqvj) - [작업30, 슬라이드 페이지 중 현재번호 활성화](https://codepen.io/jangka44/pen/GRjzBxq) - 활성화 : .swiper-pagination-bullet.swiper-pagination-bullet-active - [작업31, 페이지를 이미지로 변경](https://codepen.io/jangka44/pen/oNzmMQg) - 사이트너비를 1200px 로 변경 - [작업32, 페이지를 이미지를 꾸밈](https://codepen.io/jangka44/pen/wvzNxZr) - [작업33, 슬라이드에 제목 텍스트 추가](https://codepen.io/jangka44/pen/KKgJBOB) - [작업34, 제목 텍스트 꾸미기](https://codepen.io/jangka44/pen/OJRdoLx) - [작업35, 슬라이드가 활성화 될때 애니메이션](https://codepen.io/jangka44/pen/dypaqPM) - [작업36, autoplay](https://codepen.io/jangka44/pen/NWRoLxM) - [작업37, 꾸미기](https://codepen.io/jangka44/pen/yLaZxeG) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 게시물 슬라이더 1 - 레이아웃 - 내용1 - 배경화면 구현 - [작업1, 시작](https://codepen.io/jangka44/pen/YzGjzWL) - [작업2, 배경화면](https://codepen.io/jangka44/pen/vYXaYKr) - [작업3, sliderWrap 기초작업](https://codepen.io/jangka44/pen/gOwjOwQ) - [작업4, sliderWrap 꾸미기](https://codepen.io/jangka44/pen/zYKLYwZ) - [작업5, 슬라이더 박스 넣을 공간](https://codepen.io/jangka44/pen/VwKBwWd) - 내용2 - 이미지박스 구현 - [작업1, 시작](https://codepen.io/jangka44/pen/rNMrdgw) - [작업2, 슬라이더 레이아웃](https://codepen.io/jangka44/pen/QWKBBzb) - [작업3, 이미지박스 레이아웃](https://codepen.io/jangka44/pen/YzGjOPB) - [작업4, 이미지박스 꾸미기](https://codepen.io/jangka44/pen/WNGKgQw) - [작업5, 이미지 넣기](https://codepen.io/jangka44/pen/YzGjOyB) - [작업6, 이미지 사이즈 조절](https://codepen.io/jangka44/pen/RwGBYrm) - [작업7, 이미지 트랜지션](https://codepen.io/jangka44/pen/zYKLJBR) - [작업8, 이미지박스 트랜지션](https://codepen.io/jangka44/pen/NWRBLbr) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 게시물 슬라이더 2 - 애니메이션 효과 - 내용1 - 텍스트박스 추가 후, 레이아웃 작업 - [작업1, 시작](https://codepen.io/jangka44/pen/VwKBJjM) - [작업2, 텍스트박스를 이미지박스 우측으로](https://codepen.io/jangka44/pen/oNzMrze) - [작업3, 이미지박스의 너비가 줄어드는 것을 방지](https://codepen.io/jangka44/pen/ExgpBNg) - [작업4, 이미지박스를 수직중앙으로](https://codepen.io/jangka44/pen/dypjBOV) - 내용2 - 텍스트박스 구현 - [작업1, 이미지박스를 수직중앙으로](https://codepen.io/jangka44/pen/wvzxLoR) - [작업2, flex 적용](https://codepen.io/jangka44/pen/xxEJoqq) - [작업3, 세로로 배열, flex-direction:column](https://codepen.io/jangka44/pen/RwGBzpy) - [작업4, 각 라인에서 좌측정렬, align-items:flex-start](https://codepen.io/jangka44/pen/PoGBrpy) - [작업5, 로보토 폰트 적용](https://codepen.io/jangka44/pen/dypjBzJ) - [작업6, 텍스트 박스 요소 사이에 마진](https://codepen.io/jangka44/pen/qBayzXX) - [작업7, 날짜 텍스트 꾸미기](https://codepen.io/jangka44/pen/oNzMrwG) - [작업8, 제목 텍스트 꾸미기](https://codepen.io/jangka44/pen/GRjBbvX) - [작업9, 내용 텍스트 꾸미기](https://codepen.io/jangka44/pen/jOMpjGN) - [작업10, 버튼 꾸미기](https://codepen.io/jangka44/pen/eYdjwGZ) - [작업11, 텍스트박스에 여백](https://codepen.io/jangka44/pen/VwKBomg) - [작업12, 호버를 개별 슬라이드에 걸기](https://codepen.io/jangka44/pen/bGwjXgE) - [작업13, 텍스트박스의 요소들에게 트랜지션](https://codepen.io/jangka44/pen/LYRBwxg) - [작업14, 텍스트박스의 요소들에게 순차적 트랜지션](https://codepen.io/jangka44/pen/abmjeJK) - [작업15, 텍스트박스의 요소들 퇴장 애니메이션 없애기](https://codepen.io/jangka44/pen/bGwjXWp) - [작업16, 텍스트박스의 요소들 퇴장 애니메이션 주기](https://codepen.io/jangka44/pen/xxEJvrJ) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 게시물 슬라이더 3 - 스와이퍼 적용 - 내용1 - 스와이퍼 적용 - [작업1, 시작](https://codepen.io/jangka44/pen/VwKBwWd) - [작업2, 라이브러리 적용](https://codepen.io/jangka44/pen/XWjBvaE) - [작업3, 게시물 슬라이더 디자인 적용](https://codepen.io/jangka44/pen/PoGBMgz) - [작업4, 활성화 조건, hover 대신 swiper-slide-active 클래스로 교체](https://codepen.io/jangka44/pen/PoGdYwb) - [작업5, 페이지네이션 적용](https://codepen.io/jangka44/pen/OJRoLVp) - [작업6, 페이지네이션 디자인](https://codepen.io/jangka44/pen/GRjXKpj) - [작업7, 페이드 효과](https://codepen.io/jangka44/pen/ExgeYPJ) - [작업8, 여백 조정, 일단 제거](https://codepen.io/jangka44/pen/jOMvNqz) - [작업9, 여백 조정, 다시 넣기](https://codepen.io/jangka44/pen/VwKGZjv) - [작업10, 아이템 2, 3에 인물사진과 내용변경](https://codepen.io/jangka44/pen/KKgbOME) - [작업11, autoplay](https://codepen.io/jangka44/pen/YzGdmpQ) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - GSAP 기초 - 내용1 - GSAP 기초 - [작업 1, from ,to](https://codepen.io/jangka44/pen/eYdxaoG) - [작업 2, timeline](https://codepen.io/jangka44/pen/GRjzaLV) - [작업 3, fromTo](https://codepen.io/jangka44/pen/MWjLddo) - [작업 4, stagger](https://codepen.io/jangka44/pen/XWjOwwV) - [작업 5, 텍스트애니메이션1, 단계 1, 레이아웃](https://codepen.io/jangka44/pen/dyprZgb) - [작업 6, 텍스트애니메이션1, 단계 2, 밑에서 위로 올라오는](https://codepen.io/jangka44/pen/qBavVMG) - [작업 7, 텍스트애니메이션1, 단계 3, 위로 사라지는](https://codepen.io/jangka44/pen/poEoxPo) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - GSAP 사용법과 응용 - 내용1 - GSAP 유성효과 - [작업 1, 필드](https://codepen.io/jangka44/pen/OJRdeLV) - [작업 2, 유성 만들기, 단계 1, 메테오 필드, 메테오 레이아웃](https://codepen.io/jangka44/pen/NWRoZWr) - [작업 3, 유성 만들기, 단계 2, 메테오 내부를 3가지의 막대로 채우기](https://codepen.io/jangka44/pen/ZEpwdYa) - [작업 4, 유성 만들기, 단계 3, 위/아래 막대의 너비를 짧게 조정](https://codepen.io/jangka44/pen/gOwqNpb) - [작업 5, 유성 만들기, 단계 4, 메테오 크기변경](https://codepen.io/jangka44/pen/XWjOLbE) - [작업 6, 유성 만들기, 단계 5, 메테오 회전](https://codepen.io/jangka44/pen/poEGXjw) - [작업 7, 유성 hover 애니메이션, transform 속성값들의 순서가 중요](https://codepen.io/jangka44/pen/poEGXgw) - [작업 8, 유성 gsap 애니메이션, 단계 1, to, 1회](https://codepen.io/jangka44/pen/vYXbqeE) - [작업 9, 유성 gsap 애니메이션, 단계 2, timeline, 반복](https://codepen.io/jangka44/pen/WNGPqZO) - [작업 10, 유성 gsap 애니메이션, 단계 3, 유성 여러개 만들기](https://codepen.io/jangka44/pen/rNMRpNo) - [작업 11, 유성 gsap 애니메이션, 단계 4, 유성의 형태 다양화](https://codepen.io/jangka44/pen/zYKbpYb) - [작업 12, 유성 gsap 애니메이션, 단계 5, 유성의 시작시점 다양화](https://codepen.io/jangka44/pen/qBavWLK) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - GSAP 스크롤트리거 플러그인 기초 - 내용1 - GSAP 스크롤트리거 기초 - [작업 1, to, box-1](https://codepen.io/jangka44/pen/zYKbjVr) - [작업 2, to, box-1, box-3 동시에](https://codepen.io/jangka44/pen/ExgMLBK) - [작업 3, scrollTrigger, box-3은 발견되면 활성화](https://codepen.io/jangka44/pen/abmMGgZ) - [작업 4, toggleAction, 내려가면서 발견되면 재시작, restart](https://codepen.io/jangka44/pen/JjRzvQb) - [작업 5, toggleAction, 안보일때까지 더 내려가면, pause](https://codepen.io/jangka44/pen/qBavYzR) - [작업 6, toggleAction, 올라가면서 발견되면 재개, resume](https://codepen.io/jangka44/pen/LYRamKW) - [작업 7, toggleAction, 올라가면서 발견되면 역재생, reverse](https://codepen.io/jangka44/pen/oNzVdrW) - [작업 8, markers](https://codepen.io/jangka44/pen/oNzVyxe) - [작업 9, start: top center](https://codepen.io/jangka44/pen/JjRzZKN) - [작업 10, start: top 30%](https://codepen.io/jangka44/pen/ZEpPRBb) - [작업 11, start: top 90%](https://codepen.io/jangka44/pen/oNzVyYG) - [작업 12, start: top 100px](https://codepen.io/jangka44/pen/KKgEeaP) - [작업 13, start: top +=200px](https://codepen.io/jangka44/pen/BaLbVpM) - [작업 14, start: top bottom](https://codepen.io/jangka44/pen/WNGmygb) - [작업 15, start: top 100%-=200px](https://codepen.io/jangka44/pen/YzGgvOO) - [작업 16, start: top top](https://codepen.io/jangka44/pen/NWRJzOW) - [작업 17, start: center center](https://codepen.io/jangka44/pen/jOMJKQb) - [작업 18, end: center center](https://codepen.io/jangka44/pen/YzGgvRJ) - [작업 19, scrub: true](https://codepen.io/jangka44/pen/zYKbaed) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - GSAP 스크롤트리거 플러그인 응용 - 내용1 - GSAP 스크롤트리거 응용 - [작업 1, 이미지 2개](https://codepen.io/jangka44/pen/BaLbOKd) - [작업 2, 레이아웃](https://codepen.io/jangka44/pen/JjRzaKP) - [작업 3, 라이브러리 불러오기](https://codepen.io/jangka44/pen/RwGdYGo) - [작업 4, 이미지 이동 애니메이션](https://codepen.io/jangka44/pen/wvzOEzP) - [작업 5, 스크롤트리거 적용](https://codepen.io/jangka44/pen/yLawxVR) - [작업 6, 마커표시](https://codepen.io/jangka44/pen/BaLbOpw) - [작업 7, enter시 restart, start 조정](https://codepen.io/jangka44/pen/MWjxqJz) - [작업 8, leaveBack 시에, reverse](https://codepen.io/jangka44/pen/wvzOEJp) - [작업 9, 타임라인으로 변경 후 이미지 2개에 애니메이션](https://codepen.io/jangka44/pen/KKgExWx) - [작업 10, 두번째 애니메이션의 발동시점을 앞당김, 스크롤바 제거](https://codepen.io/jangka44/pen/RwGdYVK) - [작업 11, scrub 적용, end 조정](https://codepen.io/jangka44/pen/vYXPVYW) - [작업 12, 애니메이션 중일 때 배경색 변경](https://codepen.io/jangka44/pen/xxEBywR) - [작업 13, onEnter 시에 배경색 변경, onLeaveBack 시에 배경색 원상복구](https://codepen.io/jangka44/pen/gOwEBPj) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 천천히 나타나는 상품리스트 1 - 레이아웃 - 내용1 - 로고바 - [작업 1, 레이아웃](https://codepen.io/jangka44/pen/poEYqXm) - [작업 2, 로고](https://codepen.io/jangka44/pen/ZEpPwGY) - 내용2 - 메뉴바 - [작업 1, 마크업](https://codepen.io/jangka44/pen/LYRaqrQ) - [작업 2, 레이아웃](https://codepen.io/jangka44/pen/xxEBMJX) - 내용3 - 타이틀 바 - [작업 1, 마크업](https://codepen.io/jangka44/pen/poEYGME) - 내용4 - 스와이퍼 - [작업 1, 마크업](https://codepen.io/jangka44/pen/wvzOOwv) - [작업 2, 페이지, 좌/우 버튼 꾸미기](https://codepen.io/jangka44/pen/eYdoNLd) - [작업 3, 상품명 꾸미기](https://codepen.io/jangka44/pen/YzGMXMO) - [작업 4, 이미지 애니메이션](https://codepen.io/jangka44/pen/LYRvpYr) - [작업 5, 상품명 애니메이션](https://codepen.io/jangka44/pen/MWjRawp) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 천천히 나타나는 상품리스트 2 - 애니메이션 효과 - 내용1 - 상품리스트아이템 이미지 - [작업 1, 마크업](https://codepen.io/jangka44/pen/WNGWzZx) - [작업 2, 필터](https://codepen.io/jangka44/pen/vYXMReM) - [작업 3, 텍스트](https://codepen.io/jangka44/pen/mdrgxqZ) - [작업 4, hover시 이미지 scale 업](https://codepen.io/jangka44/pen/yLarKxo) - [작업 5, hover시 필터와 텍스트 페이드인](https://codepen.io/jangka44/pen/xxEejVe) - 내용2 - 상품리스트 - [작업 1, 레이아웃](https://codepen.io/jangka44/pen/RwGOWGO) - [작업 2, 아이템들을 가로로 배열](https://codepen.io/jangka44/pen/jOMRYrY) - [작업 3, margin으로 아이템 사이 여백](https://codepen.io/jangka44/pen/VwKNyaY) - [작업 4, padding으로 아이템 사이 여백](https://codepen.io/jangka44/pen/KKgYZZB) - [작업 5, box-sizing:border-box;](https://codepen.io/jangka44/pen/YzGMYpy) - [작업 6, 음수마진으로 ul의 너비를 부모보다 20px 늘리기](https://codepen.io/jangka44/pen/oNzOpEj) - [작업 7, 상품리스트아이템 이미지 디자인 적용](https://codepen.io/jangka44/pen/jOMRxev) - [작업 8, 상품명, 가격, 아이템 상단 여백 및 cursor:pointer](https://codepen.io/jangka44/pen/mdrgLam) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 천천히 나타나는 상품리스트 3 - 스크롤트리거 적용 - 내용1 - 병합 - [작업 1, 로고바와 메뉴바 병합](https://codepen.io/jangka44/pen/mdrgKyB) - [작업 2, 상단 스와이퍼 병합](https://codepen.io/jangka44/pen/mdrgKrp) - [작업 3, 상품리스트 병합](https://codepen.io/jangka44/pen/vYXMrJp) - 내용2 - 스크롤 트리거 적용 - [작업 1, 스크롤 트리거 적용](https://codepen.io/jangka44/pen/vYXMaBV) - [작업 2, 스크롤 트리거 적용, 개별 아이템](https://codepen.io/jangka44/pen/poEBZQr) - [작업 3, 스크롤 트리거 적용, 개별 아이템, for](https://codepen.io/jangka44/pen/gOwyjqp) - [작업 4, 스크롤 트리거 적용, 개별 아이템, each](https://codepen.io/jangka44/pen/QWKPBov) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) ## 06 FLEX, 그리고 다양한 팁 - FLEX 개념 - 내용1 - 튜토리얼 - [flex 개구리](https://flexboxfroggy.com/#ko) - [flex 디펜스](http://www.flexboxdefense.com/) - 내용2 - flex playground - [flex playground](https://codepen.io/enxaneta/pen/adLPwv) - 내용3 - flex 레이아웃 만들기 시작 - [예제 1](https://codepen.io/jangka44/pen/KKprqVJ) - 내용 - 전체 레이아웃 - display:flex; - flex-direction:column; - [예제 2](https://codepen.io/jangka44/pen/gOpQRro) - 내용 - 푸터 레이아웃 - display:flex; - justify-content:center; - [예제 3](https://codepen.io/jangka44/pen/poJQwNB) - 내용 - 중단 레이아웃 - [예제 4](https://codepen.io/jangka44/pen/wvaQeWX) - 내용 - 중단 레이아웃(마크업) - [예제 5](https://codepen.io/jangka44/pen/ZEGmyez) - 내용 - 중단 레이아웃(CSS) - [예제 6](https://codepen.io/jangka44/pen/PoqxjOa) - 내용 - 중단 레이아웃(CSS) - flex-grow:1 or 0; - [예제 7](https://codepen.io/jangka44/pen/ZEGmyrY) - 내용 - 전체 레이아웃(CSS) - min-height-100vh; - [예제 8](https://codepen.io/jangka44/pen/VwLVWXM) - 내용 - 전체 레이아웃(CSS) - flex-grow:1 or 0; - [예제 9](https://codepen.io/jangka44/pen/BaNGZrq) - 내용 - 전체 레이아웃(CSS) - 화면의 너비를 천천히 줄여보세요. - [예제 10](https://codepen.io/jangka44/pen/dyoQRjV) - 내용 - 전체 레이아웃(CSS) - flex-shrink:1 or 0; - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - flex로 구현하기 1 - 탑바 - 내용1 - [문제 - flex로 메뉴 만들기](https://codepen.io/jangka44/pen/yLaWGGq) - [예시](https://codepen.io/jangka44/debug/qBdQXxy) - [정답](https://codepen.io/jangka44/pen/qBdQXxy) - 내용2 - [문제 - flex로 애플 메뉴 만들기](https://codepen.io/jangka44/pen/vYXwvbG) - [예시](https://codepen.io/jangka44/debug/JjRQqZY) - [힌트, 아이콘 사용법](https://codepen.io/jangka44/pen/oNLzOYr) - [힌트, 레이아웃](https://codepen.io/jangka44/pen/bGExQVv) - [정답](https://codepen.io/jangka44/pen/JjRQqZY) - [정답, v2](https://codepen.io/jangka44/pen/VwKJOqp) - .con 적용 - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - flex로 구현하기 2 - developer 사이트 상단바 - 내용1 - [문제 - developer 사이트 상단를 flex로 구현](https://codepen.io/jangka44/pen/abmGNZZ) - [정답](https://codepen.io/jangka44/pen/poEmQeg) - [정답 v2](https://codepen.io/jangka44/pen/JjRQQjb) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - flex로 구현하기 3 - 이미지 갤러리 사이트, 사이드바 - 내용1 - [문제 - 이미지 갤러리 사이트, 사이드바를 flex로 구현](https://codepen.io/jangka44/pen/XWjymVW) - [정답](https://codepen.io/jangka44/pen/RwGmEGw) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - flex로 구현하기 4 - 천천히 나타나는 상품리스트 - 내용1 - [문제 - 천천히 나타나는 상품리스트를 flex로 구현](https://codepen.io/jangka44/pen/QWKPBov) - [정답](https://codepen.io/jangka44/pen/VwKOqpo) - [absolute로 수직/수평 중앙](https://codepen.io/jangka44/pen/eYdwwjB) - [flex로 수직/수평 중앙](https://codepen.io/jangka44/pen/ZEpddjp) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - GITHUB PAGES를 이용한 사이트 배포 - 내용1 - GITHUB PAGES를 이용한 사이트 배포 - [GITHUB DESKTOP 다운로드](https://desktop.github.com/) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 더 알아야 할 내용들 1 - margin 상쇄 - 내용1 - [형/동생 사이의 margin-top/margin-bottom 상쇄](https://codepen.io/jangka44/pen/dypxEZo) - [부모/자식 사이의 margin-top/margin-bottom 상쇄](https://codepen.io/jangka44/pen/vYXowWG) - 내용2 - [4등분 펼쳐지는 배경 예제 활용법](https://codepen.io/jangka44/pen/ExNYNez) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 더 알아야 할 내용들 2 - 고정비율 엘리먼트 - 내용1 - [고정 비율 엘리먼트와 활용](https://codepen.io/jangka44/pen/ExNYZyj) - 내용2 - [4등분 펼쳐지는 배경 예제를 깃허브페이지에 업로드](https://codepen.io/jangka44/pen/ExNYNez) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 더 알아야 할 내용들 3 - 유용한 도구들 - 내용1 - [코드펜](https://codepen.io/) - [vscode](https://code.visualstudio.com/) - [깃허브](https://github.com/) - [코드샌드박스](https://codesandbox.io/) - [웹 그라디언트](https://webgradients.com/) - [겟아바타스](https://getavataaars.com/) - [GDWEB](http://www.gdweb.co.kr/main/) - [RWDB](http://rwdb.kr/) - [DBCUT](https://www.dbcut.com/) - [카카오오븐](https://ovenapp.io/) - [피그마](https://www.figma.com/) - [포스트이미지](https://postimages.org/ko/) - [제플린](https://zeplin.io/) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) - 더 알아야 할 내용들 4 - 다양한 단위 - 내용1 - [다양한 단위](https://codepen.io/jangka44/pen/zYoOaLb) - 내용2 - [글자가 천천히 내려가는 예제](https://codepen.io/jangka44/pen/BaQBVVR) - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [강사가 추천하는, 무조건 해야하는, 최고의 웹코딩 공부법](https://to2.kr/bts) ## OUTRO 완강을 축하합니다! - 이제 당신도 웹을 다루는 능력자에요! - 내용1 - [어느정도 준비되면 시작하세요, 카카오뱅크 메인페이지 모작코딩](https://to2.kr/caD) - [수업이후 공부하는 방법, to2.kr/bts](https://to2.kr/bts) --- # 유용한 링크 - [기존 시작소스 1](https://to2.kr/bWo)