코딩하는 거북이

검색할 수 있는 효과 만들기 이번에는 여러개의 목록 중 사용자가 검색한 내용을 볼 수 있는 검색효과를 만들어보도록 하겠습니다. 완성화면 HTML 작성하기 1 2 3 4 5 6 자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 css속성 : css속성 설명 gnsrdbi@naver.com CSS 작성하기 /* header */ #header { padding: 1.4vw 1.4vw 1.8vw 1.4vw; } #header ul { } #header li { list-style: none; display: inline; } #header li a { text-decoration: none; width: 50px; height: 50px; line-he..

마우스 위치를 따라다니는 조명 효과 만들기 페이지 미리보기 HTML 작성하기 Javascript Mouse Effect03 마우스를 따라다니는 조명 효과 1 2 3 4 5 6 If not now, then when ? 지금이 아니면, 언제 하실 건가요 ? gnsrdbi@naver.com HTML 정리해보기 3번 페이지에서는 img03 bg03 의 class를 주었고, 조명효과를 사용하기 위해 덮어쓰는 배경이미지의 투명도를 약하게 주었습니다. 2번 페이지와 달리 마우스를 따라다니는 "mouse__cursor" 도형은 하나만 필요합니다. CSS 작성하기 #header { z-index: 100; } .mouse__wrap { cursor: none; } .mouse__text { width: 100%; he..

