SEOLHEE

마우스 이펙트란? 마우스 이펙트(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다. 예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다. 마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다. 마우스 이펙트(3) 사이트 코드 Javascript Mouse Effect03 마우스 이펙트 1 2 3 4 5 6 Your act..

마우스 이펙트란? 마우스 이펙트(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다. 예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다. 마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다. 마우스 이펙트(2) 사이트 코드 Javascript Mouse Effect02 마우스 이펙트 1 2 3 4 5 6 You can'..

자바스크립트 퀴즈(Quiz) 사이트 만들기 이번에 만들어 본 퀴즈 사이트는 전에 만든 사이트와 달리 객관식 확인하기 퀴즈 유형입니다. 퀴즈 사이트 코드 Quiz 객관식 확인하기 유형 1 2 3 4 5 5-1 . 정답입니다! 틀렸습니다! 정답 확인하기 객관식 확인하기 유형인 만큼 직전에 만든 사이트와 달리 새로운 부분이 생겼습니다. quiz__choice 부분이 생겼습니다. input type="radio"는 HTML에서 라디오 버튼을 나타내는 요소입니다. 라디오 버튼은 다중 선택이 가능한 체크 박스와 달리, 하나의 그룹에서 오직 하나의 선택만 가능합니다. 라디오 버튼은 input 요소 중 하나로, type 속성 값으로 "radio"를 가지며, name 속성으로 같은 그룹의 라디오 버튼들을 식별합니다. 그..

자바스크립트 퀴즈(Quiz) 사이트 만들기 이번에 만들어 본 퀴즈 사이트는 전에 만든 사이트와 달리 주관식(여러문제) 확인하기 퀴즈 유형입니다. 짜잔~ 스크롤을 내리시면 문제 3번까지 나와있는 것처럼 한 페이지에 주관식 문제가 여러개 있도록 만들어 줬습니다. 직접 만들어 본 퀴즈 사이트 코드 Quiz 주관식(여러문제) 확인하기 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 참고 태그의 placeholder 속성은 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시합니다. 문법 // 텍스트 : 요소에 입력될 값에 대한 짧은 힌트를 명시합니다. script 코드 querySele..

비트 연산자(bitwise operator) 자바스크립트에는 비트 연산자가 있습니다. 비트 연산자는 2진수로 표현된 값을 다루는 연산자로, 변수에 저장된 2진수 값의 각 비트를 조작하여 새로운 값을 생성합니다. 이진수의 각 자리를 비교하여 연산하고, 주로 저수준 프로그래밍에서 사용되며, 비트 조작과 데이터 압축, 암호화 등 다양한 분야에서 사용됩니다. 비트 연산자 종류 종류 설명 AND 연산 (&) 두 비트가 모두 1일 때만 1을 반환합니다. OR 연산 (|) 두 비트 중 하나 이상이 1이면 1을 반환합니다. XOR 연산 (^) 두 비트 중 하나만 1일 때 1을 반환합니다. NOT 연산 (~) 비트를 반전시킵니다. 0은 1로, 1은 0으로 변환됩니다. 왼쪽 시프트 (> 2는 0001을 반환합니다. AND..

자바스크립트 테스트 오늘 본 자바스크립트 테스트 문제와 정답을 정리하고 틀린 문제는 풀이를 해보자 01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 😎결과 확인하기 false 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } 😎결과 확인하기 12456 오답 while이 true이면 코드는 순서대로 실행이 된다. num이라는 변수를 0으로 설정해준 다음에 while 루프가 시작된다. 루프의 조건식은 항상 true여서 이 루프는 무한 반복된다. 루프의 첫 번째 줄에서 num을 증가시키고, 그 다음 if문이 나오는데, ..

자바스크립트 퀴즈(Quiz) 사이트 만들기 이번에 만들어 본 퀴즈 사이트는 전에 만든 사이트와 달리 주관식 퀴즈 유형입니다. 보이시는 것처럼 같이 정답을 적어주세요. 라는 곳에 정답을 직접 적어주고 정답을 확인하는 방법입니다! 직접 만들어 본 퀴즈 사이트 코드 전에 올린 사이트 유형과 크게 다를 것은 없습니다만 주관식 문제를 위하여 input 태그를 추가해주었습니다. Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 슬라이드 설명 참고 태그의 placeholder 속성은 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시합니다. 문법 // 텍스트 : 요소에 입력될 값에 대한 짧은 힌트를 명시합니다. script 코드 주관식 문제인 만큼 전에 만들어 본 사이트와 다르게 새..

자바스크립트 퀴즈(Quiz) 사이트 만들기 아래에 있는 사진과 같이 퀴즈를 풀 수 있는 사이트를 만들어 보겠습니다! 직접 만들어 본 퀴즈 사이트 코드 Quiz 정답 확인하기 유형 . 정답 확인하기 연변대비 script 코드 수업 시간에 배운 변수 부분을 활용해보았습니다. const 변수를 선언해주고 선택자, 문제 정보를 만들어주었습니다. 참고 quizWrap, quizTitle, quizTime 등 처럼 중간에 대문자로 적어주어야한다. 문제 출력은 변수와 .innerText를 써서 문제를 출력하여줍니다. 정답 부분은 정답을 클릭하면 나타날 수 있게 quizAnswerResult.style.display = "none"; 을 써서 정답을 숨겨주었습니다. 이렇게 정답 확인하기를 클릭하면 바로 정답이 나옵니다..

데이터 불러오기 자바스크립트에서 데이터를 불러오는 종류를 알아봅시다. 변수 : 데이터 불러오기 상수 : 데이터 불러오기 배열 : 데이터 불러오기 객체 : 데이터 불러오기 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. 배열 : 데이터 불러오기 : 기본 ..