반응형

코딩 공부/JAVASCRIPT 53

퀴즈(Quiz) 사이트를 만들어봅시다! (6)

자바스크립트 퀴즈(Quiz) 사이트 만들기 이번에 만들어 본 퀴즈 사이트는 객관식(슬라이드) 확인하기(여러문제) 유형입니다. 한번 풀어보세요! 마지막 문제까지 풀면 하단에 점수와 맞힌 개수가 나옵니다! 퀴즈 사이트 코드 Quiz 객관식(슬라이드) 확인하기(여러문제) 유형 1 2 3 4 5 5-1 6 😇정답입니다! 😈틀렸습니다! 다음 문제 ??점 💛 총 ❔개 💛 이번에 만든 사이트는 전에 만들어 본 퀴즈 사이트들과 다르게 남은 문제의 수를 보여주게 만들었습니다. 그리고 점수와 다 풀고 맞힌 개수도 보여주게 만들었습니다. script 코드 quizInfo quizInfo는 시험 문제들의 정보를 담은 배열입니다. 각 문제는 문제 유형(infoType), 시험 시기(infoTime), 문제 번호(infoNumb..

퀴즈(Quiz) 사이트를 만들어봅시다! (5)

자바스크립트 퀴즈(Quiz) 사이트 만들기 이번에 만들어 본 퀴즈 사이트는 4월 12일에 보는 정보처리기능사 시험 대비 연습문제입니다. 한번 풀어보시고 하단에 위치한 정답 확인 버튼을 눌러 점수를 확인하세요! 퀴즈 사이트 코드 Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 5-1 이번 퀴즈 사이트 코드는 전에 만들어 본 사이트 코드들에 비하면 많이 간단하죠? 그 이유는 quiz__wrap 부분을 스크립트 코드에 넣어주었기 때문입니다. script 코드 선택자 quiz__wrap 클래스를 가진 첫 번째 요소를 선택하여 변수 quizWrap에 할당하고, 초기 점수를 저장할 변수 quizScore를 0으로 초기화해주었습니다. 문제 출력 먼저 exam이라는 빈 배열을 만들고, quizInfo 배열의..

검색 이펙트 사이트 만들기(1)

검색 이펙트란? 검색 이펙트(Search Effect)란 검색 엔진에서 사용자가 검색어를 입력하고 결과를 검색하는 과정에서 일어나는 변화 혹은 효과를 말합니다. 검색 이펙트는 사용자와 검색 엔진 간의 상호작용으로 인해 발생합니다. 검색어의 입력 방식, 검색 결과의 정확도와 다양성, 검색 결과의 순서 등이 검색 이펙트에 영향을 미칩니다. 예를 들어, 사용자가 검색어를 입력할 때 검색어의 철자나 문법을 잘못 적는 경우, 검색 결과에 영향을 미칠 수 있습니다. 또한, 검색 결과가 정확하고 다양하면 사용자가 원하는 정보를 빠르게 찾을 수 있어 검색 이펙트가 긍정적으로 작용할 수 있습니다. 검색 엔진 최적화(SEO)는 검색 이펙트를 개선하기 위한 전략 중 하나입니다. 검색 엔진 최적화를 통해 웹사이트가 검색 결과..

마우스 이펙트 사이트 만들기(3)

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

마우스 이펙트 사이트 만들기(2)

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

마우스 이펙트 사이트 만들기(1)

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

퀴즈(Quiz) 사이트를 만들어봅시다! (4)

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

퀴즈(Quiz) 사이트를 만들어봅시다! (3)

자바스크립트 퀴즈(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..

퀴즈(Quiz) 사이트를 만들어봅시다! (2)

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

728x90
Adventure Time - BMO