코딩공부

오늘은 자바스크립트 애니메이션이 아닌 GSAP를 이용해서 마우스 이펙트를 넣는 법을 설명해보려 합니다. 전체구조 JavaScript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Success is the ability to go from one failure to another with no loss of enthusiasm. 성공이란 열정을 잃지 않고 실패를 거듭할 수 있는 능력이다. 1346zany@gmail.com css부분은 전 글에 올린 그대로 사용하였습니다. body JavaScript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Success is the ability to go from one failure to ano..

마우스 이펙트란? 마우스 이펙트는 웹페이지에서 마우스 이벤트를 통해 발생하는 다양한 효과를 말합니다. 마우스 이펙트는 사용자와 상호작용하여 사용자 경험을 개선하는데 유용하게 사용됩니다. 완성된 예시입니다. 오늘은 예시와 같이 강조된 부분에 마우스 이펙트를 넣어주는 법에 대해 설명해보려고 합니다. 전체 구조 JavaScript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 What you think, you become. What you become, you do. What you do, you attract 당신이 생각하는 것이 당신이 되며, 당신이 되는 것이 행동을 이끌어냅니다. clientX : 0px clientY : 0px offsetX : 0px offsetY ..

오늘은 위와 같은 선택지가 있는 퀴즈 이펙트를 만들어보도록 하겠습니다. Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 정답입니다! 틀렸습니다! 선, 색채, 공간, 수량 점, 선, 면 질감 시간, 수량, 구조 공간 면, 구조, 공간, 수량 정답 확인하기 1346zany@gmail.com 완성된 코드입니다. .quiz__choice { padding: 20px; border-bottom: 6px ridge #cacaca; font-family: 'Suncheon'; } .quiz__choice label { display: flex; } .quiz__choice label input { position:absolute; clip:rect(0 0 0 0); width:1px; height:1px; m..

오늘은 위와 같은 퀴즈가 여러 개 있는 형식을 만들어 보겠습니다. Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 1346zany@gmail.com 설명 먼저 저번처럼 선택자로 각 요소들을 선택합니다. // 선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelectorAll(".quiz__title "); // 시험 종목 /시간 const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em")..

자바스크립트 퀴즈 이펙트 만들기 완성된 모습입니다. Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 1346zany@gmail.com 완성된 코드입니다. 설명 // 선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title span"); const quizTime = quizWrap.querySelector(".quiz__title em"); const quizQustion = quizWrap.querySelector(".quiz__question span"); const quizQuestionNum = quizWrap.querySelec..

자바스크립트 퀴즈 이펙트 만들기 완성된 모습입니다. Quiz 정답 확인하기 유형 . 정답 확인하기 연변대비 1346zany@gmail.com 완성된 코드입니다. 설명 // 선택자 const quizWrap = document.querySelector(".quiz__wrap") const quizTitle = quizWrap.querySelector(".quiz__title span") const quizTime = quizWrap.querySelector(".quiz__title em") const quizQustion = quizWrap.querySelector(".quiz__question span") const quizQuestionNum = quizWrap.querySelector(".quiz__..

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..

Q1. 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여 주는 프로그램을 작성해보세요. 길라잡이 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언합니다. paresInt() 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. (프롬프트 창에 입력한 내용이 숫자가 아니면 parseInt() 함수는 NaN을 반환합니다.) 반환값이 숫자일 경우에만 함수를 실행합니다. See the Pen 양수음수판단 by dkdlelw (@dkdlelw) on CodePen. number변수를 사용하여 사용자로부터 입력된 숫자를 받아와서 함수를 실행합니다. 먼저 x함수는 하나의 매개변수 n을 ..

자바스크립트에서 데이터를 제어하는 종류에는 if문, if문 생략, 삼항 연산자, 다중 if (else if), 중첩 if, switch, while, do while, for문, 중첩 for문,break, countinue 가 있습니다. if문 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나입니다. 조건문을 사용하면 프로그램이 특정 조건에 따라서 다른 동작을 하도록 할 수 있습니다. { if(조건식){ document.write("실행되었습니다.(true)") } else { document.write("실행되었습니다.(false)") } if문의 true 값과 false값 false : 0, null, undefined, false, ""(빈문자열) true : 1,2,3,"0", "1", "ABC..

함수란? 동작해야 할 목적대로 여러 개의 명령을 묶는 것입니다. 함수는 값을 반환하거나 반환하지 않을 수 있으며, 함수를 호출하여 실행됩니다. 함수를 정의할 때는 function 키워드를 사용합니다. 함수 이름은 선택적이며, 함수의 매개변수는 함수 이름 뒤의 괄호 안에 나열됩니다. 함수 내에서 수행될 작업은 중괄호로 감싸져 있습니다. 선언적 함수 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다. function func(){ document.write("실행문"); } func(); 호이스팅 변수나 함수를 선언하지 않고 호출하였을 때는 에러가 발생해야하지만, var로 선언한 변수와 선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러가 나지 않습니다. 이런 성질을 끌어 올리기 라는 뜻인 '호이..