01. 퀴즈 이펙트 : 정답 확인하기 유형
정답 확인 버튼을 누르면 정답이 나오는 효과입니다.
- 데이터 저장하기 : 변수
- querySelector() : CSS 선택자를 사용하여 HTML 문서에서 첫 번째 일치하는 요소를 선택합니다.
- innerText : DOM 요소의 텍스트 내용을 가져오거나 설정하는 데 사용되는 속성입니다.
- style.속성 : 자바스크립트에서 CSS 스타일을 표현하는 방법입니다.
- addEventListener() : 요소에 이벤트 리스너를 추가합니다. 이벤트 리스너는 이벤트가 발생했을 때 실행되는 함수입니다.
02. 퀴즈 이펙트 : 주관식 정답 확인하기 유형
주관식 정답을 입력하고 버튼을 누르면 정답이 나오는 효과입니다.
- 데이터 저장하기 : 변수
- 데이터 제어하기 : if문
- textContent : "innerText"와 "textContent"는 둘 다 HTML 요소의 텍스트를 가져오거나 설정하는 속성입니다. 하지만 "textContent"는 요소의 모든 자식 요소를 포함한 텍스트 콘텐츠를 가져옵니다. HTML 태그를 포함하여 모든 텍스트를 반환하므로, HTML 태그를 그대로 표시합니다.
반면 "innerText"는 HTML 태그를 제외한 텍스트만 반환하므로, 태그를 표시하지 않습니다. 또한 CSS의 display 속성에 따라 결과가 달라질 수 있습니다. 예를 들어, display:none으로 설정된 요소의 innerText는 가져올 수 없습니다. - classList : 요소의 클래스를 추가하거나 제거하여 스타일을 설정하는 데 사용됩니다.
- classList.add : 요소의 클래스 목록에 새 클래스를 추가합니다. 만약 이미 해당 클래스가 존재하는 경우 추가하지 않습니다.
- trim() : 문자열의 양 끝에 있는 공백을 제거합니다. 이 메서드는 공백 문자, 탭 문자, 줄 바꿈 문자를 모두 제거합니다.
- input과 value : "input"은 사용자로부터 데이터를 입력받는 요소입니다. 사용자가 입력한 데이터는 "value" 속성을 통해 JavaScript 코드에서 액세스할 수 있습니다. input 요소에는 여러 가지 타입이 있습니다. 일반적으로 사용되는 타입은 텍스트, 숫자, 이메일, 비밀번호, 체크박스 등이 있습니다.
- placeholder : input 요소의 속성 중 하나입니다. "placeholder"는 해당 input 요소에 대한 설명 또는 힌트를 제공하는 데 사용됩니다. 사용자가 입력하기 전까지는 입력란에 표시되며, 입력을 시작하면 자동으로 사라집니다.
03. 퀴즈 이펙트 : 주관식(여러 문제) 확인하기 유형
정답 확인 버튼을 누르면 정답이 나오는 효과입니다.
- 데이터 저장하기 : 배열, 객체
- 데이터 불러오기 : for문, forEach()
- 데이터 제어하기 : if문
- querySelectorAll() : CSS 선택자를 사용하여 HTML 문서에서 모든 일치하는 요소를 선택합니다.
- innerHTML() : innerHTML은 HTML 요소의 내부 HTML 코드를 변경하는 데 사용됩니다. innerHTML에 값을 할당하면 해당 HTML 요소의 내부 HTML이 새로운 값으로 대체됩니다. innerHTML은 HTML 요소 안에 포함된 모든 HTML 태그를 포함하여 텍스트, 이미지, 하이퍼링크 등을 변경할 수 있습니다.
04. 퀴즈 이펙트 : 객관식 확인하기 유형
문제의 객관식 정답을 확인하는 유형입니다.
- 데이터 저장하기 : 배열, 객체
- 데이터 불러오기 : 배열, 객체, for문, forEach()
- 데이터 실행하기 : 함수
- 데이터 제어하기 : if문, 다중if문
- label : label 태그는 HTML에서 입력 양식(input, button, textarea 등)을 설명하는 이름표입니다. label 태그는 for 속성을 사용하여 다른 요소와 결합할 수 있으며, 이때 label 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 합니다.
"label for" 속성은 해당 입력 요소의 ID와 연결되어야 하지만, "name" 속성과는 직접적인 연관이 없습니다. - name : 입력 요소의 이름(name)을 정의하고, 입력 요소의 값을 식별하는 데 사용됩니다. 이 속성은 서버 측 언어(예: PHP, ASP)에서 폼(form) 데이터를 처리하는 데 사용됩니다.
- checked : HTML에서 사용되는 입력 요소(input element)의 속성 중 하나입니다. 이 속성은 해당 입력 요소가 선택된(selected) 상태임을 나타내며, 체크박스(checkbox), 라디오 버튼(radio button) 및 스위치(switch)와 같은 입력 요소에서 자주 사용됩니다.
"checked" 속성은 불리언(Boolean) 속성으로, "checked" 속성이 있으면 해당 입력 요소가 선택된(selected) 상태이고, "checked" 속성이 없으면 선택되지 않은(unselected) 상태입니다. - cursor : 이 속성은 마우스 포인터가 해당 요소 위에 위치할 때 보여지는 커서의 모양을 정의합니다.
05. 퀴즈 이펙트 : 객관식(여러 문제) 확인하기 유형 - 정보처리기능사
여러 문제의 객관식 정답을 확인하는 유형입니다.
- 데이터 저장하기 : 배열, 객체
- 데이터 불러오기 : 배열, 객체, for문, forEach()
- 데이터 실행하기 : 함수, 익명함수, 화살표 함수
- 데이터 제어하기 : if문, 다중if문
- 배열 객체 : push() : 메서드는 배열 마지막 요소에 요소를 추가합니다.
- 배열 객체 : join() : 메서드는 배열 요소를 문자열로 결합합니다. 반환은 문자열입니다.
- 수학 객체 : Math.ceil() : 매개변수로 전달된 숫자를 올림한 값을 반환합니다. 즉, 소수점 이하를 모두 올림하여 정수로 반환합니다.
06. 퀴즈 이펙트 : 객관식(여러 문제) 확인하기 유형 - 슬라이드
객관식 정답을 선택하면 정답을 확인하고 넘기는 유형입니다.
- 데이터 저장하기 : 배열, 객체
- 데이터 불러오기 : 배열, 객체, for문, forEach()
- 데이터 실행하기 : 함수, 익명함수, 화살표 함수
- 데이터 제어하기 : if문, 다중if문
- setAttribute() : DOM 요소의 속성(attribute) 값을 설정할 수 있습니다. 이 메서드는 두 개의 매개변수를 가지며, 첫 번째 매개변수는 속성 이름이고 두 번째 매개변수는 속성 값입니다.
- setAttribute(이벤트 핸들러, 콜백 함수()) : 이벤트 핸들러로 전달될 콜백 함수를 문자열 형태로 받습니다. 콜백 함수는 이벤트가 발생했을 때 실행될 함수를 나타냅니다.
07. 퀴즈 이펙트 : 객관식(여러 문제) 확인하기 유형 - CBT
객관식을 선택하는 시험 유형
- 데이터 저장하기 : 배열, 객체
- 데이터 불러오기 : 배열, 객체, for문, forEach()
- 데이터 실행하기 : 함수, 익명함수, 화살표 함수
- 데이터 제어하기 : if문, 다중if문