마우스 위치를 따라다니는 효과 만들기 (gsap 사용) 페이지 미리보기 HTML 작성하기 Javascript Mouse Effect02 GSAP를 이용해서 마우스를 따라다니기 1 2 3 4 5 6 Age is no guarantee of maturity. 나이가 성숙을 보장하지는 않는다. gnsrdbi@naver.com HTML 정리해보기 1번페이지와 거의 동일하게 만들었지만 마우스를 따라다니는 "mouse__cursor" 박스를 2개 더 만들어 총 세개를 만들어 주었습니다. 2번 페이지에서는 2번 이미지와 2번의 배경색을 사용하기 위해 class에 img02와 bg02를 추가했습니다. CSS 작성하기 .mouse__wrap { cursor: none; } .mouse__text { width: 100%..

마우스 위치를 따라다니는 효과 만들기 이번에는 웹 페이지 내에 도형을 만들어 마우스를 따라다니는 효과를 만들어 보도록 하겠습니다. 페이지 미리보기 HTML 작성하기 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 If you don't want to regret, don't live like that, if you're going to live like that, don't regret. 후회하기 싫으면 그렇게 살지 말고, 그렇게 살거면 후회하지마라. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px gnsr..

객관식 문제 출력하기 HTML 문서작성 Quiz 객관식 확인하기 유형 1 2 3 4 5 정답 ! 오답 ! 정답 확인하기 gnsrdbi@naver.com HTML 정리해보기 앞서 게시한 주관식 확인하기 유형의 퀴즈 페이지와 유사하지만, 이번에는 객관식을 확인하는 유형이므로 주관식에서 사용했던 정답을 적는 input박스의 타입을 text에서 radio로 바꾸어주었습니다. 총 4개의 보기를 만들기 위해 각각 다른 id, value값을 주고 네 개의 input 버튼을 만들었습니다. 새로 추가된 CSS .quiz__choice label { display: flex; } .quiz__choice label input { position: absolute; clip: rect(0 0 0 0); width: 1px;..

Javascript 연습문제 1. 결괏값을 작성하시오 { (function(){ console.log("함수가 실행되었습니다."); })(); } 결과 확인하기 함수가 실행되었습니다. 2. 결괏값을 작성하시오 { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 결과 확인하기 함수가 실행되었습니다. 3. 결괏값을 작성하시오 { let sum = 0; for(var i=1; i num2) return num1 else return num2 } console.log(func(10, 23) + func(40, 50)) } 결과 확인하기 73 이상으로 몇 가지 javascript관련 연습문제를 풀어보았습니다 !

주관식 문제 여러개 출력하기 퀴즈화면 예시 HTML 문서 작성 Quiz 주관식(여러문제) 확인하기 유형 1 2 3 4 . 정답 ! 오답 ! 정답 확인하기 . 정답 ! 오답 ! 정답 확인하기 . 정답 ! 오답 ! 정답 확인하기 gnsrdbi@naver.com HTML 정리해보기 앞서 게시한 퀴즈 화면 만들기의 퀴즈부분을 두번 더 반복하여 총 세개를 만들어 주었습니다. CSS 문서 작성 .quiz__wrap { display: flex; justify-content: center; flex-wrap: wrap; align-items: flex-start; } 추가된 CSS 세 개의 퀴즈 박스의 지문, 해설 등의 길이가 달라 서로 같은 크기로 맞춰지며 짧은 지문의 문제에 여백이 생겨버리는 탓에 "align-i..

javascript에서 사용하는 함수의 유형 몇가지 이번에는 javascript의 함수유형에 대해 간단하게 몇 가지 알아보겠습니다. 함수와 매개변수를 이용한 형태 function func(num, str1, str2){ document.write(num + "." + str1 + "가 " + str2 + "되었습니다. "); } func("1","함수","실행"); func("2","자바스크립트","실행"); func("3","리액트","실행"); 결과 확인하기 1.함수가 실행되었습니다. 2.자바스크립트가 실행되었습니다. 3.리액트가 실행되었습니다. 함수와 변수를 이용한 형태 function func(num, str1, str2){ document.write(num + "." + str1 + "가 " +..

Javascript 간단한 연습문제 결과값 작성 문제 { if( null ){ console.log("true"); } else { console.log("false"); } } 결과 확인하기 false { let num = 0; while( num 6 ){ break; } console.log(num); } } 결과 확인하기 12456 풀이 변수 num을 설정해주고 num에 대한 while문으로 실행됩니다. num은 숫자이기 때문에 while(true)는 무한 실행 되지만, num이 6보다 커지면 break가 걸리게 됩니다. num의 ++연산이 console.log보다 전에 있으므로 연산이 우선적으로 진행되고 3일 때 건너뜁니다. 따라서 답은 12456이 됩니다. { for(let i=1; i { co..

문제와 정답을 적을 수 있는 화면 만들기 퀴즈화면 예시 HTML 문서 작성 Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 설명 gnsrdbi@naver.com HTML 정리해보기 앞서 게시한 퀴즈화면 만들기 1번과 같은 형식으로 구조를 짰습니다. CSS 문서 작성 .quiz__answer .input { background-color: #fff; border: 6px groove #cacaca; width: 100%; font-family: HealthsetGothic; padding: 10px 20px; font-size: 22px; margin-bottom: 10px; } .quiz__footer::before { content: "✔Tip"; color: #F5534F; font-weigh..

문제와 정답을 적을 수 있는 화면 만들기 이번에는 화면에 문제를 띄우고 버튼을 만들어 정답을 볼 수 있도록하는 페이지를 만들어 보도록 하겠습니다 ! 페이지 디자인하기 문제를 적어주고 '정답 확인하기' 버튼을 누르면 정답을 볼 수 있도록 디자인 해봤습니다. HTML 문서 작성 Quiz 정답 확인하기 유형 . 정답 확인하기 gnsrdbi@naver.com HTML 정리해보기 기본적으로 페이지의 헤더와 메인, 푸터 영역을 만들어주고 메인영역에 다시 퀴즈에 대한 헤더, 메인, 푸터 영역을 만들어줍니다. quiz__header 에는 quiz__title 하나를 넣어주었습니다. quiz__main 에는 quiz__question(문제 부분), quiz__view(캐릭터 부분), quiz_answer(정답 부분) 세..

데이터 불러오기 변수, 상수, 배열, 객체에 데이터를 저장하는 법에 대해서 알아보았었는데, 이번에는 저장되어있는 데이터를 불러오는 방법들에 대해서 자세히 알아보겠습니다 ! 01. 변수 출력하기 변수를 불러오는 방법 { let x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 결과 확인하기 100, 200, javascipt 02. 상수 출력하기 상수를 불러오는 방법 { const x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 결과 확인하기 100, 200, javascipt 03. 배열 출력하기 배열을 불러오는 방법 { const arr = [100, 200, "javascript"]; ..

합 구하는 함수 만들어보기 함수를 이용해서 시작값과 끝값을 사용자로부터 받아와 시작값부터 끝값까지의 합을 출력하는 함수를 만들어보도록 하겠습니다. 함수 만들기 function calculator(a,b){//calculator라는 이름의 함수와 매개변수(a, b) let sum = 0; for(let i=a; i

Javascript 간단한 연습문제 문제 1. 주석의 출력값을 보고 빈칸을 채우시오. { const obj = [ {a:100, b:200}, {c:"javascript"} ]; console.log(________); console.log(________); console.log(________); //100 //200 //javascript (출력값입니다.) } 풀이1. obj는 배열안에 객체의 형식으로 저장된 데이터입니다. obj의 모든 요소를 순서대로 나타내면 다음과 같습니다. obj[0].a = 100 obj[0].b = 200 obj[1].c = javascript Tip ! 배열안에 객체가 들어있을 수도, 객체안에 배열이 들어있을 수도 있습니다. 잘 보세요 ! 문제2. 다음의 출력값을 보고 ..

테이블 만들기 HTML에서 만들 수 있는 테이블을 Javascript의 for문과 if문을 사용해서 어떻게 만들 수 있는지 한번 알아보도록 하겠습니다. HTML로 테이블 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 HTML에서 테이블을 만드는 법은 위 사진과 같습니다. 한 개의 태그에 각각 태그 다섯 개를 넣어주고, 홀수는 파란색의 스타일태그를, 짝수는 빨간색의 스타일태그를 넣어주면 됩니다. Javascript For, If 문으로 테이블 만들기 let table = "" let num = 1; for(let i=1; i

Javascript 데이터 제어 if 문 if(0){ document.write("실행true") } else { document.write("실행False") } if문의 기본 형식입니다. Tip ! 조건문에 False가 나오는 값 : 0, null, undefined, false, ""(빈문자열) 이 다섯가지만 false가 출력됩니다. if문 생략 const num = 100; if(num == 100){ document.write("실행되었습니다.(True)"); } else { document.write("실행되었습니다.(False)") } if(num) document.write("실행되었습니다.(True)"); else document.write("실행되었습니다.(False)"); 위의 if문..

함수를 이용한 연습문제 연습문제 1 사용자가 prompt창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여주는 프로그램을 작성하시오. 풀이 Tip ! 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언합니다. parseInt() 함수를 사용해 prompt창에 입력한 내용을 숫자로 변환합니다. (prompt 창에 입력한 내용이 숫자가 아니면 parseInt() 함수는 NaN을 반환합니다.) 반환값이 숫자일 경우에만 함수를 실행합니다. 풀이 function isPositive(n) { if (n > 0) { alert(`${n}은 양수입니다.`); } else if (n < 0) { alert(`${n}은 ..

함수 (실행문) JavaScript에서 함수는 재사용 가능한 코드 블록입니다. 함수는 정의되어 호출될 때 실행됩니다. JavaScript에서 함수를 작성하려면 다음과 같은 구문을 사용합니다. 선언적 함수 function func(){ document.write("실행되었습니다.") } func(); 함수 실행의 기본 문법입니다. function 함수이름(함수의 매개변수){함수가 실행할 실행코드} 의 형식으로 작성합니다. 익명 함수 const func = function(){ document.write("실행되었습니다.") } func(); 변수 func를 만들어 함수를 저장해주어 실행이 가능합니다. 매개변수 함수 function func(str){ document.write(str); } func("실행..

Javascript에서 데이터를 저장에 대해서 알아보겠습니다 ! 데이터 저장 : 변수 데이터 저장하기 : 상수 데이터 저장하기 : 배열 데이터 저장하기 : 객체 이상으로 Javascript의 데이터 저장에 대해서 알아보았습니다 !

Javascript에서 사용하는 If문(조건문)에 대해서 알아보도록 하겠습니다 ! If문 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나입니다. 조건문을 사용하면 프로그램이 특정 조건에 따라서 다른 동작을 하도록 할 수 있습니다. 조건문의 가장 기본적인 형태입니다. 조건식을 충족하면 화면에 '실행되었습니다.(true)'를 출력하고 조건식을 충족하지 못 하면 (else) '실행되었습니다.(False)'를 출력합니다. If문 생략 2~6번 라인과 8~9번 라인의 조건문은 같은 내용입니다. if문과 else문이 하나의 조건이라면 아래와 같이 중괄호를 생략하여 작성할 수 있습니다. 삼항연산자 (조건연산자) 마찬가지로 2~6번 라인의 조건문을 8번 조건문으로 한 줄에 표현한 것입니다. (조건식) ? 조건문을 ..

반복문과 조건문을 이용한 연습문제 반복문과 조건문을 활용한 연습문제를 한번 풀어보도록 하겠습니다. 문제1. 주어진 배열에서 10보다 큰 숫자만 찾아 화면에 표시하시오. 배열 : [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] See the Pen for, if 문 연습문제 by dlgnsrb227 (@dlgnsrb227) on CodePen. const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; // arr에 대한 배열 설정. for(let i=0; i 10){ // 배열의 i 번째가 10보다 작다는 조건문. document.write(arr[i] + ","); }; // arr의 i 번째 값 출력. }; Point 변수 i를 만들어 주었지만 원하는 결과..

반복문 반복문은 같은 동작을 여러 번 실행하기 위해 사용하는 문입니다. 반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실핼할 수 있습니다. 소스 코드도 깔끔해지고 프로그램 실행도 빨라지기 때문에 많이 쓰입니다. For 문 Javascript에서 가장 많이 쓰이는 반복문입니다. For (초기값; 조건; 증가식) {.....} 위와 같은 형식으로 쓰며, 변수를 사용하여 초기값을 적어주고 초기값에서부터 시작하여 조건을 만족할 때 까지 반복합니다. 초기값 : 카운터 변수를 선언하고 초기화합니다. 초기값은 0이나 1부터 시작합니다. 조건 : 문장을 반복하기 위해 체크할 조건. 조건을 만족해야 for 문에 있는 명령을 반복합니다. 증가식 : 문장을 실행한 후 카운터 변수를 증가시키는 부분입니..

Javascript에는 많은 연산자가 있는데 어떤 것들이 있는지 한번 알아보도록 하겠습니다. 산술 연산자 연산의 기본이 되는 산술 연산자. 응용해서 여러 곳에서 쓰이기 때문에 꼭 알아두어야 합니다. 산술 연산자 종류 속성설명 + 더하기 연산을 할 때 사용 문자와 문자, 문자와 변수 등을 연결할 때 사용 - 빼기 연산을 할 때 사용 * 곱하기 연산을 할 때 사용 / 몫을 구 할 때 사용 % 나머지를 구할 때 사용 ++ 1씩 증가시킬 때 사용 -- 1씩 감소시킬 때 사용 대입 연산자 대입 연산자 "="는 "같다"의 의미가 아니라 변수에 대입(저장)을 의미합니다. 대입 연산자 종류 설명 = x = 1은 우변의 1값을 좌변의 x 변수에 대입(저장) 합니다. += x =+2 는 x = x + 2 와 같습니다. -..

자료형이란 ? 자료형이란 프로그램에서 처리애햐 하는 자료의 형태를 뜻합니다. 자료의 형태는 여러개가 있는데 무엇이 있는지 알아보도록 하겠습니다. 위 그림과 같이 자료형의 유형으로는 원시유형 > 숫자형, 문자열, 논리형, 심벌, undefined, null 이 있습니다. 그럼 각각에 대해 알아보겠습니다. typeof() 함수 자료형에 대해 알아보기 전에 typeof()함수란, 소괄호 안에 값이나 변수를 넣으면 어떤 자료형인지 알 수 있는 자바스크립트에 미리 만들어져 있는 함수입니다. 각각의 자료형을 알아보며 typeof()함수에 넣었을 때 어떻게 표시되는지 같이 보도록 하겠습니다. 숫자형 (Number) 숫자형은 모든 프로그램에서 가장 기본이 되는 자료형으로 큰 따옴표 없이 그냥 입력하면 숫자로 인식합니다..