숨만쉬어도 귀여운타입:D

오답문제 풀이를 해볼게요 ! 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } i값 sum값 1 __ 1 2 __ 2 3 __ 2 4 __ -2 5 __ 3 6 __ 18 7 __ 18 8 __ 10 9 __ 19 10 __ 190 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[..

JAVASCRIPT로 music player를 만들어볼게요 ! 게임효과 -1 (Jquery , gsap) 전체소스보러가기 이전소스도 참조해 주세요 ! 오늘은 뮤직플레이어 기능을 추가 할거에요 재생, 정지, 다음곡, 이전곡, 진행바(duration)기능, 시간계산 요런 기능들을 추가했어요 먼저 HTML부분을 볼게요 ! Music 노래 제목 노래 작가 이름 0 1 구조는 요렇게 잡았구요 재생관련 아이콘들은 svg파일을 이용해서 이미지를 넣어줬어요 ! 스크립트 부분 볼게요 ! // control-play let musicIndex =1; //현재 음악 인덱스 // 음악재생 const loadMusic=(num)=>{ musicName.innerText = allMusic[num-1].name; //뮤직 이름 ..

JAVASCRIPT로 GAME 효과를 줘볼게요 ! 먼저 HTML부분을 볼게요 ! grovy game word 뮤직듣기 뮤직듣기 뮤직듣기 뮤직듣기 JQUERY와 GSAP 스크립트를 이용하려고 하단에 추가했구요 GAME느낌을 내기위해 SVG 파일을 백그라운드에 넣었어요 ! 스크립트 부분 볼게요 ! 자바스크립트 부분을 볼게요 ! 1. 온로드시 마우스 이미지를 변경하여 따라다니게 했어요 ! window.onload = function(){ window.addEventListener("mousemove",e=>{ gsap.to(".cursor", { duration : 0.1, left : e.pageX-5, top : e.pageY-10 }); }); } 2. 시간을 우측상단에서 매초 바뀌게끔 했습니다. fun..

at(), charAt(), charCodeAt(), charPointAt(), concat(), localeCompare(), normalize(), padEnd(), padStart(), repeat() 객체들을 알아볼게요 ! at() at() 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환합니다. 양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 셉니다. const array1 = [5, 12, 8, 130, 44]; let index = 2; console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`); // Expected output: "Using a..

오답풀이를 해볼게요 ! 자바스크립트 문제 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } 2 -1 3 15 9 16 128 119 129 답은 129 나와요 마지막에 안더해줘서 틀림 ㅜㅠ 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < min) min = num[i]; ..

패럴랙스효과주기 skrollr.js 을 이용한 iframe의 width값이 작아 잘안나와요 ㅜ 느낌만 봐주세요 ! skrollr.js 란? skrollr은 JavaScript 라이브러리로, 스크롤 이벤트를 이용하여 웹사이트에 다양한 애니메이션을 적용할 수 있습니다. 보다 쉽게 css 애니매이션효과를 쉽게 줄수있어요 공식홈페이지를 가시면 좀더 다양한 예제와 설명을 볼수 있어요 ! https://prinzhorn.github.io/skrollr/ skrollr - parallax scrolling for the masses all numeric properties width, height, padding, font-size, z-index, blah blah blah prinzhorn.github.io 전체..

패럴랙스효과를 나타내기 전체 소스는 요기 body를 볼게요 ! Javascript Parallax Effect01 페럴랙스 이펙트 : 메뉴 효과 1 ... 9 메뉴1 ... 메뉴9 01 Section01 "성공의 비결은 실패에서 배우는 것이다." - 콜린 파월 .... scrollTop : 0px #section01 offsetTop() : 0px #section02 offsetTop() : 0px #section03 offsetTop() : 0px #section04 offsetTop() : 0px #section05 offsetTop() : 0px #section06 offsetTop() : 0px #section07 offsetTop() : 0px #section08 offsetTop() : 0px..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 슬라이드 효과 주기 - type 4 가로 무한 슬라이드 효과 주기 - type 5 세로 무한 슬라이드 효과 주기 - type 6 버튼슬라이드 슬라이드 효과 주기 - type 7 버튼슬라이드 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect Ex01 json 명언 & unsplash 이미지 무한가져오기 1 2 3 4 5 6 7 Ex 오늘의 명언 위처럼 body영역엔 이미지만 넣어줬어요 ! 이미지3번은 한꺼번에 3장을 가져오면 2번과 같이 가져와서 script실행해서 넣어줄거에요 css영역을 볼게요 #header #..

로또뽑기 & 명언랜덤을 만들어봤어요 ! 전체 소스는 요기 두소스의 body부분을 볼게요 오늘의 명언 로또번호 번호뽑기 랜덤뽑기 명언 보기 스크립트를 볼게요 let quonte= document.querySelector(".wise__quote"); let author= document.querySelector(".wise__author"); let wiseAll=[]; //모든 퀴즈 정보 저장 let item =[]; const dataQuestion = () => { fetch("json/dummy01.json") //이파일을 가져올거야 .then(res => res.json()) //이파일은 json이야 객체로바꿀꺼야 .then(items=> { //객체를 한번더 변경할거야 //랜덤한 번호를 가져옴 ..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 슬라이드 효과 주기 - type 4 가로 무한 슬라이드 효과 주기 - type 5 세로 무한 슬라이드 효과 주기 - type 6 버튼슬라이드 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect07 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next getgrovy@gmail.com 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 /* slider__wrap */ .slider__wrap { position: absolute; left: 50%; top:50..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 슬라이드 효과 주기 - type 4 가로 무한 슬라이드 효과 주기 - type 5 세로 무한 슬라이드 효과 주기 - type 6 버튼슬라이드 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect06 슬라이드 이펙트 : 버튼 슬라이드 1 2 3 4 5 6 7 ... prev next /*닷버튼영역*/ 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-ite..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 슬라이드 효과 주기 - type 4 가로 무한 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect04 슬라이드 이펙트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } /* 이미지가 보이는 영역 */ .slider__img { ..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect04 슬라이드 이펙트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } /* 이미지가 보이는 영역 */ .slider__img { position: relative; width:..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect02 슬라이드 이펙트 : 상하로 움직이기 1 2 3 4 5 getgrovy@gmail.com 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 .slider__inner 는 전체 이미지를 감싸고 있는 부모박스 : 이미지가 움직이는 영역이에용 그리고이미지를 .slider__inner로 묶어주면서 display에 flex 설정해줘서 이미지를 옆으로 쭉 보이게 했어요 아래처럼용 이미지가 보이는 영역 을 설정해줬어요 width와 height를 설정하고 orv..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect02 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 getgrovy@gmail.com 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 .slider__inner 는 전체 이미지를 감싸고 있는 부모박스 : 이미지가 움직이는 영역이에용 그리고이미지를 .slider__inner로 묶어주면서 display에 flex 설정해줘서 이미지를 옆으로 쭉 보이게 했어요 아래처럼용 이미지가 보이는 영역 을 설정해줬어요 width와 height를 설정하고 orver..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세 전체 소스는 요기 body를 볼게요 ! getgrovy@gmail.com 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img{ width: 800px; height: 450px; position: relative; overflow: hidden; } .slider { position: absolute; left: 0; top..

퀴즈 사이트 만들기 ! ( 객관식유형 * 60문제 한번에 만들기+json형식 ) ver.3 어제 만든것에서 오늘은 좀더 소스를 다듬을거에요 사용자 이름 입력 받는것 & timer 스크립트를 변경했어요 전체 소스는 요기 주요 소스를 볼게요 ! 1. 객체지향 프로그램에서 데이터를 추상화하는 단위는? ... 객체지향언어는 이다. 객체지향언어는 이다. 객체지향언어는 이다. 객체지향언어는 이다. 객체지향언어는 이다. 객체지향언어는 이다. 객체지향언어 제출하기 수험자 : 전체 문제수 : 0문항 남은 문제수 : 0 점수 : 0 1 정보처리 & 웹디자인 기능사 정보처리기능사 2005년 2회 .... 정보처리기능사 2011년 5회 웹디자인기능사 2009년 5회 웹디자인기능사 2016년 4회 과목을 선택하세요. 시작하기 ..

퀴즈 사이트 만들기 ! ( 객관식유형 * 60문제 한번에 만들기+json형식 ) ver.2 어제 만든것에서 오늘은 좀더 소스를 다듬을거에요 오답처리 부분 & 라벨 처리 부분 & 사용자 이름 입력 받는것 & timer 스크립트를 변경했어요 전체 소스는 요기 주요 소스를 볼게요 ! 2020년 1회 정보처리기능사 기출문제 제출하기 수험자 : 황상연 전체 문제수 : 0문항 남은 문제수 : 0 정보처리 & 웹디자인 기능사 정보처리기능사 2005년 2회 .... 정보처리기능사 2011년 5회 웹디자인기능사 2009년 5회 ... 웹디자인기능사 2016년 4회 시작하기 위처럼 body영역엔 소스가 없고 스크립트에서 소스를 cbt_quiz, cbt_omr에 소스를 뿌려 주는건 ver1과 동일해요 모달창을 시작할때 실행..

퀴즈 사이트 만들기 ! ( 객관식유형 * 60문제 한번에 만들기+json형식 ) 이번엔 객관식 퀴즈 60문제가 있는 사이트를 만들어볼까해요 60문제와 omr 카드가 같이 나오게 만들어 봤어요 전체 소스는 요기 주요 소스를 볼게요 ! 2012년 2회 웹디자인기능사 기출문제 59분 10초 제출하기 수험자 : 전체문제수 : 남은문제수 : 위처럼 body영역엔 소스가 없고 스크립트에서 소스를 cbt_quiz, cbt_omr에 소스를 뿌려 줄거에요 데이터 불러오는 부분 //데이터 불러오기 const dataQuestion = () => { fetch("json/gineungsaWD2012_02.json") //이 json파일을 가져올거에요 .then(res => res.json()) //res.send()는 se..

학원에서 시험 봤어요 같이 풀어봐요 ! 01. 다음의 결괏값을 작성하시오. { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } while 문에 false가 있어서 실행되지 않아요 ! 02. 다음의 결괏값을 작성하시오. { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); } a는 ++a b는 b++ c는 --c 이여서 b만 후치 연산자여서 result는 7 + 9 + 4 이후 연산이 끝나면 b값이 1증가하여 21이 나옵니다. 03. ..

마우스 위치에 따른 이미지 변경 위에서 mouseover & mouseout 이벤트가 발생할때 마다 img의 src 값을 변경 하였어요 ! 첫번째 문제라 난이도가 easy하네요 메뉴의 버튼을 클릭했을때 마다 슬라이드 토글 클릭해주세요 Javascript Typescript Node.js classList.toggle?? Element.classList classList는 DOMTokenList 객체로 element의 class 속성을 보여주고 & classList가 읽기전용이어도 다양한 메소드를 통해 class 목록을 조작할 수 있습니다. 그니까 우리가 코드를 작성할때 classList로 속성값을 추가하거나 값을 변경할수 있어요 ! Element.classList.toggle toggle은 동전의 앞면과..

String 사용 방법에 대해 알아볼게요 문자열 property length 문자열의 길이를 반환 합니다. 아래에서 선언한 str의 길이 42를 반환해요 ! const str = 'Life, the universe and everything. Answer:'; console.log(`${str} ${str.length}`); // Life, the universe and everything. Answer: 42 문자열 method 와 쓰이는 방식 1)charAt() 메서드 & for 문 & for in 문 charAt() 특정 문자의 위치를 반환 합니다. 또한 필요할땐 Object 형태 임시로 변경이 되어 사용이 가능해요 사용이 끝나면 String형태로 돌아오지만요 아래 for문과 for in 문을 보시..

학원에서 시험 봤어요 같이 풀어봐요 ! 01. 결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } indexOf 를 써서 첫번째 a 값을 가져와서 1 indexOf 는 앞에서 부터 값을 체크해요 lastindexOf 를 써서 첫번째 a 값을 가져와서 3 lastindexOf 은 뒤에서 부터 a값을 체크 해요 includes()는 a값이 있으므로 true includes()는 값의 유무를 따져서 true..

오늘은 CSS속성 검색 사이트를 만들어볼게요 오늘은 css 속성이 많아서 소스가 길어지기 때문에 소스 보기로 소스를 새창에서 띄워주세요 ! 소스보기 ! CSS 부분의 오늘의 POINT ! 이번엔 반응형웹으로 사이트를 만들어 볼꺼야 지금까지 사이트를 만들땐 요소의 크기를 width : 10px or 10%로 설정하는 경우가 많었어 이렇게 줄경우 화면을 줄일경우 문제가 생기더라구 ! 이럴땐 vw와 vh가 써서 해결할수있어 ! vw와 vh는 뷰포트 크기(주로 브라우저창의 크기)의 100분의 1에 해당하는 단위야 예를 들어 브라우저 창의 높이가 500px일때 1vh는 5px이고 마찬가지로 브라우저 창의 넓이가 500px이라면 1vw는 5px이야 그래서 주로 반응형 브라우져에서 사용하구 이를통해서 이번엔 css ..

오늘은 학원에서 시험을 봤어요 같이 풀어봐요 ! 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 즉시 실행 함수에 관한걸 물어보네요 ! function(){} 을 ()로 한번 감으면 스크립트 로딩시 즉시 실행되요 ! 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 선언적 함수를 실행시키는거에요 ! 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i in이 들어가서 key 즉 순서반환 for ( let i of num) >> in이 들어가서 of 즉 value 값 반환 답은 num였네요 13. 다..

오늘은 학원에서 시험을 봤어요 같이 풀어보아요 ! 1번 { if( null ){ console.log("true"); } else { console.log("false"); } } if문안에 null 값이 들어가면 false를 반환해요 ! 2번 { let num = 0; while( num 6 ){ break; } console.log(num); } } while문 조건이 true일때의 while문은 break를 만나야 반복을 정지합니다. num++ 이 초기값 num이 0에서 증가한 상태로 if문을 만나 1 2 4 5 6 이 실행됩니다 3은 조건문 num==3일때를 만나 continue ( 초기로돌아가며 아래 코드는 실행안함!) 7번 { for(let i=1; i { const str = "함수가 실행되..

01. 변수 : 데이터 불러오기 변수 안에 저장된 데이터를 불러오는 방법 { let x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 100 200 javascript 02. 상수 : 데이터 불러오기 변수 안에 저장된 데이터를 불러오는 방법 { const x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 100 200 javascript 03. 배열 : 데이터 불러오기 각배열을 호출하여 배열안의 데이터를 불러오기 { const arr = [100, 200, "javascript"]; console.log(arr[0], arr[1], arr[2]); } 100 200 javascript 04...

01. 다음의 출력값을 보고 빈칸을 채우시오! { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 더보기 x, y, x+y 02. 다음의 출력값을 보고 빈칸을 채우시오! { let x = 100; let y = 200; let z = "javascript"; x = ___; y = ___; z = ___; console.log(x); console.log(y); console.log(z); //300 //400 //jquery } 더보기 300, 400, "jquery" 03. 다음의 출력값을 보고 빈칸을 채우시오! { let x = 100;..

Arrow function 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다 화살표 함수(arrow function)를 사용하는 것입니다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다. let func = function(arg1, arg2, ...argN) { return expression; }; let func = (arg1, arg2, ...argN) => expression //위함수의 화살표함수버전! let sum = function(a, b) { return a + b; }; /* let sum = (a, b) => a + b; 위 화살표 함수는 아래 함수의 축약 버전입니다. */ alert( sum(1, 2) ); // 결괏값 3 let age =..

Template literals이란 ?? 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다 `string text` `string text line 1 string text line 2` // "string text line 1 // string text line 2" // 위처럼 표시하려면 아래와 같이 입력하면 됨! console.log("string text line 1\n"+"string text line 2"); console.log(`string text line 1 string text line 2`); //아래 템플릿레터럴 표기법을 이용하면 훨신 간단하게 표현할수있다 표현식을 쓸때 ! let a = 5, b = 10;..