hyejeong 코딩

json 형식의 데이터를 이용해 CBT 유형으로 퀴즈 이펙트를 만들었습니다. HTML Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 수험자 : 이혜정 전체 문제수 : 60문항 남은 문제수 : 59문항 제출하기 59분 10초 문제를 푸는 부분과 omr 부분을 나누어 줍니다. 문제, 문제 번호, 문제 이미지, 객관식 보기를 각각 태그를 사용해서 구성을 해줍니다. 수험자정보, 총 문제수와 남은 문제수를 태그를 사용해 각 영역을 만듭니다. 문제를 풀고 제출하는 영역과 시간이 카운팅 되는 영역을 만들어 줍니다. JSON [ { "subject": "소프트웨어 설계", "question": "GoF(Gang of Four)의 디자인 패턴에서 행위 패턴에 속하는 것..

마무리 문제 1번 이미지에 마우스 포인터를 올렸을 때 다른 이미지로 바뀌었다가 마우스 포인터를 다른 곳으로 이동하면 다시 원래 이미지로 바뀌는 소스를 작성해보는 문제입니다. 길라잡이 문서에는 태그에는 id나 class가 없습니다. 태그 이름을 사용하거나 2개 이상의 선택자를 연결 후 이미지를 가져와서 변수에 저장합니다. 마우스 포인터를 이미지 위에 올려놓을 때는 mouseover 이벤트가, 마우스 포인터를 다른 곳으로 이동할 때는 mouseout 이벤트가 발생합니다. 이벤트가 발생했을 때 이미지의 src 속성 값을 바꿉니다. 마우스 오버하면 이미지 바꾸기 #container > img 태그 안의 이미지를 document.querySelector()를 사용해 imgCherry 변수명에 저장해줍니다. 이벤트..

원시유형과 객체 앞에서 단순히 값만 가지고 있을 경우에는 '원시 유형'이고 프로퍼티와 메서드를 가지고 있을 때는 '객체'라고 설명했습니다. 그런데 자바스트립트에서는 원시 유형이러도 프로퍼티와 메서드를 사용할 수 있습니다. 문자열을 만들 때 다음의 소스처럼 간단히 변수에 문자열을 할당한 후 length라는 프로퍼티를 사용해보세요. str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다. let str = "hello" str.length// 5 자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉, 숫자는 Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데, 이런 객체를 '래퍼 객..

객관식 문제를 슬라이드 유형으로 만들었습니다. 1문제씩 보여주며 답을 클릭하면 클릭한 답이 맞는지 틀린지 정답확인과 해설을 보여줍니다. 다음 버튼을 누르면 다음 문제로 넘어가게 됩니다. 그리고 문제의 총 갯수와 맞춘 정답 갯수, 점수를 확인하는 영역도 넣어 표시해 주었습니다. HTML Quiz 객관식(슬라이드) 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음 문제 ❔❔점 hyejeong3283@gmail.com 문제의 총 갯수와 맞춘 갯수를 표시하기 위해 dog__wrap 영역 안에 p,span태그를 사용해 영역을 만들었습니다. 점수를 표시해주기 위해 quiz__info라는 클래스명을 가진 태그 영역을 넣어주었습니다. SCRIPT 배열변수 quizInfo 안..

이전 퀴즈 이펙트 만들기 4에 이어서 문제 정보를 추가하여 정보처리기능사 60문제를 만들어 보았습니다. HTML Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 [축하합니다] or [다시 공부하세요]! 총 몇 [60]문제 중에 [10]문제 맞췄습니다. [40]점입니다. 공부하세요! hyejeong3283@gmail.com 정리 quiz_chioce라는 클래스명을 가진 태그 영역을 만듭니다. 그 안에 객관식 답안을 넣을 4개의 버튼 유형의 태그를 넣었습니다. radio 유형의 요소는 보통 서로 관련된 옵션을 나타내는 라디오 버튼 콜렉션, 라디오 그룹에 사용합니다. 임의의 그룹 내에서는 동시에 하나의 라디오 버튼만 선택할 수 있습니다. 라디오 버튼은 흔히 원형으로 그려지며, 선택한 경우 속을 채우..

CSS 속성을 검색할 수 있는 검색 이펙트 페이지를 만들어 보았습니다. 검색 이펙트 검색 이펙트(Search Effect)는 검색 결과가 노출되는 것 자체가 인지적 영향을 미치는 현상을 말합니다. 검색 이펙트는 검색 엔진 결과 페이지(SERP)에서 웹사이트가 노출되는 위치, 타이틀, 설명 등의 정보에 영향을 받습니다. 검색 이펙트는 사용자들이 검색을 할 때, 검색 결과 페이지에서 웹사이트가 노출되는 위치에 따라 사용자의 인지적인 영향을 받기 때문에 중요합니다. 상위 검색 결과에 노출될수록, 해당 웹사이트를 방문하는 사용자 수가 늘어나고, 검색어에 대한 신뢰도가 높아집니다. 검색 이펙트는 검색 엔진 최적화(SEO) 전략에 중요한 영향을 미칩니다. 웹사이트가 검색 결과 페이지의 상위에 노출되도록 하는 SEO..

마우스를 따라다니며 조명 효과를 주는 이펙트 페이지를 만들었습니다. HTML Javascript Mouse Effect03 마우스 이펙트 1 2 3 4 5 6 I never dreamed about success, I worked for it. 나는 결코 성공에 대해 꿈꾸지 않았다, 나는 꿈을 위해 행동했다. hyejeong3283@gmail.com reset.css와 mouse.css에서 이미지, 배경색, 폰트를 설정하고 수정할 수 있습니다. 조명 효과를 극대화 하기 위해 mouse.css에서 배경색을 어둡게 조정해주었습니다. GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate..

마우스를 움직이면 따라다니는 효과를 준 페이지를 만들었습니다. HTML Javascript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Try not to become a man of success but rather try to become a man of value. 성공한 사람이 되려고 애쓰지 말고, 가치 있는 사람이 되려 애써라. hyejeong3283@gmail.com 마우스가 이동하는 방향에 따라 2개의 동그란 커서가 따라다니도록 만들기 위해 div 태그에 cursor1,2라는 클래스명을 주어 2개의 영역 태그를 넣었습니다. 강조한 단어 영역에 마우스가 들어가면 커서 모양이 변화하도록 만들기 위해 p 태그 안에 강조할 단어를 span으로 감싸주었습니다. ..

마우스를 움직이면 따라다니는 효과를 준 페이지를 만들었습니다. HTML Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Life is either a great adventure or nothing. 인생은 위대한 모험이거나 아니면 아무것도 아니다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px hyejeong3283@gmail.com 이벤트 속성 속성 설명 clientX X좌표 값 : 브라우저 기준 clientY Y좌표 값 : 브라우저 기준 offsetX X좌표 값 : 요소 기준 offsetY Y좌표 값..

이번에는 객관식 유형의 퀴즈 이펙트 페이지를 만들어보았습니다. HTML Quiz 객관식 확인하기 유형 1 2 3 4 5 정답입니다! 틀렸습니다! 정답 확인하기 hyejeong3283@gmail.com quiz_chioce라는 클래스명을 가진 태그 영역을 만듭니다. 그 안에 객관식 답안을 넣을 4개의 버튼 유형의 태그를 넣었습니다. radio 유형의 요소는 보통 서로 관련된 옵션을 나타내는 라디오 버튼 콜렉션, 라디오 그룹에 사용합니다. 임의의 그룹 내에서는 동시에 하나의 라디오 버튼만 선택할 수 있습니다. 라디오 버튼은 흔히 원형으로 그려지며, 선택한 경우 속을 채우거나 강조 표시를 합니다. CSS 추가 .quiz__choice { padding: 20px; border-bottom: 6px ridge ..