기초부터 시작하는 코딩 114

Javascript를 이용한 사이트 만들기! - 퀴즈 효과 사이트 만들기06

- 오늘은 퀴즈효과 6번째 입니다. - 문제를 풀 때 마다 정답과 해설이 나오며 다음문제로 넘어가기를 누르면 다음문제가 나오는 형식입니다. - 전체코드를 먼저 보고 스크립트 부분을 보겠습니다. Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음문제 im.kebab00@gmail.com - 크게 달라진 부분은 많이 없습니다. 정답확인 부분이 다음문제 버튼으로 바뀐 정도가 있겠네요 - 큰 틀은 main안에 넣어두고 그외 안에 들어가는 부분은 innnerHTML를 통해서 넣어주었습니다. - 스크립트를 보시죠 - 저번처럼 배열안에 객체를 넣어 문제 정보를 저장하였습니다. - 그건 쉬운니까 생략하겠습니다. - 문제를 출력하는데 저번과 차이가 있습니다. - 저번에는 모든 ..

사이트를 만들어 봅시다. - Header Type(01)

- 헤더 유형을 만들어 보겠습니다. - 좌측에 로고가 있고 가운데 메뉴부분이 있고 우측 로그인 버튼이 있는 형식입니다. Plant Planner 소개 이로운 점 주의할 점 관리방법 공지사항 연락방법 로그인 - reset 부분은 다른 것들과 비슷합니다. - 로고가 들어갈 div박스 하나와 메뉴가 나열될 a태그들을 li과ul로 감싸서 만들고 로그인 창으로 이동할 a태그가 있는 div 박스를 만들어 줍니다. - CSS 헤드워랩 부분을 보겠습니다. /* header__wrap */ .header__inner { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid #ccc;..

Javascript를 이용한 사이트 만들기! - 퀴즈 효과 사이트 만들기05

- 5번째는 문제가 60개 있는 사이트를 만들어 보았습니다. - 정답확인을 눌렀을 때 틀렸는지 맞았는지와 함께 점수를 알려주는 버튼도 만들었습니다. - 바로 스크립트 코드로 넘어가 보도록하죠 const quizInfo = [ { infoType : "정보처리 기능사" , infoTime : "2011년 4회" , infoNumber : "20110401", infoQuestion : "일반적으로 명령어의 패치 사이클 중에는 현재 수행하고 있는 명령어의 위치를 가리키고, 실행 사이클 중에는 바로 다음에 실행할 명령어의 위치를 가리키는 Register는?", infoChoice : { 1: "누산기(accumulator)", 2: "프로그램 카운터(program counter)", 3: "명령어 레지스터(i..

Javascript를 공부해 봅시다! - 번외편. 오답노트를 해보자(4)

- 자 오늘도 자바스크립트 쪽지 시험보는 날이 다가왔습니다. - 오늘은 문제를 많이 틀렸으니 문제를 한번 01. 결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } - 정답은 1, 3, true 입니다. 02. 다음의 결괏값을 보고 빈칸을 채우시오. { function func(){ document.write("함수2가 실행되었습니다."); } function callback(str){ document..

기초부터 시작하는 Javascript 공부 - 검색 이펙트 사이트 만들기01

- 검색 이펙트(Search Effect)란 검색 엔진에서 사용자가 검색어를 입력하고 결과를 검색하는 과정에서 일어나는 효과를 말합니다. - 검색어의 입력 방식, 검색 결과의 정확도와 다양성, 검색 결과의 순서 등이 검색 이펙트에 영향을 미칩니다. 1 2 3 4 5 자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속생 갯수 : 0 개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을..