qqqwe

서치 이펙트 CSS의 속성 데이터들을 저장 시켜놓고 검색창에 검색을 하면 일치하는 정보들만 화면에 출력되게 만듭니다. 과정 코드입니다. HTML 1 2 3 4 5 6 자바스크립트 CSS 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 1개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지연 시간을 설정합니다. animatio..

마우스 이펙트 03 마우스 이펙트에 대한 세번째 사이트입니다. 마우스를 움직이면 정해진 범위만큼 마우스를 따라다니며 위 사이트를 HTML, CSS, JAVASCRIPT를 만들었고 아래는 코드들입니다. HTML Javascript Mouse Effect03 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Either you decide to stay in the shallow end of the pool, or you go out in the ocean. 당신은 수영장의 구석에 머무를지 바다로 나갈지를 당신 스스로 결정할 수 있다. kshkmn0929@naver.com CSS JAVASCRIPT 코드 설명 const cursor = document.querySelector(".mouse__curs..

마우스 이펙트 02 마우스 이펙트에 대한 사이트 두번째 제작입니다. 위 사이트를 HTML, CSS, JAVASCRIPT를 만들었고 아래는 코드들입니다. HTML Javascript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 I love the sea because it gives up so much without complaining 나는 바다를 사랑한다. 왜냐하면 바다는 아무런 불평도 없이 많은 것을 나눠주기 때문이다. kshkmn0929@naver.com CSS CSS 설명 justify-content : Flexbox 레이아웃에서 flex items의 주 축(main axis)을 따라 정렬하는 방법을 설정합니다.justify-content 속성은 flex-c..

마우스 이펙트 01 마우스 이펙트에 대한 사이트를 만들어 봤습니다. 사용자가 마우스를 움직이거나 특정한 위치로 이동 시키면 마우스가 반응하여 커서가 변화 합니다. HTML 구조 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 The cure for anything is saltwater sweat, tears or the sea. 무언가를 치유하는 것들은 모두 소금물이다. 땀, 눈물, 바다와 같이 말이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px kshkmn0929@naver.com CSS javas..

퀴즈 사이트 만들기 지난번에 이어 퀴즈 이펙트 4번을 만들어 보겠습니다. VS코드로 HTML, CSS, JAVASCRIPT를 이용해 사이트를 만들었습니다. HTML Quiz 주관식 확인하기 유형 1 2 3 4 정답입니다! 틀렸습니다! 정답 확인하기 JAVASCRIPT 자바스크립트 설명 선택자 document.querySelector(".quiz__wrap")은 querySelector 메서드를 이용하여 HTML 문서에서 CSS 선택자 .quiz__wrap을 가진 첫 번째 요소를 선택하고, 그 요소를 quizWrap 변수에 할당합니다. 이렇게 변수에 할당된 요소는 JavaScript를 이용하여 조작할 수 있습니다. quizWrap.querySelector(".quiz__title")은 querySelect..

자바스크립트 오답노트 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 정답 함수가 실행되었습니다. 해설 즉시 실행 함수(IIFE)를 사용하여 함수를 선언과 동시에 실행시켰기 때문에 "함수가 실행되었습니다."가 출력됩니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 정답 함수가 실행되었습니다. 해설 함수 선언식으로 func 함수를 선언하고, 매개변수로 기본값 "함수가 실행되었습니다."을 설정합니다. func 함수를 호출할 때 인자를 전달하지 않았으므로 기본값이 출력됩니다. 03. 결괏값을 작성하시오. { let sum =..

세번째 퀴즈 사이트 세번째로 만들게된 퀴즈 사이트입니다. 주관식 형식이며 답을 맞추게 되면 가운데 화면같이 강아지가 웃으며 정답 문구가 흔들리는 모션과 함께 출력되고, 틀리게 되면 왼쪽 화면과 같이 강아지가 슬퍼하며 틀렸다는 문구가 흔들리는 모션과 함께 출력됩니다. 완성된 모습 코드 Quiz 주관식 확인하기 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 kshkmn0929@naver.com 자바스크립트 부분 // 선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelectorAll(".qu..

퀴즈 이펙트 복습 퀴즈 이펙트 02 부분 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title span"); const quizTime = quizWrap.querySelector(".quiz__title em"); 이 코드는 JavaScript를 사용하여 HTML 문서의 클래스 이름이 "quiz__wrap"인 요소와 그 하위 요소들을 가져오는 것입니다. querySelector 메서드는 해당 선택자에 해당하는 첫 번째 요소를 반환합니다. 따라서 quizWrap 변수는 클래스 이름이 "quiz__wrap"인 요소를 나타냅니다. 그리고 quizWrap 변수를 사용..

01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 정답 1,2,3,4,5,6 02. 결괏값을 작성하시오. ( X ) { let num = 0; while( num 6 ){ break; } console.log(num); } } 정답 1,2,3,4,5,6 풀이 위 코드는 while 루프를 사용하여 num 변수를 1부터 증가시키면서 continue와 break 문을 사용하여 3을 건너뛰고 6을 초과하면 루프를 종료하는 코드입니다. 루프가 실행될 때마다 num 값을 출력합니다. 07. 결괏값을 작성하시오. { for(let i=1; i { const str = "함수가 실행되었습니다."; return str..

두번째 퀴즈 만들기 첫번째 퀴즈 만들기에 이어 두번째로 만들게 된 퀴즈 사이트입니다. 문제를 맞추면 위처럼 나오는 화면을 문제를 틀리면 위처럼 나오는 화면을 출력합니다. 코드 코드 설명 선택자 부분 const quizWrap = document.querySelector(".quiz__wrap"); 이 코드는 class가 "quiz__wrap"인 첫번째 DOM 요소를 찾아 quizWrap 변수에 할당합니다. querySelector 메소드는 주어진 선택자와 일치하는 첫 번째 요소를 반환합니다. const quizTitle = quizWrap.querySelector(".quiz__title span"); 이 코드는 quizWrap 내부에서 class가 "quiz__title"인 요소를 찾고 그 하위의 sp..

퀴즈 사이트 만들기! 강아지 참고 사이트 위 사이트는 강아지가 중앙에서 꼬리를 흔들고 있고, 정답 확인하기를 누르면 정답 텍스트로 전환 됩니다. 코드 Quiz 정답 확인하기 유형 . 정답 확인하기 연변대비 kshkmn0929@naver.com 자바스크립트 각 주석에 대한 설명입니다. 선택자 querySelector() 메서드를 사용하여 HTML 문서 내에서 지정된 클래스를 가진 요소를 선택합니다. 예를 들어, .quiz__wrap 클래스를 가진 요소를 quizWrap 변수에 할당합니다. 문제 정보 infoType, infoTime, infoNumber, infoQuestion, infoAnswer 변수에 각각 문제 유형, 시험 년도, 문제 번호, 문제 내용, 정답을 저장합니다. 문제 출력 선택된 요소들의..

01. 변수 : 데이터 불러오기 변수안에 저장된 데이터를 불러오는 방법입니다. var x = 100; //변수 x에 숫자 100을 저장함 var y = "200"; //변수 y에 문자 200을 저장함 var z = "javascript"; //변수 z에 문자 "javascript"를 저장함 console.log(x); console.log(y); console.log(z); 100 200 javascript 02. 상수 : 데이터 불러오기 상수안에 저장된 데이터를 불러오는 방법입니다. const x = 100, y = 200, z = "javscript"; console.log(x, y, z); 100 200 'javascript' 03. 배열 : 데이터 불러오기 배열 안에 데이터를 불러오는 방법입니다...

01. for문을 이용해서 1~8까지 출력 for(let i=1; i { document.write("함수가 실행되었습니다."); } func(); } 07. 익명 함수 (화살표 함수로 변환) 익명 함수는 이름이 없는 함수로, 변수에 할당될 수 있습니다. 함수 표현식이라고도합니다. 익명 함수는 함수 표현식에서 사용되는 것이 일반적입니다. { const func = function(){ document.write("함수가 실행되었습니다."); } func(); } // 화살표 함수 { const func = () => { document.write("함수가 실행되었습니다."); } func(); } 08. 매개 함수 (화살표 함수로 변환) 매개 함수는 다른 함수 내에서 호출되는 함수로, 매개 변수를 통해 ..

01. forEach() 배열 객체의 메서드 중 하나입니다. 이 메서드를 사용하면 배열의 각 요소에 대해 콜백 함수를 실행할 수 있습니다. array.forEach(function(element, index, array) { // 콜백 함수에서 수행할 코드 }); element: 현재 처리 중인 배열 요소의 값 index: 현재 처리 중인 배열 요소의 인덱스 값 array: forEach() 메소드를 호출한 배열 자체 예를 들어 다음과 같이 사용할 수 있습니다. { const str = [100, 200, 300, 400, 500]; str.forEach((element, index, array) =>l { document.write(element); document.write(index); docume..

01. 다음의 출력값을 보고 빈칸을 채우시오! ( X ) { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 풀이 var 변수를 사용하여 x, y, z에 값을 할당 해주고 console.log();로 실행하는 방법입니다. //100과 //200은 빈칸에 x와 y를 차례대로 넣고 마지막 실행문에는 x + y를 하여 더해주면 됩니다. 마지막 실행문에 300이라 적혀 있지 않고 당연히 z값을 부를 거라 생각 하여 답을 적어 틀렸습니다. 02. 다음의 출력값을 보고 빈칸을 채우시오! { let x = 100; let y = 200; let z = "..

양수 음수 구하기 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여 주는 프로그램을 작성해 보세요. let num = prompt("숫자를 입력하세요.") num1 = () => { if(num>0){ document.write(num+"은(는) 양수입니다."); } else if(num

데이터 제어 자바스크립트에서 데이터 제어란, 변수, 배열, 객체 등과 같은 데이터를 생성하고 수정하며, 데이터를 검색하고 조작하는 것을 의미합니다. 이는 프로그램에서 데이터를 저장하고 처리하는 것이 중요한 이유로, 데이터를 제어하는 기능은 자바스크립트 프로그래밍에서 핵심적인 역할을 합니다. 01. if문 if 다음 소괄호에 조건을 표기하여 결괏값에 따라 답이 나오는 명령입니다. const x = prompt("당신이 좋아하는 숫자는 무엇입니까?"); if(x == 100){ document.write("당신은 100점짜리 인간이네요!"); } else if(x == 99) { document.write("당신은 99점짜리 인간이네요!"); } else if(x == 98) { document.write(..

함수 자바스크립트 함수는 하나 이상의 동작 또는 계산을 수행하는 코드 블록입니다. 함수는 코드의 재사용성을 높이고, 모듈화 및 추상화를 통해 코드를 관리하기 쉽게 만듭니다. 분류 종류 설명 사용자 정의 함수 ● 선언적 함수 ● 익명 함수 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수입니다. 내장 함수 ● 인코딩, 디코딩 함수 ● 숫자 판별 함수 ● 유 . 무한 값 판별 함수 ● 숫자변환 함수 ● 문자 변환 함수 ● 자바스크립트 코드 변경 함수 프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해주는 함수입니다. 01. 선언적 함수 ▶ 선언적 함수의 형식 function 함수() { 실행문; } function compute() { console.log('선언적 함수')..

01. 변수 데이터 저장 변수는 데이터를 저장하는 값이고 변할 수 있습니다. { var x = 100; //변수 x에 숫자 100을 저장함 var y = "200"; //변수 y에 문자 200을 저장함 var z = "javascript"; //변수 z에 문자 "javascript"를 저장함 console.log(x); console.log(y); console.log(z); } 100 200 javascript Tip.여러 개의 변수를 선언할 경우 다음과 같은 방법으로 선언할 수 있습니다. var num, str, temp; var num = 10, str = 'javascript', temp = true 02. 변수 : 데이터 저장 + 데이터 변경 변수는 데이터를 저장 할수도 있지만 변경도 가능하다...

어떤 조건에 따라 명령 실행 순서를 바꾸거나 특정한 부분만 계속해서 반복하려면 조건문이나 반복문을 사용해야 합니다. 조건문은 명령을 실행하기 위해 조건을 체크하는 문으로, 앞에서 공부한 논릿값, 비교 연산자 등이 중요하게 사용됩니다. if 문, if...else 문 프로그램 소스는 작성된 순서대로 명령을 실행하는 것이 아니라 조건에 따라 명령을 실행하는 경우가 많습니다. 그래서 프로그래밍에서 조건문은 자주 사용하게 됩니다. if 문 if 문은 if 다음에 소괄호를 사용해서 조건을 표기합니다. 그리고 조건을 체크한 후 결괏값이 true이면 if 문에 있는 명령(들)을, false이면 if 문에 있는 명령은 건너뛰고 그 다음 명령을 실행합니다. if문이란, if예약어의 다음에 오는 중괄호({ })로 묶은 명..

오늘은 자바스크립트 문제에 대해 풀어보려고 합니다. 문제1 제가 풀어본 첫번째 방법입니다. 주어진 배열의 숫자를 10보다 큰 숫자인 11부터 시작하여 2씩 더하여 출력한 모습입니다. const result =prompt("1보다 큰 숫자를 입력하세요.") let num=0; if(result

See the Pen Untitled by Kimdohyun2002 (@Kimdohyun2002) on CodePen. 코드팬을 사용하여 짝수와 홀수를 구별하는 프로그램을 HTML과 JAVASCRIPT를 이용하여 만들어 보았습니다.

반복문은 같은 동작을 여러 번 실행하기 위해 사용하는 문입니다. 반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실행할 수 있습니다. 그만큼 소스 코드도 깔끔해지고 프로그램 실행도 더 깔끔해질 것 입니다. for 문 자바스크립트에서 가장 많이 사용하는 반복문 for 문입니다. for 문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할때 편리하게 사용 됩니다. for 문에서는 몇 번 반복했는지 기록 하기 위해 카운터를 사용하고 for 문의 첫 번째 항에서 카운터 변수를 지정합니다. for ( 초깃값; 조건; 증가식) { ... } 1. 초깃값: 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화합니다. 초깃값은 0이나 1부터..

연산자 '3 + 5', '3 < 5' 등과 같이 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자입니다. 연산자의 종류에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 비트 연산자, 삼향 연산자 등이 있습니다. (이 글에선 비트, 삼향 연산자의 설명을 하지 않습니다.) 산술 연산자 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 곱하기 연산을 할 때 사용합니다. * 빼기 연산을 할 때 사용합니다 / 몫을 구 할 때 사용 합니다. % 나머지를 구할 때 사용 합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자의 종류 설명 = num = 1은 우변의 1값을 좌변의 ..

자료형이란? 사람은 1, 10, 100을 보면 숫자라는 것을 알 수 있고, '자바스크립트'를 보았을 때는 문자열이라는 것을 알 수 있습니다. 하지만 컴퓨터에게 이것은 숫자이니 더하거나 빼야하고, 저것은 문자열이니 더하거나 뺄 수 없다는 것을 따로 알려주어야 합니다. 이렇게 숫자나 문자열처럼 프로그램에서 처리할 자료의 유형을 따로 지정해야 하는데, 이러한 자료의 형태를 '자료형'이라고 합니다. 자바스크립트의 자료형은 크게 '원시 유형과 객체'로 나뉘어집니다. 원시 유형 하나의 값만 저장하는 자료형 숫자형 모든 프로그램에서 가장 기본이 되는 자료형 C나 자바 같은 프로그래밍 언어에서는 정수와 실수를 구별하고 정수의 크기에 따라 다른 자료형을 사용하지만 자바스크립트에서는 정수와 실수를 함께 묶어 '숫자형'으로..