우당탕탕 코딩생활

퀴즈만들기 0mr형식 체크 부분 연동하기 오늘은 지난 포스팅을 보충 하는 글을 써보도록 하겠습니다. 먼저 추가된 HTML입니다. 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 2008년 2회 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 정보처리기능사 2009년 1회 정보처리기능사 2009년 5회 정보처리기능사 2010년 2회 정보처리기능사 2010년 5회 정보처리기능사 2011년 1회 정보처..

Script 오늘 만든 페이지는 스크립트 부분이 가장 중요하고 복잡하기 때문에 스크립트 부분만 살펴보도록 하겠습니다. 이 페이지에서는 데이터를 json으로 불러와서 작업했습니다. const cbtQuiz = document.querySelector(".cbt__quiz"); const cbtOmr = document.querySelector(".cbt__omr") const cbtSubmit = document.querySelector(".cbt__submit") let questionAll = []; // 모든 퀴즈 정보 //데이터 가져오기 const dataQuestion = () => { fetch("json/gineungsaWD2023_01.json") .then(res => res.json())..

지난 포스팅에서는 여러개의 문제를 불러와 나열하는 형식이었는데요. 오늘은 답을 맞추면 넘어가는 형식으로 해보겠습니다! HTML 정답🥰 오답😩 다음 문제 퀴즈 만들기 4번과 동일한 형식이지만 객관식 부분을 주석 처리해주었습니다. 한 문제를 풀면 다음 문제로 넘어가야 하는 방식이기에 한 문제 한문제 모두에 객관식을 넣기보다는 자바스크립트에서 태그를 작성해 작업하기 위해 주석처리를 해주었습니다. Script const quizInfo = [ { infoType : "정보처리기능사", infoTime : "2008년 2회", infoNumber : "20080201", infoQuestion : "다음 논리회로에서 출력 f의 값은? ", infoChoice : ["-1", "0", "1/2", "1"], inf..

객관식 유형(여러개) 지난 포스팅에 이어서 객관식 유형을 여러개 추가해보도록 하겠습니다. HTML Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 dripidea77@gmail.com 구조 기본적인 HTML을 띄고 있습니다. main 안의 구조를 살펴보겠습니다. quiz__wrap : 퀴즈 창 전체를 뜻합니다. 가장 상위에 있는 박스입니다. quiz__header : 퀴즈의 머리 부분을 뜻합니다. quiz__title : 제목을 의미하는 것으로 이 스크립트 내에서는 '정보처리기능사'와 '시험 날짜'를 의미합니다. quiz__question : 퀴즈의 질문입니다. dog__wrap : 정답에 따라 달라지는 개의 얼굴입니다. quiz__choice : 사용자가 선택하게 되는 객관식의 목록입니다. ..

검색창을 만들기 위해 사용한 자바스크립트 - 데이터 저장하기 : 변수 - 데이터 실행하기 : if문, 화살표 함수 - 데이터 불러오기 : for()문, forEach()문, - 배열 객체 : indexOf(), search() - 요소 객체 : querySelector(), querySelectorAll() - 요소 메서드 : element.style.속성명 : CSS 스타일 설정 - 요소 속성 : textContent, dataset - 이벤트 객체 : keyup HTML 자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. dripidea77@gmail.com 구조 ma..

css css 부분입니다. 주의깊게 살펴볼 부분은 .mouse__cursor부분입니다. background image로 이미지를 넣고 background attachment로 고정을 시켜줍니다. attachment라는 속성은 주로 웹 페이지에서 배경 이미지가 스크롤되는 방식을 제어하는 데 사용됩니다. 사용하는 방법은 두 가지로 나뉘게 됩니다. scroll : 배경 이미지가 요소와 함께 스크롤됩니다. 웹 페이지를 스크롤할 때 배경 이미지도 같이 스크롤됩니다. fixed : 배경 이미지가 요소에 고정되어 있으며 스크롤되지 않습니다. 웹 페이지를 스크롤할 때 배경 이미지는 고정된 위치에 유지됩니다. 여기서는 fixed방식이 사용되었고 배경 이미지가 고정되어 있기 때문에 조명효과처럼 보이게 됩니다. script..

CSS CSS 부분입니다. .mouse__wrap의 cursor: none; 은 효과를 강조하기 위하여 마우스 커서를 가렸습니다. .mouse__text는 화면의 가운데에 오는 글귀입니다. display : flex; : 부모 요소를 flex container로 지정합니다. 자식 요소(flex item)들에게 속성을 지정 할 수 있습니다. align-itmes : center; justify-content : center;: flex container 의 모든 flex item들을 세로로 가운데로 정렬합니다. flex-direction: column; flex container의 주 축(main axis)을 세로 방향(column)으로 설정합니다. overflow: hidden; 부모 요소의 내용이 넘칠..

간단한 마우스 효과 style 부분 HTML style mouse__wrap에는 cursor:none을 적용하여 마우스 커서를 가립니다. position: absolute로 위치를 고정합니다. left, top, width, height 속성을 통해 크기와 위치를 설정합니다. border-radius 속성으로 둥근 모양을 만들어주고 border 속성으로 테두리를 설정합니다. background-color 속성으로 배경 색상과 투명도를 설정합니다. user-select: none;과 pointer-events: none; 속성으로 마우스 이벤트를 무시합니다. transition 속성으로 변화하는 스타일의 전환효과를 설정합니다. mouse__cusor의 s1 s2 s3 s4 s5 s6는 각 마우스 커서의 상..

객관식 확인하기 HTML 주관식을 해보았으니 이번에는 객관식 유형을 작성해보도록 하겠습니다. Quiz 객관식 확인하기 유형 1 2 3 4 5 정답🥰 오답😩 정답 확인하기 * div 태그에는 "quiz__choice" 클래스가 지정되어 있습니다. 이는 CSS나 JavaScript에서 해당 영역을 조작하기 위한 식별자로 사용됩니다. * label 태그는 각각의 선택지를 나타내는데, 이는 input 태그와 함께 사용됩니다. * input 태그는 라디오 버튼을 생성합니다. "type" 속성이 "radio"로 설정되어 있으며, "id", "name", "value" 속성이 지정되어 있습니다. * "id" 속성은 각각의 라디오 버튼을 식별하기 위한 고유한 식별자입니다. * "name" 속성은 라디오 버튼들이 그룹으..

강아지 이펙트 파헤치기 오늘은 강아지 이펙트의 자바스크립트 부분과 약간의 애니메이션 부분을 알아보려고 합니다. 먼저, 준비 해야할 것은 퀴즈 안에 들어가야할 정보들이 필요합니다. 어떤 종목인지, 언제 출제되었던 문제인지, 문제와 답 등을 먼저 정리해보도록 하겠습니다. 이 이펙트를 만들어 내기 위해 필요한 정보들은 아래와 같습니다. 시험종목 : 정보처리 기능사 시험시간 : 2011년 4회 문제번호 : 1 문제질문 : 주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 ... 문제정답 : 가드밴드(Guard band) 문제설명 : 가드밴드(Guard Band)는 주파수분할 다중화 방식에서 ... 이 필요한 정보들을 이펙트 효과로 불러오기 위해서는 정보들을 데이터로 변환시켜주는 작업과 선택자인 query..