$$config title: 수업페이지 초안 keywords: - 22.07.09 주말 $$
# 자바스크립트와 제이쿼리 기초
## 개요 - 개강: 2022년 07월 09일 - 페이지: slog.gg/p/8089
## 강사정보 - 강사: 김혜지 - 연락처: 010-4372-1301
## 수업안내 - 수업 시작: 12:00 ~ - 쉬는시간1: 12:50 ~ 13:00 - 쉬는시간2: 13:50 ~ 14:00 - 수업 종료: 14:50
## 관련주소 - 새 펜 열기 : [codepen.io/pen](https://codepen.io/pen) - 폰트어썸 : [to2.kr/dPB](https://to2.kr/dPB) - 주소 줄이기: [to2.kr](https://to2.kr/) - cdnjs : [cdnjs.com](https://cdnjs.com/) - 이미지 호스팅 : [postimages.org](https://postimages.org/)
## 유용한 팁 - VS코드 설치 : [바로가기](https://slog.gg/p/810) - VS코드 안열릴때 : [바로가기](https://slog.gg/p/398) - 없어지지않는 부분모작 이미지 : [바로가기](https://slog.gg/p/83) - Tailwind 사용시 font 적용법 : [바로가기](https://slog.gg/p/538)
## [목차] 2022.07.16(토) 3일차 - 출석체크 - 목차안내 - 복습
# 기초 ## 1강 - 자바스크립트 개요 - codepen세팅
## 2강 : comsole.log(""); - 개념 : [console 개념](https://codepen.io/jangka44/pen/jOBGrvO?editors=0012) - 자료 : [console창 용도](https://cdpn.io/pen/debug/wvmGmPY?authentication_hash=xnMabBJLxxpr) - Q&A - 콘솔창 → 눈에 보이지않는 프로그램 내부정보(진행여부)를 확인할 수 있도록 도와주는 창 - clear → 모든 JS 정보가 사라지는 버튼 - console.log(""); → ""안에 내용을 consol창에 띄워주는 코드 - console.clear(); → 바로 적용되는 codepen특성 보완 - 오류가 있는 상태 → 붉은 오류 창은 남고, 반복되는 현상 삭제 - 오류가 없는 상태 → 붉은 오류 창과, 반복되는 현상 삭제 - 자바스크립트 실행시 → 위에서부터 차례대로 실행 -
## 3강 : 단축기 연습 - 마우스를 쓰지 않는것이 중요합니다. - 문제 : [콘솔에 1부터 50까지 출력해주세요.](https://codepen.io/jangka44/pen/jOBGrvO?editors=0012) - 정답 : [확인](https://codepen.io/jangka44/pen/eYzoerJ?editors=0012) - Q&A - 마우스 사용 최소화 → 작업 속도 향상을 위해 필수 - 단축기는 노트북마다 다를 수 있습니다 - Home → 앞줄로 - End → 뒷줄로 - Ctrl + Home → 최상단 - Ctrl + End → 최하단 - Ctrl + C → 선택영역 복사 - Ctrl + X → 선택영역 잘가내기 - Ctrl + V → 붙여넣기 - Ctrl + A → 전체선택 - Ctrl + Z → 이전 히스토리로 한 단계 이동 - Ctrl + Y → 이후 히스토리로 한 단계 이동 - Shift + 키보드 이동 → 글 선택 - Shift + 영문 소문자 입력 → 대문자 입력
## 4강 : 숫자와 문장 - 개념 : [숫자와 문장](https://codepen.io/jangka44/pen/bGqoeZX?editors=0012) - Q&A - 숫자는 ""를 붙이지 않는다 - 프로그램은 앞에서부터 시작한다 - 문자와 숫자를 같은 식에 사용할경우 결이 다르기 때문에 숫자를 문자화 한다 - * / () 등은 사칙연산처럼 먼저 실행된다 - 숫자에 "" → 문자화
## 5강 : 변수 - 개념 : [변수](https://codepen.io/kimhyeji324/pen/RwMRbEG?editors=0011) - Q&A - 자바스크스립트는 크게 변수와 값 2개로 이루어져있다 - 값은 문장과 숫자 2개로 이루어져있다 - 변수의 값은 1개만 선언할 수 있다 - 같은 변수명은 사용할 수 없다 - 숫자는 변수로 사용할 수 없다 - 변수의 값은 계속 수정할 수 있다 ex) [예시 코드](https://codepen.io/jangka44/pen/oNZGzoJ?editors=0012) - let x; → 변수 선언 - 변수는 x다 - x = 10; → 변수안에 값 넣기 - 변수 x의 값는 10이다 - "x" → 문자 x - 위 변수 x와는 다르다. 즉 변수가 아니라는 말
## 6강 : 변수 - 개념 : [변수의 해석](https://codepen.io/jangka44/pen/oNZGzoJ?editors=0012)
## 7강 : 변수 - *배웠던 내용을 활용 해주세요* - 문제 : [변수 a와 b의 값을 서로 교체해주세요.(변수 없이)](https://codepen.io/jangka44/pen/KBrYXP?editors=0012) - 정답 : [확인](https://codepen.io/jangka44/pen/pZQBWo?editors=0012)
## 8강 : 변수 - *배웠던 내용과 아래 풀이를 활용 해주세요* - 문제 : [변수 a와 b의 값을 서로 교체해주세요.(temp 변수 활용)](https://codepen.io/jangka44/pen/MBzROw?editors=0012) - 오답 : [오답 예시](https://codepen.io/kimhyeji324/pen/WNzxNeJ?editors=1111) - 풀이 →자바스크립트는 위에서부터 차례로 실행 → let a = 10; - 지금 a는 10 → let b = 5; - 지금 b는 5 → a = b; - 변수a에 다시 값을 넣는 형태 즉, a는 변수 b의 값인 5로 바뀌었다. 지금 a는 5 → b = a; - 가장 위에 있는 변수 a 값이 들어가는것이 아닌 바로 윗줄에 있는 b로 인해 바뀐 a에 값이 들어가게 된다. 지금 b는 a와 같은 5 - 정답 : [확인]()
## 9강 : 제이쿼리 링크와 식 - 개념 : [제이쿼리](https://codepen.io/kimhyeji324/pen/yLKJLMr?editors=1111) - - 자료 : [제이쿼리 가져오는 순서](https://cdpn.io/pen/debug/oNqLNjx?authentication_hash=XBkGRNWQLKRA) - 문제 : [도형을 css가 아닌 제이쿼리로 디자인을 해주세요](https://codepen.io/kimhyeji324/pen/mdxEdWB) - 정답 : [확인](https://codepen.io/jangka44/pen/BaWwQzR) - Q&A - 제이쿼리 식 → $('엘리먼트').css("css코드'', 변수명); - 제이쿼리 링크 → https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
## 10강 : If문 - 개념 : [조건문, if](https://codepen.io/jangka44/pen/MWpOLRq?editors=0012) - Q&A - if문은 참과 거짓으로 이루어져있다 - 조건문 식 → if ( ) {}
## 11강 : else - 개념 : [조건문, if, else if, else](https://codepen.io/jangka44/pen/ExWbMaq?editors=0012) - Q&A - 참이 나온 후 다음식에서 else를 사용하였다면 다음 식이 참이여도 그 코드는 실행되지 않는다 - else 사용 후 새로운 참 if문을 만들고 싶다면 if문을 새로 만든다 - else 다음 ()는 생략하여 쓸 수 있다 ex) if ( 변수 부호 값 ) { } else { }
## 12강 : if문과 else - 문제 : [age의 값에 따라서 성년인지 미성년인지 출력해주세요.](https://codepen.io/jangka44/pen/OBzmVw?editors=0012) - 정답 : [확인](https://codepen.io/jangka44/pen/NOXjqe?editors=0012) - 개념 : [나이에 다른 연령대 출력](https://codepen.io/jangka44/pen/poedYBM?editors=0012) ## 13강 : If문 - 문제 : [if문 개념문제, 실행되는 출력문에는 참 그렇지 않으면 거짓 이라고 적어주세요.](https://codepen.io/jangka44/pen/rNamKJP?editors=0012) - 정답 : [확인](https://codepen.io/jangka44/pen/dyPWKQM?editors=0012)
## 14강 : 함수 - 개념 : [함수](https://codepen.io/jangka44/pen/yLMPryy?editors=0012) - Q&A - 같은 함수명은 없다 - 함수 식 → function 함수명() {} - 함수 실행 → 함수명(); *적지않으면 함수 실행x*
## 15강 : button엘리먼트와 onclick - button엘리먼트 이해와, 함수 변수를 이용하여 간단한 버튼 작동 알아보기 - 개념 : [onclick 속성](https://codepen.io/jangka44/pen/KKWyYzK?editors=1111) - 개념풀이 : [onclick 속성 코드 풀이](https://slog.gg/p/8377) - 개념풀이 예시: ![원본이미지](https://i.postimg.cc/mgCdrcNt/Group-8.jpg) - 예시 : [팝업 최종 목표](https://cdpn.io/pen/debug/rNyrKzB) - Q&A - < button onclick="console.log('');"> < /button > → 버튼을 눌렀을때 콘솔을 실행할 수 있다. - < button onclick="함수명();" >< /button > → 버튼을 눌렀을때 함수를 실행할 수 있다. - / → 나눈 '몫'이 나온다 - % → 나눈 '나머지'가 나온다
## 16강 : 짝수와 홀수 이용한 If문 - 변수에 값을 다시 설정하여 참과 거짓이 반복되는 형식 알아보기 - 문제 : [클릭할때 마다 배경색 변경, no 변수로 구분](https://codepen.io/jangka44/pen/NWpXXWo) - 예시 : [보기](https://cdpn.io/pen/debug/YzZYYPE) - 정답 : [확인](https://codepen.io/jangka44/pen/YzZYYPE) - Q&A - no++; → no += 1; 와 no = no + 1; 모두 같은 말이다.
## 17강 : ! 활용한 If문 - 변수값에 홀수, 짝수를 이용하지 않고 문자로 참과 거짓이 반복되는 형식 알아보기 - 문제 : [클릭할때 마다 배경색 변경, isRed 변수로 구분](https://codepen.io/jangka44/pen/ZEevvYY) - 예시 : [보기](https://cdpn.io/pen/debug/RwpxxNQ) - 정답 : [확인](https://codepen.io/jangka44/pen/RwpxxNQ) - 정답풀이 : 변수값을 반전시키면서 if문이 반복될 수 있도록 한다. - ![원본이미지](https://i.postimg.cc/cCM8tSCy/Group-22.jpg)
## 18강 : click이벤트 if문 - onclick대신 click이벤트 사용하는 button 알아보기 - 문제 : [어떤 버튼을 눌러도 배경색이 바뀌도록](https://codepen.io/jangka44/pen/MWprrBj) - 예시 : [보기](https://cdpn.io/pen/debug/oNZppPd) - 정답 : [확인](https://codepen.io/jangka44/pen/oNZppPd) - 정답풀이 : JS에서 click이벤트를 사용하여 엘리먼트 또는 clsss를 콕 집어 onclick을 사용하지 않아도 배경색을 변경할 수 있다. - ![원본이미지](https://i.postimg.cc/YCfbBvHk/Group-25.jpg) - Q&A - onclick 대신 $('엘리먼트 or class').click(함수명); 를 쓸 수 있고, 더욱 좋은 코드이다.
## 00강 : preventDefault - 개념과 문제 : [preventDefault](https://codepen.io/jangka44/pen/XWMYKeZ)
## 00강 : alert, confirm - 개념 : [alert, confirm](https://codepen.io/jangka44/pen/OJpEXzV?editors=0012) - 문제 : [삭제하기전에 물어봐주세요.](https://codepen.io/jangka44/pen/OJpEXzV?editors=0012) - 예시 : [보기](https://cdpn.io/pen/debug/eYvKzKV) - 정답 : [확인](https://codepen.io/jangka44/pen/eYvKzKV)
# 팝업 ## 19강 : 팝업 Ver.1 열기 - click이벤트 사용하는 button으로 css팝업열기 - 문제 : [팝업1 구현, 팝업열기](https://codepen.io/jangka44/pen/QWpaQwE) - 예시 : [보기](https://cdpn.io/pen/debug/XWMVZJz) - 정답 : [확인](https://codepen.io/jangka44/pen/XWMVZJz)
## 20강 : 팝업 Ver.1 닫기 - click이벤트 사용하는 button으로 css팝업닫기 - 문제 : [팝업1 구현, 팝업닫기](https://codepen.io/jangka44/pen/QWpaQwE) - 예시 : [보기](https://codepen.io/jangka44/pen/QWpaQEK) - 정답 : [확인](https://codepen.io/jangka44/pen/QWpaQEK)
## 21강 : mouseenter, mouseleave - 다양한이벤트 사용해서 팝업 열고 닫기 - 문제 : [팝업1 구현, mouseenter로 팝업열기, mouseleave로 팝업닫기](https://codepen.io/jangka44/pen/QWpaQEK) - 예시 : [보기](https://cdpn.io/pen/debug/OJpQeJN) - 정답 : [확인](https://codepen.io/jangka44/pen/OJpQeJN) - Q&A - mouseenter → 마우스를 올리면 - mouseleave → 마우스가 떠나면
## 22강 : addClass - 변수없이 click이벤트와 함수 사용하는 button 알아보기 - 문제 : [addClass로 배경색 변경](https://codepen.io/jangka44/pen/JjWpQEq) - 예시 : [보기](https://cdpn.io/pen/debug/WNpMqGE) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/bGvgbqb) - ![원본이미지](https://i.postimg.cc/Twx2sHfC/Group-27.jpg) - ![원본이미지](https://i.postimg.cc/PqTk01TT/Group-33.jpg)
## 23강 : removeClass - 변수없이 click이벤트와 함수 사용하는 button 알아보기 - 문제 : [removeClass로 배경색이 원래대로 회복](https://codepen.io/jangka44/pen/wvJyLJd) - 예시 : [보기](https://cdpn.io/pen/debug/WNpMqGE) - 정답 : [확인](https://codepen.io/jangka44/pen/WNpMqGE)
## 24강 : hasClass - 위에서 배운 addclass와 removeclass를 사용하여 참과 거짓이 반복되는 형식 알아보기 - 문제 : [버튼 하나로 배경색이 계속 바뀜, hasClass](https://codepen.io/jangka44/pen/WNpMqGE) - 정답 : [확인](https://codepen.io/jangka44/pen/OJpQevm) - Q&A - addclass → class를 집어넣어라 - removeclass → class를 빼라 - hasclass → class를 가지고있다
## 25강 : click이벤트와 함수 - click이벤트, 함수, 제이쿼리식에 익숙해져야 합니다. - 문제 : [click이벤트와 함수를 다시 분리 해주세요 *복습](https://codepen.io/jangka44/pen/WNpMqGE) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/PoRWbWL)
## 26강 : 팝업 Ver.1 addClass, removeClass - 문제 : [팝업1 구현, addClass, removeClass](https://codepen.io/jangka44/pen/QWpaQEK) - 예시 : [보기](https://cdpn.io/pen/debug/NWpYzPV) - 정답 : [확인](https://codepen.io/jangka44/pen/NWpYzPV) - 자료 : [click이벤트 함수만 *식이 비슷하다](https://codepen.io/kimhyeji324/pen/PoRWbWL)
## 27강 : 팝업 Ver.2 addClass, removeClass - 1단계 : [어두운 뒷배경 레이아웃](https://codepen.io/jangka44/pen/abJYKpy) | [예시보기](https://cdpn.io/pen/debug/GRWxGoY) | [정답확인](https://codepen.io/kimhyeji324/pen/PoRNOXx?editors=1100) - 2단계 : [닫기버튼 레이아웃](https://codepen.io/jangka44/pen/GRWxGoY) | [예시보기](https://cdpn.io/pen/debug/VwXarOX?authentication_hash=xnkabBJLqRKM) | [정답확인](https://codepen.io/jangka44/pen/QWpmxKW) - 3단계 : [레이아웃 완성](https://codepen.io/jangka44/pen/QWpmxKW) | [예시보기](https://cdpn.io/pen/debug/qBroKVo) | [정답확인](https://codepen.io/jangka44/pen/qBroKVo) - 4단계 : [열기, 닫기 기능 구현](https://codepen.io/jangka44/pen/qBroKVo) | [예시보기](https://cdpn.io/pen/debug/ZEexRoe) | [정답확인](https://codepen.io/jangka44/pen/ZEexRoe) - Q&A - 팝업창 숨길때 display:block 사용하지 않는 이유 → 애니메이션을 적용하지 못하기 때문이다. - display:block대신 사용하는 코드 → opacity:0; 와 visibility:hidden; - 다시 나타낼때 → opacity:1; 와 visibility:visible;
## 28강 : 버튼활용 정리 및 복습 - 문제 : [빈칸을 채워주세요](https://codepen.io/kimhyeji324/pen/MWVJpWz?editors=1010) - 예시 : [보기](https://cdpn.io/pen/debug/WNzRRaX?authentication_hash=WPALYbyEpNXk) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/WNzRRaX?editors=0011)
## 29강 : 팝업2개 Ver.3 addClass, removeClass - 문제 : [팝업을 하나 더 만들어주세요](https://codepen.io/jangka44/pen/ZEexRoe) - 예시 : [보기](https://cdpn.io/pen/debug/zYZWLwm) - 정답 : [확인](https://codepen.io/jangka44/pen/zYZWLwm)
## 30강 : 팝업2개 Ver.3 addClass, removeClass - 문제 : [팝업2개 코드를 함수 1개로 묶어주세요](https://codepen.io/jangka44/pen/zYZWLwm) - 정답 : [확인](https://codepen.io/jangka44/pen/KKWoBZZ?editors=1010)
## 31강 : 함수 매개변수 - 개념 : [함수 매개변수](https://codepen.io/jangka44/pen/LYWdrKX?editors=0012) - Q&A - 문자값과 숫자값 갯수는 같아야 한다. - 함수명 괄호안에 문자 값이 들어갈 수 있다. - 함수실행 괄호안에 숫자 값이 들어갈 수 있다. - 함수실행 괄호안에 숫자 값이 문자값에 들어간 상태로 함수가 진행된다.
## 32강 : 팝업2개 Ver.3 함수 매개변수 - 문제 : [변수를 적용 해주세요](https://codepen.io/jangka44/pen/KKWoBZZ?editors=1010) - 문제 : [매개변수 적용 해주세요](https://codepen.io/kimhyeji324/pen/yLKbdqM?editors=1010) - 힌트 : [숫자와 문장](https://codepen.io/jangka44/pen/bGqoeZX?editors=0012) - 정답 : [확인](https://codepen.io/jangka44/pen/BaWrPYp)
## 33강 : stopPropagation - 개념1 : [stopPropagation](https://codepen.io/jangka44/pen/QWpxEJv?editors=0011) - 개념2 : [팝업열고 닫았을때 console창 결과를 확인해주세요](https://codepen.io/kimhyeji324/pen/VwXbOXz?editors=1111) - 개념3 : [팝업열고 닫았을때 console창 결과를 확인해주세요, 위 결과와 다른점을 찾아보세요](https://codepen.io/kimhyeji324/pen/zYWwQLq?editors=1010) - 1단계 : [팝업의 배경(어두운 부분)을 클릭해도 꺼지도록 해주세요.](https://codepen.io/jangka44/pen/BaWrPYp) | [예시보기](https://cdpn.io/pen/debug/poeKEWO) | [정답확인](https://codepen.io/jangka44/pen/poeKEWO) - 2단계 : [팝업의 콘텐츠 부분을 클릭해도 꺼지지 않게 해주세요.](https://codepen.io/jangka44/pen/poeKEWO?editors=1010) | [예시보기](https://cdpn.io/pen/debug/KKWegBG) | [정답확인](https://codepen.io/jangka44/pen/KKWegBG) - Q&A - 하위 엘리먼트를 클릭할 경우 바로위 엘리먼트부터 최상위 엘리먼트까지 같이 클릭된다. - 최상위 엘리먼트에 이벤트를 걸어놓을 경우 하위 엘리먼트를 클릭했을때 최상위 엘리먼트 이벤트가 같이 작동하는 현상이 일어난다. - 이벤트가 끝났으면 하는 곳에 return false;를 걸면 상위엘리먼트 이벤트가 멈추게된다.
## 34강 : 팝업2개 Ver.3 스크롤 - 문제 : [화면의 높이가 작으면 적절한 단계에서 스크롤바가 생기게 해주세요.](https://codepen.io/jangka44/pen/KKWegBG) | [예시보기](https://cdpn.io/pen/debug/WNpyGqa) | [정답확인](https://codepen.io/jangka44/pen/WNpyGqa) - 문제 : [스크롤바 기능을 버튼에 의해 끄고, 켤 수 있게 해주세요.](https://codepen.io/jangka44/pen/jOBKgGZ) | [예시보기](https://cdpn.io/pen/debug/BaWVXwR) | [정답확인](https://codepen.io/jangka44/pen/BaWVXwR) - 문제 : [팝업이 나오는 동안 html 수준의 스크롤바는 나타나지 않게 해주세요.](https://codepen.io/jangka44/pen/WNpyGqa) | [예시보기](https://cdpn.io/pen/debug/KKWeOZR) | [정답확인](https://codepen.io/jangka44/pen/KKWeOZR)
## 35강 : 팝업2개 Ver.3 켜져있는 팝업 - 문제 : [창을 켰을때 팝업이 켜져있도록 해주세요.](https://codepen.io/jangka44/pen/KKWeOZR) - 예시 : [보기](https://cdpn.io/pen/debug/rNyrKzB) - 정답 : [확인](https://codepen.io/jangka44/pen/rNyrKzB)
## 36강 : 팝업 최종 복습 - 1단계 : [함수 실행확인](https://codepen.io/jangka44/pen/QWpBrVa) - 2단계 : [addclass, removeclass 사용 팝업2개 열기 실행](https://codepen.io/jangka44/pen/jOBpxvZ) - [정답확인](https://codepen.io/kimhyeji324/pen/VwXWVxB) - 3단계 : [addclass, removeclass 사용 팝업2개 닫기 실행](https://codepen.io/kimhyeji324/pen/VwXWVxB) - [정답확인](https://codepen.io/jangka44/pen/KKWoBZZ?editors=1010) - 4단계 : [no 변수 버튼에 적용](https://codepen.io/jangka44/pen/KKWoBZZ?editors=1010) - [정답확인](https://codepen.io/jangka44/pen/ZEejoMq?editors=1010) - 5단계 : [no 변수를 매개변수로](https://codepen.io/jangka44/pen/ZEejoMq?editors=1010) - [정답확인](https://codepen.io/jangka44/pen/BaWrPYp) - 6단계 : [어두운 부분과 컨텐츠 클릭시 팝업 닫힘](https://codepen.io/jangka44/pen/BaWrPYp) - [정답확인](https://codepen.io/jangka44/pen/poeKEWO) - 7단계 : [컨텐츠 제외 어두운 부분만 클릭시 팝업 닫힘](https://codepen.io/jangka44/pen/poeKEWO) - [정답확인](https://codepen.io/jangka44/pen/KKWegBG) - 8단계 : [popup_body내용이 넘치면 popup_body에 스크롤이 생기고 컨텐츠가 화면을 벗어나지 못하도록](https://codepen.io/jangka44/pen/KKWegBG) - [정답확인](https://codepen.io/jangka44/pen/WNpyGqa) - 9단계 : [button을 누르면 html과 body에 스크롤이 사라지고, popup_body에 스크롤이 생기도록](https://codepen.io/jangka44/pen/WNpyGqa) - [정답확인](https://codepen.io/jangka44/pen/KKWeOZR) - 최종 : [페이지에 들어갔을때 팝업이 떠있도록](https://codepen.io/jangka44/pen/KKWeOZR) - [정답확인](https://codepen.io/jangka44/pen/rNyrKzB)
# 아코디언 ## 37강 : 제이쿼리의 본질, 제이쿼리 장점 - 개념 : [제이쿼리의 본질](https://codepen.io/jangka44/pen/gOmqOwg) - 개념 : [클릭이벤트 Ver. 자바스크립트](https://codepen.io/kimhyeji324/pen/QWmgZOZ) - 개념 : [클릭이벤트 Ver. 제이쿼리](https://codepen.io/kimhyeji324/pen/YzaQJrZ?editors=1010) - 제이쿼리 장점 - 식이 짧다 →document.getElementsByTagName → $ - html 한번에 선택가능 → divs[0].style.backgroundColor = 'blue';, divs[1].style.backgroundColor = 'blue'; → $('div') - css선택 코드 공부X →backgroundColor → background-color - 수업 - 자바스크립트 - document를 써야한다. - document는 문서 - getElementsByTagName = 엘리먼트 가져오다 - 자바스크립트는 괄호주머니 안에 엘리먼트만 담을뿐 엘리먼트를 대신 선택해주지 않는다. divs[9].style.backgroundColor = 'blue'; 변수안에 들어있는 엘리먼트를 하나하나 집어서 css 커스텀을 따로 해줘야한다. - 원래 자바스크립트에서 제이쿼리처럼 엘리먼트를 가져오고 선택까지 해주는 기능은 없다. - 제이쿼리 - document.getElementsByTagName는 $로 쓴다 - .style.backgroundColor = 'blue';는 .css('background-color', 'blue');로 쓴다 - 제이쿼리는 자바스크립트와 달리 괄호 주머니안에 $('') 엘리먼트, class가 들어가게 되면 엘리먼트를 가져올뿐만 아니라 대신 선택까지 해준다.
## 38강 : this - 개념 : [제이쿼리에 자바스크립트 기존 코드 사용](https://codepen.io/kimhyeji324/pen/dymRgvX) - Q&A - this는 자바스크립트 식에서 사용되던 것이다. - 기존 → 엘리먼트 중 하나를 집어 사용하려면 class를 추가해야된다. - this → 엘리먼트 중 하나를 집어 사용하려면 class를 추가하지 않아도 된다. - 수업 - this.style.backgroundColor = 'blue'; 이식은 자바스크립트 식으로 되어 있지만 제이쿼리 안에서도 쓸 수 있다. - 엘리먼트,class와 this에 다른점은 엘리먼트와 class는 10개의 div중 1개만 따로 선택하려면 긴 제이쿼리 식이 필요했지만 this는 $('')안에 들어가기만 하면 div중 하나만 선택할 수 있다.
## 39강 : 아코디언2 실습 시작 - 문제 : [힌트에 적혀있는 코드를 사용해서 클릭하면 배경색이 변하도록 해주세요](https://codepen.io/kimhyeji324/pen/zYWzQjx) - 힌트 : $('.box-1 > :nth-child(1)').click(); - 예시 : [보기](https://cdpn.io/pen/debug/gOmZmzE) - 정답 : [확인](https://codepen.io/jangka44/pen/gOmZmzE)
## 40강 : 개념 this - 문제 : [클릭하면 배경색이 변하도록](https://codepen.io/jangka44/pen/rNyrKzB) - 예시 : [보기](https://cdpn.io/pen/debug/poeqNwW) - 정답 : [확인](https://codepen.io/jangka44/pen/rNyPNKE)
## 41강 : 개념 toggle - 문제 : [클릭하면 배경색이 변하도록](https://codepen.io/jangka44/pen/mdWvdxm) - 예시 : [보기](https://cdpn.io/pen/debug/rNyPNKE) - 정답 : [확인](https://codepen.io/jangka44/pen/rNyPNKE)
## 42강 : 개념 next, prev - 문제 : [클릭하면 양 옆의 배경색만 변하도록](https://codepen.io/jangka44/pen/mdWvdxm) - 예시 : [보기](https://cdpn.io/pen/debug/OJpdJoz) - 정답 : [확인](https://codepen.io/jangka44/pen/OJpdJoz) - Q&A - prev → 인접한 형 엘리먼트 선택 - next → 인접한 동생 엘리먼트 선택 - $this.prev() → 이벤트 걸린 엘리먼트 또는 클래스 형 엘리먼트 선택 - $this.next() → 이벤트 걸린 엘리먼트 또는 클래스 동생 엘리먼트 선택
## 43강 : 개념 mouseenter - 문제 : [마우스올리면 양 옆의 배경색만 변하도록.](https://codepen.io/jangka44/pen/rNyrKzB) - 예시 : [보기](https://cdpn.io/pen/debug/RwpvwvZ) - 정답 : [확인](https://codepen.io/jangka44/pen/RwpvwvZ)
## 44강 : 개념 this - 문제 : [클릭한 div 제외한 모든 배경색이 변하도록](https://codepen.io/jangka44/pen/mdWvdxm) - 예시 : [보기](https://cdpn.io/pen/debug/zYZeYgG) - 정답 : [확인](https://codepen.io/jangka44/pen/zYZeYgG) - 수업 - 제이쿼리 식 순서 중요
## 45강 : 개념 parent, children - 문제 : [클릭한 div 제외한 모든 배경색이 변하도록](https://codepen.io/jangka44/pen/zYZeYgG) - 예시 : [보기](https://cdpn.io/pen/debug/ZEewYYz) - 정답 : [확인](https://codepen.io/jangka44/pen/ZEewYYz) - Q&A - parent → 부모 - children → 자식
## 46강 : 개념 find - 문제 : [클릭한 div 제외한 모든 배경색이 변하도록](https://codepen.io/jangka44/pen/ZEewYYz) - 예시 : [보기](https://cdpn.io/pen/debug/OJpdPMw) - 정답 : [확인](https://codepen.io/jangka44/pen/OJpdPMw) - Q&A - find(' > *') → 후손
## 47강 : 개념 siblings - 문제 : [클릭한 div 제외한 모든 배경색이 변하도록](https://codepen.io/jangka44/pen/ZEewYYz) - 예시 : [보기](https://cdpn.io/pen/debug/vYxbEXp) - 정답 : [확인](https://codepen.io/jangka44/pen/vYxbEXp) - Q&A - siblings() → 형제들
## 48강 : 구현 기본 디자인 - 문제 : [아코디언2 구현, 기본 디자인](https://codepen.io/jangka44/pen/jOBodGo) - 예시 : [보기](https://cdpn.io/pen/debug/YzZbagm) - 정답 : [확인](https://codepen.io/jangka44/pen/YzZbagm)
## 49강 : 구현 애니메이션X - 문제 : [아코디언2 구현, 애니메이션 없는 버전](https://codepen.io/jangka44/pen/YzZbagm) - 예시 : [보기](https://cdpn.io/pen/debug/WNpBJbO) - 정답 : [확인](https://codepen.io/jangka44/pen/WNpBJbO)
## 50강 : 구현 slideDown - 문제 : [아코디언2 구현, slideDown](https://codepen.io/jangka44/pen/WNpBJbO) - 예시 : [보기](https://cdpn.io/pen/debug/vYxwjLO) - 정답 : [확인](https://codepen.io/jangka44/pen/vYxwjLO)
## 51강 : 구현 show, hide, slideDown, slideUp, fadeIn, fadeOut 테스트 - 개념 : [아코디언2 구현, show, hide, slideDown, slideUp, fadeIn, fadeOut 테스트](https://codepen.io/jangka44/pen/BaWgKXb)
## 52강 : 구현 기존 애니메이션 큐 제거 - 문제 : [아코디언2 구현, 기존 애니메이션 큐 제거](https://codepen.io/jangka44/pen/WNpqxbe) - 예시 : [보기](https://cdpn.io/pen/debug/WNpqGvp) - 정답 : [확인](https://codepen.io/jangka44/pen/WNpqGvp)
# 테일윈드 ## 53강 : 테일윈드 - 개념 : [테일윈드 치트시트](https://nerdcave.com/tailwind-cheat-sheet) - 개념 : [테일윈드 가져오기](https://cdnjs.com/)
# 반응형 ## 54강 : 반응형 모바일메뉴 구현 작업1 - 문제 : [탑바와 모바일 탑바가 스위치](https://codepen.io/jangka44/pen/oNZmQjK) - 예시 : [보기](https://cdpn.io/pen/debug/ExWrOvJ) - 1단계 정답 : [확인](https://codepen.io/jangka44/pen/XWMOyKy) - 2단계 정답 : [확인](https://codepen.io/jangka44/pen/ExWrOvJ)
## 55강 : 반응형 모바일메뉴 구현 작업2 - 문제 : [탑바와, 모바일 탑바 구현](https://codepen.io/jangka44/pen/oNZmQjK) - 예시 : [보기](https://cdpn.io/pen/debug/qBrgQzb) - 1단계 정답 : [확인](https://codepen.io/jangka44/pen/poeGQZO) - 2단계 정답 : [확인](https://codepen.io/jangka44/pen/qBrgQzb?editors=1010)
## 56강 : 반응형 모바일메뉴 구현 작업3 - 문제 : [클릭시 모바일 사이드바의 배경 노출](https://codepen.io/jangka44/pen/qBrgQzb) - 예시 : [보기](https://cdpn.io/pen/debug/XWMOoPj) - 정답 : [확인](https://codepen.io/jangka44/pen/XWMOoPj)
## 57강 : 반응형 모바일메뉴 구현 작업4 - 문제 : [닫기 버튼, pc 화면에서 사이드바 숨기기](https://codepen.io/jangka44/pen/XWMOoPj) - 예시 : [보기](https://cdpn.io/pen/debug/poeYPYP) - 정답 : [확인](https://codepen.io/jangka44/pen/poeYPYP)
## 58강 : 반응형 모바일메뉴 구현 작업5 - 문제 : [클릭시 사이드바 노출시 콘텐트가 화면 우측에서 나옴](https://codepen.io/jangka44/pen/poeYPYP) - 예시 : [보기](https://cdpn.io/pen/debug/YzZgQWK) - 정답 : [확인](https://codepen.io/jangka44/pen/YzZgQWK)
## 59강 : 반응형 모바일메뉴 구현 작업6 - 문제 : [3차 메뉴](https://codepen.io/jangka44/pen/YzZgQWK) - 예시 : [보기](https://cdpn.io/pen/debug/mdWoBXg) - 1단계 : [BEM, 격리](https://codepen.io/jangka44/pen/YzZgQWK) - 2단계 : [메뉴 마크업](https://codepen.io/jangka44/pen/WNpmOKd) - 3단계 : [not, only-child](https://codepen.io/jangka44/pen/BaWbZvd) - 4단계 : [반투명 배경중첩](https://codepen.io/jangka44/pen/WNpmEpa) - 5단계 : [아이템 클릭시 active 토글](https://codepen.io/jangka44/pen/RwpdZZL) - 6단계 : [n차 메뉴 아이템에도 이벤트](https://codepen.io/jangka44/pen/MWpxvON) - 7단계 : [클릭시 활성화된 형제 active 제거](https://codepen.io/jangka44/pen/mdWoMzL) - 8단계 : [클릭시 활성화된 형제의 후손들에 active 제거](https://codepen.io/jangka44/pen/zYZbdyB) - 9단계 : [활성된 아이템 클릭시, 해당 아이템의 후손에 active 제거](https://codepen.io/jangka44/pen/poeYWey) - 10단계 : [모바일 메뉴 박스 끄고, 켜는 기능 구현](https://codepen.io/jangka44/pen/vYxPJMR) - 11단계 : [모바일 메뉴 박스를 끌 때, 모든 active 제거](https://codepen.io/jangka44/pen/qBrvPpY) - 12단계 : [기존소스에 병합, overflow-y-auto](https://codepen.io/jangka44/pen/mdWoBXg)

게시글 상세