$$config title: https://codepen.io/jangka44/pen/MoeWKv keywords: - IT - ... $$ ```html

SJ 강좌

{{classInfo.title}} 강좌 예제

{{lec.titleForPrint}} : {{lec.subTitle}}

요약
{{sumKey}}
예제
- {{exam.name}}

적은 설명, 많은 예제

``` ```javascript console.clear(); let classInfos = { class1: { title: "HTML, CSS 기초와 반응형 웹 디자인", lecs: { 1: { title: "개요", subTitle: "HTML, CSS 개념, 툴 사용법", sum: { "HTML의 기본 개념": [`HTML == 배우`, `CSS == 코디`], "HTML, 이 태그만 배우시면 됩니다.": [`div, 모든 것의 기본형`], "CSS, 이 속성들만 배우시면 됩니다.": [`display, position, float`], "교육툴 사용법": [`주소 : codepen.io/pen`] }, exams: ["https://codepen.io/jangka44/pen/GEmeEv##강의용 예제"] }, 2: { title: "HTML, CSS 기초와 display 속성[완료]", subTitle: "HTML과 CSS의 관계, display", sum: { "HTML과 CSS의 관계": [`HTML == 배우`, `CSS == 코디`], "선택자, 왜 필요한가?": [`배우와 스타일리스트를 연결하는 유일한 방법`], "선택자 종류": [`자식선택자, 후손선택자, 태그선택자`], "display 속성": [`block : 줄 바꿈.`, `inline-block : 줄 안 바꿈.`] }, exams: [ "https://codepen.io/jangka44/pen/OgmqRx##강의용 예제", "https://codepen.io/jangka44/pen/XggMpK" ] }, 3: { title: "HTML, CSS 기초와 display 속성[완료]", subTitle: "block과 inline block", sum: { block: [`나 한줄을 혼자 다 쓸래!`], "inline-block": [`나 겸손할래!`, `나 한줄을 여러 사람과 나눠 쓸래!`] }, exams: ["https://codepen.io/jangka44/pen/awzVKB"] }, 4: { title: "HTML, CSS 기초와 display 속성[완료]", subTitle: "id, clsss, 후손, 자식선택자", exams: ["https://codepen.io/jangka44/pen/awzMgJ"] }, 5: { title: "HTML, CSS 기초와 display 속성[완료]", subTitle: "inherit", exams: ["https://codepen.io/jangka44/pen/rwabMy"] }, 6: { title: "HTML, CSS 기초와 display 속성[완료]", subTitle: "ul, ol, dl", exams: ["https://codepen.io/jangka44/pen/mwygMo"] }, 7: { title: "HTML, CSS 기초와 display 속성[완료]", subTitle: "nth-child", exams: ["https://codepen.io/jangka44/pen/weBZXa"] }, 8: { title: "간단한 풀다운 메뉴와 position[완료]", subTitle: "중첩 ul, hover", exams: ["https://codepen.io/jangka44/pen/PjwgLw"] }, 9: { title: "간단한 풀다운 메뉴와 position[완료]", subTitle: "text-align:center, 노말라이즈", exams: ["https://codepen.io/jangka44/pen/KqwLdv"] }, 10: { title: "간단한 풀다운 메뉴와 position[완료]", subTitle: "position absolute", exams: ["https://codepen.io/jangka44/pen/awzryM"] }, 11: { title: "간단한 풀다운 메뉴와 position[완료]", subTitle: "position:absolute, position:relative", exams: ["https://codepen.io/jangka44/pen/Pjwvgj"] }, 12: { title: "float과 부작용 해결[완료]", subTitle: "float", exams: ["https://codepen.io/jangka44/pen/vZEoQM"] }, 13: { title: "float과 부작용 해결[완료]", subTitle: "float, height:auto의 의미와 height:0의 부작용", exams: ["https://codepen.io/jangka44/pen/LLVPRv"] }, 14: { title: "float과 부작용 해결[완료]", subTitle: "::after, ::before", exams: ["https://codepen.io/jangka44/pen/LLVPqE"] }, 15: { title: "float과 부작용 해결[완료]", subTitle: "clear:both 로 float의 부작용 해결", exams: ["https://codepen.io/jangka44/pen/pwJvJJ"] }, 16: { title: "float을 적용한 풀다운 메뉴[완료]", subTitle: "float, position, display 콜라보", exams: ["https://codepen.io/jangka44/pen/owXgqP"] }, 17: { title: "float을 적용한 풀다운 메뉴[완료]", subTitle: "float, position, display 콜라보", exams: ["https://codepen.io/jangka44/pen/jwPPdx"] }, 18: { title: "반응형 그리드[완료]", subTitle: "box-sizing:border-box, max-width:970px, margin:0 auto", exams: ["https://codepen.io/jangka44/pen/Ogyqjg"] }, 19: { title: "반응형 그리드[완료]", subTitle: "미디어 쿼리", exams: ["https://codepen.io/jangka44/pen/jwbRqR"] }, 20: { title: "반응형 그리드[완료]", subTitle: "브레이크 포인트", exams: ["https://codepen.io/jangka44/pen/RgrrKx"] }, 21: { title: "반응형 그리드[완료]", subTitle: "범용 클래스를 사용하지 않고 직접 브레이크 포인트 걸기", exams: ["https://codepen.io/jangka44/pen/ZyQKEp"] }, 22: { title: "HTML, CSS 기초와 display 속성[완료]", subTitle: "범용 클래스를 사용해서 브레이크 포인트 걸기", exams: ["https://codepen.io/jangka44/pen/LLGyjJ"] }, 23: { title: "반응형 그리드 프레임워크 만들기[완료]", subTitle: "반응형 총정리 1/2", exams: ["https://codepen.io/jangka44/pen/MoKomB"] }, 24: { title: "반응형 그리드 프레임워크 만들기[완료]", subTitle: "반응형 총정리 2/2", exams: ["https://codepen.io/jangka44/pen/NgjQPJ?editors=1100"] } } }, class2: { title: "CSS 고급 레이아웃", lecs: { 1: { title: "SASS 기초[완료]", subTitle: "SASS의 개념", sum: { "SASS 개념": [ `SASS는 오직 인간을 위한 CSS`, `SASS에는 CSS에는 없는 많은 기능이 있습니다.`, `브라우져는 SASS를 모릅니다.`, `SASS는 CSS로 변경된 후 실행됩니다.` ] }, exams: [ "https://codepen.io/jangka44/pen/dRWENL##강의용", "https://codepen.io/jangka44/pen/mwwWXz", "https://codepen.io/jangka44/pen/VWKgdM##변수", "https://codepen.io/jangka44/pen/VWKgBr##변수", "https://codepen.io/jangka44/pen/xrEMQq##SCSS 미사용 버전", "https://codepen.io/jangka44/pen/MojLzw##SCSS 사용 버전" ] }, 2: { title: "SASS 기초[완료]", subTitle: "SASS의 반복문", sum: { "SASS의 반복문 2가지": [`each 문`, `for 문`] }, exams: [ "https://codepen.io/jangka44/pen/owwWEO##강의용", "https://codepen.io/jangka44/pen/MomdEQ", "https://codepen.io/jangka44/pen/mwwmqd", "https://codepen.io/jangka44/pen/ZypPOB##list와 each", "https://codepen.io/jangka44/pen/pwEYRy##list와 each v2", "https://codepen.io/jangka44/pen/vZXPgQ##list와 each v2" ] }, 3: { title: "SASS 기초[완료]", subTitle: "SASS로 그리드 다루기", sum: { "SASS로 그리드를 만들 때 사용되는 기술": [`변수`, `함수`, `for 문`] }, exams: [ "https://codepen.io/jangka44/pen/GEjeme##반응형 그리드 편하게 만들기" ] }, 4: { title: "SASS로 반응형 그리드 프레임워크 업그레이드[완료]", subTitle: "EJ 프레임워크 사용법 알아보기", sum: { "EJ 프레임워크 살펴보기": [ "ej-spacing-xs-30 : xs 이상에서 칼럼의 여백을 30px로 둔다.", "ej-md-1-4 : md 이상에서 100% 기준으로 1/4 사용하겠다.", "ej-xs-1-8 : xs 이상에서 100% 기준으로 1/8 사용하겠다.", "ej-hidden-below-500 : 500 미만의 세계에서는 숨긴다.", "ej-hidden-below-xs : xs 이하의 세계에서는 숨긴다.", "ej-clear-both-below-md : md 이하의 세계 에서 clear both 를 건다.", "ej-ratio-100-50 : 너비 100% 높이 50% 비율을 가진다.", "ej-ratio-lg-100-100 : lg 이상에서 너비 100% 높이 100% 비율을 가진다.", "ej-ratio-avobe-400-100-100 : 화면크기 400 이상에서 너비 100% 높이 100% 비율을 가진다." ] }, exams: [ "https://codepen.io/jangka44/pen/YQWaqB##ej 그리드", "https://codepen.io/jangka44/pen/MojdZw##이미지와 같이 고정비율을 갖는 div 만들기" ] }, 5: { title: "SASS로 반응형 그리드 프레임워크 업그레이드[완료]", subTitle: "EJ 프레임워크 수정하기", sum: { "EJ 프레임워크 살펴보기": [`주소 : https://sj.oa.gg/lib/ej.scss`] }, exams: ["https://codepen.io/jangka44/pen/YQWaqB##ej 그리드"] }, 6: { title: "SASS를 활용한 실무예제[완료]", subTitle: "GNB(일명 상단메뉴) 만들기", exams: ["https://codepen.io/jangka44/pen/gRwNNb##상단메뉴"] }, 7: { title: "SASS를 활용한 실무예제[완료]", subTitle: "GNB(일명 상단메뉴) 만들기", exams: ["https://codepen.io/jangka44/pen/BZQBWx"] }, 8: { title: "SASS를 활용한 실무예제[완료]", subTitle: "모바일 GNB(일명 상단메뉴) 만들기", exams: ["https://codepen.io/jangka44/pen/BZQBWx"] }, 9: { title: "SASS를 활용한 실무예제[완료]", subTitle: "이미지 슬라이더 만들기", exams: ["https://codepen.io/jangka44/pen/xrRwQz"] }, 10: { title: "SASS를 활용한 실무예제[완료]", subTitle: "이미지 슬라이더 만들기", exams: ["https://codepen.io/jangka44/pen/RgoRjE"] }, 11: { title: "SASS를 활용한 실무예제[완료]", subTitle: "상품리스트 만들기", exams: ["https://codepen.io/jangka44/pen/VWmVzd"] }, 12: { title: "부트스트랩[완료]", subTitle: "flex 기초", sum: { "display:flex;": ["자식요소를 flex 하게 다루겠다."], "flex-grow:1;": ["화면의 나머지 공간을 특정비율로 가져가겠다."], "flex-shrink:1;": ["도덕적인 정도, 위기상황에서 얼마나 희생하는가"], "flex-direction:column;": ["세로정렬"], "flex-direction:row;": ["가로정렬"], "flex-basis:100px;": ["상황에서 따라, 가로 또는 세로가 된다."] }, exams: ["https://codepen.io/jangka44/pen/OgbZPV"] }, 13: { title: "부트스트랩[완료]", subTitle: "flex 기초 2", sum: { "display:flex;": ["자식요소를 flex 하게 다루겠다."], "flex-grow:1;": ["화면의 나머지 공간을 특정비율로 가져가겠다."], "flex-shrink:1;": ["도덕적인 정도, 위기상황에서 얼마나 희생하는가"], "flex-direction:column;": ["세로정렬"], "flex-direction:row;": ["가로정렬"], "flex-basis:100px;": ["상황에서 따라, 가로 또는 세로가 된다."] }, exams: ["https://codepen.io/jangka44/pen/OgbZPV"] }, 14: { title: "부트스트랩[완료]", subTitle: "float vs flex", sum: { "display:flex;": ["자식요소를 flex 하게 다루겠다."], "flex-grow:1;": ["화면의 나머지 공간을 특정비율로 가져가겠다."], "flex-shrink:1;": ["도덕적인 정도, 위기상황에서 얼마나 희생하는가"], "flex-direction:column;": ["세로정렬"], "flex-direction:row;": ["가로정렬"], "flex-basis:100px;": ["상황에서 따라, 가로 또는 세로가 된다."] }, exams: ["https://codepen.io/jangka44/pen/OgbZPV"] }, 15: { title: "부트스트랩[완료]", subTitle: "부트스트랩4 그리드 시스템", exams: ["https://codepen.io/jangka44/pen/BZdamw"] }, 16: { title: "CSS 테크닉 예제[완료]", subTitle: "CSS 예제 2개", sum: { "background-size": [`auto 100%`], "linear-gradient(#de3a64, #2a2f4b)": [`그라데이션을 주겠다.`], "display:flex;": ["자식요소를 flex 하게 다루겠다."], "flex-grow:1;": ["화면의 나머지 공간을 특정비율로 가져가겠다."], "flex-shrink:1;": ["도덕적인 정도, 위기상황에서 얼마나 희생하는가"], "flex-direction:column;": ["세로정렬"], "flex-direction:row;": ["가로정렬"], "flex-basis:100px;": ["상황에서 따라, 가로 또는 세로가 된다."], "-webkit-, -ms-": [`오토프리픽서로 해결가능`] }, exams: [ "https://codepen.io/jangka44/pen/MovgQv", "https://codepen.io/jangka44/pen/YQxPPQ" ] }, 17: { title: "CSS 테크닉 예제[완료]", subTitle: "CSS 예제 2개", sum: { "input:checked": [`체크되어있는 체크박스`], calc: ["IE11 이상에서만 지원"] }, exams: [ "https://codepen.io/jangka44/pen/PjKwza", "https://codepen.io/jangka44/pen/dRzJpv" ] }, 18: { title: "CSS 테크닉 예제", subTitle: "개발환경 설치, 브라켓과 코알라", sum: { brackets: [`http://brackets.io/`], koala: [`http://koala-app.com/`] }, exams: ["http://brackets.io/", "http://koala-app.com/"] } } }, class3: { title: "자바스크립트 기초", lecs: { 1: { title: "웹페이지에서 자바스크립트의 역할", subTitle: "자바스크립트 개념", sum: { "HTML의 기본 개념": [`HTML == 배우`, `CSS == 코디`, `자바스크립트 == 감독`], "자바스크립트와 HTML의 관계": [`HTML은 자바스크립트의 지배를 받는다.`], "자바스크립트와 CSS와의 관계": [`서로 딱히 신경쓰지 않는 편이 좋다.`], "툴 사용법": [`코드팬을 사용한다.`] }, exams: [ "https://codepen.io/jangka44/pen/JJERBz##console.log, 프로그램은 위에서 아래로 실행된다.", "https://codepen.io/jangka44/pen/awpmER##CSS 우선순위가 높은 자바스크립트, 자바스크립트는 감독입니다.", "https://codepen.io/jangka44/pen/VWPKdo##자바스크립트와 CSS가 협력하는 바람직한 방법" ] }, 2: { title: "변수, 함수 기초", subTitle: "변수란 무엇인가?", sum: { "소스코드라는 소설속에 존재하는 2가지 필수요소": [ `소설에서 두가지 필수 구성 요소`, `- 인물과 인물의 행동`, `인물 == 변수, 인물의 행동 == 함수` ] }, exams: ["https://codepen.io/jangka44/pen/owwWar"] }, 3: { title: "변수, 함수 기초", subTitle: "함수란 무엇인가?", sum: { "함수란 무엇인가?": [`함수는 인물의 행동`] }, exams: [ "https://codepen.io/jangka44/pen/JJERBz##console.log(자세한 설명)", "https://codepen.io/jangka44/pen/KqagYQ##함수는 인물의 행동입니다.", "https://codepen.io/jangka44/pen/owBzrv##행동에는 옵션이 있을 수 있습니다.", "https://codepen.io/jangka44/pen/NgdRZv##행동에는 옵션이 여러개 있을 수 있습니다." ] }, 4: { title: "변수, 함수 기초", subTitle: "함수의 결과와 복잡한 변수!", sum: { "함수의 결과란?": [`함수는 실행결과를 돌려줄 수 있다.`], "배열이란?": [`배열이란 커피캐리어와 같다.`], "객체란?": [`객체란 좀 더 자유로운 배열이다.`] }, exams: [ "https://codepen.io/jangka44/pen/rwjMEQ##함수의 결과", "https://codepen.io/jangka44/pen/dRNvgx##커피와 커피캐리어의 v1", "https://codepen.io/jangka44/pen/owBzrv##커피와 커피캐리어의 v2" ] }, 5: { title: "변수, 함수 기초", subTitle: "숫자와 문자", sum: { "데이터의 형태?": [`문자, 숫자, 논리가 있다.`, `typeof 로 데이터의 형을 알 수 있다.`], "데이터 자르는 함수?": [`substr`], "데이터 더하기?": [`"안" + "녕" == "안녕"`], "데이터 형태 바꾸기": [ `숫자 + 문자 == 문자`, `parseInt ==> 정수화`, `parseFloat ==> 실수화` ] }, exams: [ "https://codepen.io/jangka44/pen/YQNVjZ##데이터의 형태", "https://codepen.io/jangka44/pen/bRgqXR##문자열 자르기", "https://codepen.io/jangka44/pen/mwRWZP##문자열 더하기", "https://codepen.io/jangka44/pen/dRNWqO##데이터 정리" ] }, 6: { title: "변수, 함수 기초", subTitle: "setTimeout, setInterval", sum: { "setTimeout?": [`주어진 시간 후에 실행되도록 예약`], "setInterval?": [`주어진 시간을 주기로 함수가 계속 되도록 예약`], "문자열 세계의 초능력자? 바로 역슬래시": [`\\`], "연산자 우선순위": [`더하기 < 곱하기 < 괄호`] }, exams: [ "https://codepen.io/jangka44/pen/wegPwE##setTimeout, setInterval", "https://codepen.io/jangka44/pen/owBWaY##특수문자", "https://codepen.io/jangka44/pen/awpWPv##각종 연산자" ] }, 7: { title: "함수의 입력", subTitle: "지역변수와 전역변수!", sum: { "글로벌, 지역 변수": [ "유명한 유재석(글로벌 변수, 함수 밖 변수)과 내 친구 유재석(지역변수, 함수 안 변수)" ], "함수 호출 할 때 매개변수로 넘기는 변수는 값이 복사됩니다.": [ `숫자, 문자, 논리자료는 복사`, `그 외는 리모콘 복사(즉) 공유` ] }, exams: [ "https://codepen.io/jangka44/pen/RgKjKy##call by value #1", "https://codepen.io/jangka44/pen/awpVBB##call by value #2" ] }, 8: { title: "함수의 출력", subTitle: "리모콘과 일반변수!", sum: { "함수 호출 할 때 매개변수로 넘기는 변수는 값이 복사됩니다.": [ `숫자, 문자, 논리자료는 복사`, `그 외는 리모콘 복사(즉) 공유` ], "함수가 주어를 리턴하면?": [`체인호출이 가능하다.`] }, exams: [ "https://codepen.io/jangka44/pen/VWPrjr##call by value #3", "https://codepen.io/jangka44/pen/awpEoE##체인호출" ] }, 9: { title: "window와 객체", subTitle: "window와 객체지향!", sum: { "window와 객체": [ `우리가 만들던 변수와 함수들이 사실 윈도우의 속성과 행동을 정의하는 일 이었다.` ], "객체지향 없는 방식?": [`오직 window 객체만 사용한다.`], "객체지향 있는 방식?": [`사용자 정의 객체를 만들어서 사용한다.`] }, exams: [ "https://codepen.io/jangka44/pen/GErymK##window와 객체", "https://codepen.io/jangka44/pen/owBpoV##객체지향 없는 방식", "https://codepen.io/jangka44/pen/WORdzR##객체지향 있는 방식" ] }, 10: { title: "if문", subTitle: "조건문!", sum: { "if ( a == 1 ) { ... }": [`a가 1일 때 저를 실행해주세요!`], "else if ( a == 2 ) { ... }": [ `위에 조건이 틀렸고 a가 2일 때 저를 실행해주세요!` ], "else { ... } ": [`위에 조건이 전부 틀렸다면 저를 실행해주세요!`] }, exams: [ "https://codepen.io/jangka44/pen/ZyLrBm", "https://codepen.io/jangka44/pen/XgpxgQ", "https://codepen.io/jangka44/pen/BZpqmm" ] }, 11: { title: "switch문", subTitle: "조건문!", sum: { "switch ( a ) ": [`변수 a의 값에 따라 여러상황으로 분기하겠다.`], "case 1 : ": [`변수 a 가 1일 때 저를 실행해주시면 됩니다.`], "break; : ": [`일단 시작되면 break; 되기전까지 밑으로 계속 실행됩니다.`] }, exams: [ "https://codepen.io/jangka44/pen/pwRxax", "https://codepen.io/jangka44/pen/yXgRwr" ] }, 12: { title: "while문", subTitle: "반복문!", sum: { "조건의 초기화?": [`1 : var i = 0;`], "조건의 체크?": [`2 : i <= 5`], "조건의 증가?": [`3 : i++`], "반복대상?": [`4 : console.log(i);`] }, exams: [ "https://codepen.io/jangka44/pen/WORYXq", "https://codepen.io/jangka44/pen/bRgQvy" ] }, 13: { title: "for", subTitle: "반복문!", sum: { "조건의 초기화?": [`1 : var i = 0;`], "조건의 체크?": [`2 : i <= 5`], "조건의 증가?": [`3 : i++`], "반복대상?": [`4 : console.log(i);`] }, exams: ["https://codepen.io/jangka44/pen/mwRQjz", ] }, 14: { title: "if문과 for문 응용", subTitle: "break, continue", sum: { "break?": ["나 이 반복되는 지옥에서 나갈래!"], "continue?": ["나 이 반복되는 지옥에서 이번 턴만 쉬고 바로 다음으로 넘어갈래!"] }, exams: [ "https://codepen.io/jangka44/pen/awpQPy", "https://codepen.io/jangka44/pen/awpQgV" ] }, 15: { title: "제이쿼리 없이 DOM 작업하기", subTitle: "자바스크립트가 일하는 방식!", sum: { "DOM 작업이란?": [`엘리먼트를 찾고 바꾸고 수정하고 등등등, DOM => 문서객체모델`] }, exams: [ "https://codepen.io/jangka44/pen/GErPmV", ] }, 16: { title: "제이쿼리로 DOM 작업하기", subTitle: "제이쿼리가 우리를 도와주는 방식", sum: { "제이쿼리가 일하는 방식": [ `작업할 녀석들을 포장해서 사단장 아래에 두고(즉 엘리먼트 찾고)

var $div = $('section:nth-child(2) > div');`, `부탁하고

$div.css('background-color', 'red');` ] }, exams: [ "https://codepen.io/jangka44/pen/pwRqwe", "https://codepen.io/jangka44/pen/dRNwJr" ] }, 17: { title: "onclick", subTitle: "이벤트 걸기!", sum: { "제이쿼리가 일하는 방식": [ `함수 만들고

var 함수 = function() { };`, `함수를 맡길 녀석들을 포장해서 사단장 아래에 두고(즉 엘리먼트 찾고)

var $div = $('section:nth-child(2) > div');`, `부탁하고

$div.click(함수);` ] }, exams: ["https://codepen.io/jangka44/pen/VWPqxO", "https://codepen.io/jangka44/pen/JJEwaw"] }, 18: { title: "addClass, removeClass, toggleClass", subTitle: "addClass, removeClass, toggleClass!", sum: { addClass: [ `해당 사단장 휘하에 있는 엘리먼트들에 클래스를 추가한다.

$div.addClass('active');` ], removeClass: [ `해당 사단장 휘하에 있는 엘리먼트들에 클래스를 삭제한다.

$div.removeClass('active');` ], toggleClass: [ `해당 사단장 휘하에 있는 엘리먼트들에 클래스를 토글한다.

$div.toggleClass('active');` ] }, exams: ["https://codepen.io/jangka44/pen/yXgoBV", "https://codepen.io/jangka44/pen/OgWgGe", "https://codepen.io/jangka44/pen/XgpajV", "https://codepen.io/jangka44/pen/BZpdWo"] }, 19: { title: "find, closest", subTitle: "find, closest", sum: { "window.$('div');": [`전국에서 div를 찾는다.`], "$section.find('div');": [ `$section 이라는 사단장 밑에 있는 엘리먼트들의 후손들 중에서 div를 찾는다.` ], "$section.closest('div');": [ `$section 이라는 사단장 밑에 있는 엘리먼트들 중 처음 들어있는 녀석 기준으로 가장 가까운 div 엘리먼트를 찾는다.` ] }, exams: ["https://codepen.io/jangka44/pen/YQNBJN", "https://codepen.io/jangka44/pen/LLxaPb"] }, 20: { title: "parent, children", subTitle: "parent, children", exams: ["https://codepen.io/jangka44/pen/jwLbOG"] }, 21: { title: "next, prev", subTitle: "next, prev", exams: ["https://codepen.io/jangka44/pen/dRzoXg"] }, 22: { title: "제이쿼리 응용 기초 예제", subTitle: "setTimeout, setInterval", exams: ["https://codepen.io/jangka44/pen/oweXpJ"] }, 23: { title: "제이쿼리 응용 기초 예제", subTitle: "keyup", exams: [ "https://codepen.io/jangka44/pen/jwLbba", "https://codepen.io/jangka44/pen/bRrVRo" ] }, 24: { title: "제이쿼리 응용 기초 예제", subTitle: "addClass와 애니메이션", exams: ["https://codepen.io/jangka44/pen/rwGMGN"] }, 25: { title: "제이쿼리 응용 기초 예제", subTitle: "제이쿼리 게임 기초 개념", exams: ["https://codepen.io/jangka44/pen/PjKPJm"] }, 26: { title: "제이쿼리 응용 기초 예제", subTitle: "제이쿼리 게임 기초 개념", exams: ["https://codepen.io/jangka44/pen/ZyJbow"] } } }, class6: { title: "파이어베이스", lecs: { 1: { title: "파이어베이스 프로젝트 만들기", subTitle: "파이어베이스 프로젝트 개요", exams: ["https://codepen.io/jangka44/pen/xrrrXb"] }, 2: { title: "2. 간단한 채팅 만들기", subTitle: "데이터 넣기", exams: ["https://codepen.io/jangka44/pen/bRRROj"] }, 3: { title: "간단한 채팅 만들기 2", subTitle: "레이아웃 구성하기", exams: [ 'https://codepen.io/jg22miqm/pen/Kqqmvm##chat ui 만들기' ] }, 4: { title: "간단한 채팅 만들기 3", subTitle: "rules, 보안규칙설정하기", exams: [] }, 5: { title: "간단한 채팅 만들기 4", subTitle: "UI 보강", exams: [ 'https://codepen.io/jg22miqm/pen/jwwwwp##Firebase 5강 채팅 보강하기' ] }, 6: { title: "인증, 이메일로 회원가입", subTitle: "이메일로 회원가입", exams: [ 'https://codepen.io/jg22miqm/pen/LLLLJZ##이메일/비밀번호 회원가입' ] }, 7: { title: "이메일/비밀번호 이메일 인증", subTitle: "이메일/비밀번호 이메일 인증", exams: [ 'https://codepen.io/jg22miqm/pen/RggZQY##이메일/비밀번호 로그인과 이메일 인증' ] }, 8: { title: "페이스북 로그인", subTitle: "페이스북 로그인", exams: [ 'https://codepen.io/jg22miqm/pen/awwLaQ##페이스북으로 인증하기' ] }, 9: { title: "채팅 보강", subTitle: "인증 연결하기", exams: [ 'https://codepen.io/jg22miqm/pen/owwogN##채팅에 인증 연결하기' ] }, 10: { title: "간단한 메모장 만들기1", subTitle: "메모장 레이아웃 구성", exams: [ 'https://codepen.io/jg22miqm/pen/dRzojL##메모어플 레이아웃 만들기' ] }, 11: { title: "간단한 메모장 만들기 2", subTitle: "UI, 이벤트 처리", exams: [ 'https://codepen.io/jg22miqm/pen/eRENLV##메모어플 자바스크립트' ] }, 12: { title: "간단한 메모장 만들기 3", subTitle: "인증하기, Rules 지정하기", exams: [ 'https://codepen.io/jg22miqm/pen/XgamJx##메모어플에 인증 연결하기' ] }, 13: { title: "간단한 메모장 만들기 4", subTitle: "데이터베이스 작업", exams: [ 'https://codepen.io/jg22miqm/pen/gRxawL##간단한 메모장 만들기' ] }, 14: { title: "스토리지 1", subTitle: "스토레이지 기능 활용하기", exams: [ 'https://codepen.io/jg22miqm/pen/owEEBL##이미지 업로드 하기' ] }, 15: { title: "스토리지 2", subTitle: "스토레이지 기능 활용하기", exams: ['https://codepen.io/jg22miqm/pen/KqQoKP##이미지 업로드 보강'] }, 16: { title: "호스팅 사용하기", subTitle: "호스팅 사용하기", exams: [] } } }, class5: { title: "리액트! TODO 앱", lecs: { 1: { title: "기본개념 잡기 예제 1.", subTitle: "JSX 기초", exams: [ 'https://codepen.io/jg22miqm/pen/owZmxr##JSX 기본 표기법', 'https://codepen.io/jg22miqm/pen/JJWxKz##JSX 안에서 JavaScript expression 사용', 'https://codepen.io/jg22miqm/pen/QgvvMM##JSX 안에 다른 변수 불러오기', 'https://codepen.io/jg22miqm/pen/BZRZqO##JSX 안에 함수결과 불러오기', 'https://codepen.io/jg22miqm/pen/EXmmrz##JSX는 JavaScript Object', 'https://codepen.io/jg22miqm/pen/NgjgPY##JSX 중첩해서 사용하기', 'https://codepen.io/jg22miqm/pen/zzwzBO##JSX 속성은 camelCase', 'https://codepen.io/jg22miqm/pen/bRWRRj##JSX는 사실 React.createElement' ] }, 2: { title: "기본개념 잡기 예제 2.", subTitle: "컴포넌트 기초", exams: [ 'https://codepen.io/jg22miqm/pen/wedeOR##function으로 component 만들기', 'https://codepen.io/jg22miqm/pen/VWbzYQ##class로 component 만들기', 'https://codepen.io/jg22miqm/pen/rwmzMW##component도 JSX 처럼 사용', 'https://codepen.io/jg22miqm/pen/XgRadN##function으로 RoundButton 만들기', 'https://codepen.io/jg22miqm/pen/dRWzdj##class로 RoundButton 만들기', 'https://codepen.io/jg22miqm/pen/YQVxrO##RoundButton 두개 넣기' ] }, 3: { title: "기본개념 잡기 예제 3.", subTitle: "사각형 태그 만들기", exams: [ 'https://codepen.io/jangka44/pen/owZmVb##홍길동 안녕하세요.', 'https://codepen.io/jangka44/pen/yXMwyZ##사각형 만들기' ] }, 4: { title: "기본개념 잡기 예제 4.", subTitle: "사각형 태그 만들기 2", exams: [ 'https://codepen.io/jangka44/pen/yXMwyZ##사각형 만들기 2개 만들기' ] }, 5: { title: "기본개념 잡기 예제 5.", subTitle: "사각형 태그를 이용해서 버튼 태그 만들기", exams: [ 'https://codepen.io/jangka44/pen/MopxwR##사각형 이용해서 버튼만들기' ] }, 6: { title: "기본개념 잡기 예제 6.", subTitle: "버튼에 클릭 이벤트 걸기", exams: [ 'https://codepen.io/jangka44/pen/NgpJNB##버튼 클릭이벤트 만들기' ] }, 7: { title: "이벤트와 리스트 1.", subTitle: "버튼에 클릭 이벤트 걸기 심화", exams: [ 'https://codepen.io/jangka44/pen/awJMpd##버튼 클릭이벤트 만들기 v2', 'https://codepen.io/jangka44/pen/BZWbZP##버튼 클릭이벤트 만들기 v3' ] }, 8: { title: "이벤트와 리스트 2.", subTitle: "버튼에 클릭 이벤트 걸기 심화 2", exams: [ 'https://codepen.io/jangka44/pen/zzZbaq##버튼 클릭이벤트 만들기 v5 스텝 카운터' ] }, 9: { title: "이벤트와 리스트 3.", subTitle: "INPUT 다루기", exams: [ 'https://codepen.io/jangka44/pen/vZxMjP##INPUT 다루기' ] }, 10: { title: "이벤트와 리스트 4.", subTitle: "JSX 배열 만들기", exams: [ 'https://codepen.io/jangka44/pen/dRzWgr##jsx 배열 만들기' ] }, 11: { title: "이벤트와 리스트 5.", subTitle: "컴포넌트를 이용해서 단순한 리스트 만들기", exams: [ 'https://codepen.io/jangka44/pen/GEvEgo##컴포넌트 구성해서 단순한 리스트 만들기' ] }, 12: { title: "TODO 앱 만들기 1.", subTitle: "컴포넌트를 이용해서 복잡한 리스트 만들기 1", exams: ["https://codepen.io/jangka44/pen/vZwaqd##컴포넌트를 사용한 복잡한 리스트 1"] }, 13: { title: "TODO 앱 만들기 2.", subTitle: "컴포넌트를 이용해서 복잡한 리스트 만들기 2", exams: ['https://codepen.io/jangka44/pen/Xgagjy##컴포넌트를 사용한 복잡한 리스트 2'] }, 14: { title: "TODO 앱 만들기 3.", subTitle: "버튼 눌러서 리스트에 아이템 추가하기", exams: [ 'https://codepen.io/jg22miqm/pen/EXEYYz##TodoApp과 TodoList 컴포넌트 구성', 'https://codepen.io/jg22miqm/pen/OgvLMj##버튼 눌러서 리스트에 아이템 추가하기' ] }, 15: { title: "TODO 앱 만들기 4.", subTitle: "concat의 역할과 필요성", exams: [ 'https://codepen.io/jg22miqm/pen/owqvWx##concat의 역할과 필요성' ] }, 16: { title: "TODO 앱 만들기 5.", subTitle: "리스트 아이템 삭제하기", exams: [ 'https://codepen.io/jg22miqm/pen/xrWKWZ##filter의 역할과 필요성', 'https://codepen.io/jg22miqm/pen/XgErBJ##리스트 아이템 삭제하기' ] }, 17: { title: "TODO 앱 만들기 6.", subTitle: "input을 통해서 새로운 값 추가하기", exams: [ 'https://codepen.io/jg22miqm/pen/MoVgRg##input을 통해서 새로운 값 추가하기', 'https://codepen.io/jg22miqm/pen/MoVWwY##TodoItem 분리하기' ] }, 18: { title: "앱 디테일 살리기 1.", subTitle: "수정기능 추가하기", exams: [ 'https://codepen.io/jg22miqm/pen/JJLjOO##수정기능 추가하기', ] }, 19: { title: "앱 디테일 살리기 2.", subTitle: "필터기능 추가하기", exams: [ 'https://codepen.io/jg22miqm/pen/gReOBy##필터기능 추가하기', 'https://codepen.io/jg22miqm/pen/WOzvqP##Todo 완료기능 추가하기' ] } } }, class4: { title: "제이쿼리활용과 최신기술", lecs: { 1: { title: "이미지 슬라이더 만들기", subTitle: "jquery 기초 복습", exams: [ "https://codepen.io/jangka44/pen/MomMmx##강의용 예제", "https://codepen.io/jangka44/pen/OggmeW" ] }, 2: { title: "이미지 슬라이더 만들기", subTitle: "jquery 기초 복습", exams: [ "https://codepen.io/jangka44/pen/MomMmx##강의용 예제", "https://codepen.io/jangka44/pen/pwwPXL" ] }, 3: { title: "이미지 슬라이더 만들기", title: "이미지 슬라이더 만들기와 each 로 개별적인 오토플레이", exams: ["https://codepen.io/jangka44/pen/gRxVbG"] }, 4: { title: "3차원 사이트 만들기", subTitle: "3차원 사이트 만들기 1", exams: ["https://codepen.io/jangka44/pen/mwRomL", "https://codepen.io/jangka44/pen/awpMqJ"] }, 5: { title: "3차원 사이트 만들기", subTitle: "3차원 사이트 만들기 2", exams: [ "https://codepen.io/jangka44/pen/mwRoaQ", "https://codepen.io/jangka44/pen/XgpQba" ] }, 6: { title: "3차원 사이트 만들기", subTitle: "3차원 사이트 만들기 3", exams: [ "https://codepen.io/jangka44/pen/XgpQba", "https://codepen.io/jangka44/pen/ZyLZyJ" ] }, 7: { title: "3차원 사이트 만들기", subTitle: "3차원 사이트 만들기 4", exams: ["https://codepen.io/jangka44/pen/OgjKqa"] }, 8: { title: "vue.js 기초 예제", subTitle: "vue.js 기초 예제 1", exams: [ "https://codepen.io/jangka44/pen/yXzBxM", "https://codepen.io/jangka44/pen/WOZNxj" ] }, 9: { title: "vue.js 기초 예제", subTitle: "vue.js 기초 예제 2", exams: [ "https://codepen.io/jangka44/pen/owGNjO", "https://codepen.io/jangka44/pen/EXwxgO", "https://codepen.io/jangka44/pen/BZwaWQ" ] }, 10: { title: "vue.js 기초 예제", subTitle: "vue.js 기초 예제 3", exams: ["https://codepen.io/jangka44/pen/bRoGRW", "https://codepen.io/jangka44/pen/BZwaJW", "https://codepen.io/jangka44/pen/vZeYjL"] }, 11: { title: "vue.js 기초 예제", subTitle: "vue.js 기초 예제 4", exams: ["https://codepen.io/jangka44/pen/wervYr", "https://codepen.io/jangka44/pen/GEMRPr", "https://codepen.io/jangka44/pen/pwWvzQ"] }, 12: { title: "vue.js 기초 예제", subTitle: "vue.js 기초 예제 5", exams: [ "https://codepen.io/jangka44/pen/bRoNVM##v-show", "https://codepen.io/jangka44/pen/ZyXYWN##v-for" ] }, 13: { title: "vue.js 기초 예제", subTitle: "v-model 설명", exams: [ "https://codepen.io/jangka44/pen/XgBGgQ##v-model을 사용하는 이유, 제이쿼리 버전", "https://codepen.io/jangka44/pen/EXpGwZ##v-model을 사용하는 이유, vue 버전", "https://codepen.io/jangka44/pen/mwjava##v-model을 사용하는 이유, vue 버전(더 깔끔한)" ] }, 14: { title: "vue.js Markdown 에디터 예제", subTitle: "vue.js Markdown 에디터 예제", exams: ["https://codepen.io/jangka44/pen/OgwYYR"] }, 15: { title: "vue.js Markdown 에디터 예제", subTitle: "vue.js Markdown 에디터 예제를 응용", exams: ["https://codepen.io/jangka44/pen/OgwYYR"] }, 16: { title: "vue.js 그리드 컴포넌트", subTitle: "vue.js 로 나만의 태그 만들기", exams: [ "https://codepen.io/jangka44/pen/BZOWJG", "https://codepen.io/jangka44/pen/pwOeLo", "https://codepen.io/jangka44/pen/EXeWpZ", "https://codepen.io/jangka44/pen/weEJLL" ] }, 17: { title: "vue.js 그리드 컴포넌트", subTitle: "그리드 컴포넌트(태그 만들기)", exams: [ "https://codepen.io/jangka44/pen/awaEzv", "https://codepen.io/jangka44/pen/eRLvYq" ] }, 18: { title: "vue.js GitHub 커밋 목록", subTitle: "아작스로 데이터 받아오기", exams: [ "https://codepen.io/jangka44/pen/GEXmpe##아작스 데이터 받아오기", "https://codepen.io/jangka44/pen/mwGxME##아작스 데이터 받아오기(제이쿼리)", "https://codepen.io/jangka44/pen/awaWpq##아작스 데이터 받아서 저장" ] }, 19: { title: "vue.js GitHub 커밋 목록", subTitle: "검색기능을 위한 자바스크립트 함수", exams: [ "https://codepen.io/jangka44/pen/RgYKwP##&& 활용법", "https://codepen.io/jangka44/pen/MoqJjB##indexOf 사용법", "https://codepen.io/jangka44/pen/owPBYN##indexOf 사용법(배열버전)", "https://codepen.io/jangka44/pen/rwZyBB##객체 접근 방법", "https://codepen.io/jangka44/pen/xragjK##some 을 통한 검색조건 체크", "https://codepen.io/jangka44/pen/yXxgWw##Object.keys와 some의 조합", "https://codepen.io/jangka44/pen/MoqJJB##검색" ] }, 20: { title: "vue.js GitHub 커밋 목록", subTitle: "ajax로 불러온 데이터를 그리드 컴포넌트로 보여주고 검색기능 추가", exams: [ "https://codepen.io/jangka44/pen/GEXrqq##검색", "https://codepen.io/jangka44/pen/mwGRJV##검색", "https://codepen.io/jangka44/pen/rwZmKJ##깃허브 커밋 리스트 + 검색기능" ] } } } }; initClassInfos(); new Vue({ el: "#app", data() { return { classInfos }; }, methods: { startSlider(lec) { var slides = lec.slides; startPageSlider({ slides: slides }); } } }); ```

SJ 강좌

{{classInfo.title}} 강좌 예제

{{lec.titleForPrint}} : {{lec.subTitle}}

요약 슬라이드로 보기

{{sumKey}}

예제

적은 설명, 많은 예제

요약