Giant Danio Fish
본문 바로가기

CodingKing168

퀴즈 만들기 - 객관식(한문제) 유형 퀴즈 효과 객관식(한문제) 유형 결과 원본 사이트 보기 body 퀴즈 보기쪽은 input type을 버튼타입으로, 각각 id 값을 select(..)로 설정하였으며 class값과 name에 select, 벨류값을(..)해서 설정하였습니다. 정답 확인하기 Javascript 선택자는 이전예시와 같으며 객관식 보기를 추가하였습니다. 문제출력은 직접작성하고 보기출력은 for문을 이용해 출력했기에 두개를 updateQuiz라는 함수로 묶어 한번에 출력하였습니다. 정답 확인쪽은 사용자가 선택한 정답과 문제 정답이 맞는지, 그다음에 그 체크된 번호와 문제 번호가 같은지를 확인하기위해 if문 안에 if문을 사용해 표시했습니다. //선택자 const quizType = document.querySelector(".qu.. 2022. 8. 8.
요소 선택 메서드 요소 선택 요소를 직접 선택하는 메서드 메서드 설명 getElementByID() document.getElementByID('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsByTagName() document.getElementsByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. getElementsByName() document.getElementsByName('txt')일 경우 HTML 요소 중 nam.. 2022. 8. 6.
퀴즈 만들기 - 주관식(여러문제) 유형 퀴즈 효과 주관식(여러문제) 유형 결과 원본 사이트 보기 JavaScript 문제 출력, 정답 숨기기, 정답 확인쪽 스크립트는 문제가 2개이상 복수형태이므로 직접 텍스트를 치거나, for문을 이용하거나 forEach문을 이용해서 출력하였습니다. 자세한 설명은 주석표시로 확인하겠습니다. //선택자 //선택자 const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류, 다중선택을위해 querySelector에 All을 붙힌다. const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelectorAll("... 2022. 8. 5.
퀴즈 만들기 - 주관식 유형 퀴즈 효과 정답 확인하기 유형 결과 원본 사이트 보기 JavaScript 정답버튼을 클릭했을 때 사용자 정답과 정답확인버튼이 사라지고 정답결과가 보이게 만들었으며, 사용자 정답을 소문자 대문자 상관없이 정답이 허용되게 하고, 여백을 없앴습니다. if문을 사용해 정답일 때 quizView에 like를 추가해 강아지가 웃게, 오답일 때 dislike를 추가해 강아지가 슬프게 만들었습니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySel.. 2022. 8. 4.
퀴즈 만들기 - 정답 확인 유형 퀴즈 효과 정답 확인하기 유형 결과 원본 사이트 보기 JavaScript 각각의 선택자를 상수로 선언한뒤에 innerText를 이용해 출력하고, 정답 확인하기 버튼을 클릭했을 때 event를 걸어줍니다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__answer .confi.. 2022. 8. 4.
레이아웃 05 레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정후에, float flex grid 방법중 하나를 선택해 구역을 나누어줍니다. float을 이용한 레이아웃 float으로 인한 영역깨짐 방지법에는 세가지방법이있는데 그중 가상요소 clearfix 방법을 사용해 만들어보았다. 1. 깨지는 영역에 clear: both를 설정한다. 깨지는부분이 눈에보이지 않으므로 좋지않은방법 2. 부모 박스 영역에 overflow: hidden을 설정한다. 3. clearfix를 설정한다. (가상요소) * { margin: 0; padding: 0; } #wrap { width: 100%; } #header { width: 100%; .. 2022. 7. 29.
레이아웃 04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 코드 * { margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 580px; background-color: #26A69A; } #footer { height: 100px; background-color: #00897B; } .container { width: 1200px; height: inherit; margin: 0 auto; backgr.. 2022. 7. 29.
레이아웃 03 레이아웃03 이번 레이아웃은 기본형틀에 가운데가 좌측 한칸 우측 세칸으로 나뉜 구조입니다. float을 이용한 레이아웃 이번 레이아웃은 float으로 컨텐츠를 띄울 시 다음 내용을 빈자리가 채우러 올라오게 브라우저에서 오류가 생길수 있어서 clearfix를 선언해 버그를 해결하는 방법이다. * { margin: 0; } body { background-color: #E1F5FE; } #wrap { width: 1200px; margin: 0 auto; } #header { height: 100px; background-color: #B3E5FC; } #nav { height: 100px; background-color: #81D4FA; } #main { } #aside { width: 30%; heigh.. 2022. 7. 29.
레이아웃 02 레이아웃02 이번 레이아웃은 기본형틀에 가운데가 세칸으로 나뉜 구조입니다. float을 이용한 레이아웃 구역을 div태그로 정한뒤 float : left;를 사용해 왼쪽으로 순차적으로 밀어넣은 모습을 볼수있습니다. 밀려져서 보이지않는 구역은 clear: both;를 이용해 제작하였습니다. 또한 부모 main태그에 overflow: hidden;을 작성해 넘친 컨텐츠는 잘려지고 보여지지 않게 설정하였습니다. * { margin: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #C8E6C9; } #nav { w.. 2022. 7. 29.
레이아웃 01 레이아웃01 이번 레이아웃은 기본형틀에 가운데가 두칸으로 나뉜 구조입니다. float을 이용한 레이아웃 구역을 div태그로 정한뒤 float : left;를 사용해 왼쪽으로 순차적으로 밀어넣은 모습을 볼수있습니다. 밀려져서 보이지않는 구역은 clear: both;를 이용해 제작하였습니다. * { margin: 0; } body { background-color: #FFF3E0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #FFE0B2; } #nav { width: 100%; height: 100px; background-color: #FFCC80; } #aside { wi.. 2022. 7. 29.
지역변수/전역변수 지역변수/전역변수 변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역변수'로 나누어집니다. '전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 '지역변수'는 함수 블록{} 내에서만 사용할 수 있습니다. 전역 변수와 지역 변수 선언 위치 전역 변수 지역 변수 var 변수; function 함수(){ } function 함수(){ var 변수; } 예시3-14 // 함수블록안에 kor 변수는 전역변수인데 func함수를 호출 하게 되면 kor 변수 값이 90에서 100으로 바뀐다. var kor = 90; function func(){ kor = 100; // 전역변수 document.write(kor); // 100 } func(); document.write(.. 2022. 7. 28.
UI/UX 프로젝트 2022. 7. 27.
함수 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합이다. 함수의 종류 1. 선언적 함수 2. 익명함수 3. 매개변수 함수 4. 리턴값 함수 1. 선언적함수 '선언적 함수'는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출이 가능하다. 선언적 함수의 형식은 다음과 같다 function func() { document.write("실행되었습니다1."); } 결과 확인하기 실행되었습니다1. 2. 익명함수 익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어 준다. 선언적 함수의 형식은 다음과 같다 const func = function() { document.write("실행되었습니다2."); } 결과 확인하기 실행되었습니다2. 3. 매개변수.. 2022. 7. 26.
데이터 타입 데이터 타입 데이터 타입(Daya Type)은 변수에 저장되는 데이터의 유형으로 Primitive(원시) 데이터 타입과 Object(객체) 데이터 타입으로 나눌 수 있습니다. Primitive(원시) 데이터 타입으로는 number, string, boolean, undefined, null, symbol 등이 있으며, Object(객체) 데이터 타입에는 function, object, array 등이 있습니다. number(숫자) 데이터 number 데이터는 정수, 소수점, 지수를 표현할 수 있습니다. var num1 = 10; var num2 = 10.5; var num3 = le+2; console.log(num1); // 10 console.log(num2); // 10.5 console.log(n.. 2022. 7. 25.
조건문 조건문 어떤 조건이 주어질 때 어떤 동작을 수행하도록 하는, 즉 조건에 따라 실행이 달라지게 할 때 사용되는 문장입니다. if문과 switch문이 있습니다. if문 if문의 기본 형식입니다. if (조건식) { 실행문; } if (조건식) { 실행문1; } else { 실행문2; } if (조건식) { 실행문1; } else if (조건식2) { 실행문2; } else { 실행문3; } switch문 switch문의 기본 형식입니다. switch (값) { case 값1 : 실행문; break; case 값2 : 실행문; break; default : 실행문; } 01. if문(제어문) //조건문 if,else문의 기본문이다 if("0null"){ document.write("실행되었습니다(true).".. 2022. 7. 25.
반복문 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다 for문 for문의 기본 형식입니다. for ( 초기값; 조건식; 증가감식){ 실행문; } while문 while문의 기본 형식입니다. 초기 값 while (조건식) ){ 실행문; 증가감식; } do while문 do while문의 기본 형식입니다. 초기 값 do {{ 실행문; 증가감식; } while (조건식) 1. 0부터 99까지 출력하기 시작값 0부터 1씩 증가해서 100보다 작거나 같은 값 까지 구한다 //0부터 99까지 출력하기 for( let i = 0; i < 100; i++ ){ .. 2022. 7. 21.
연산자 기본 규칙 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자입니다. 자바스크립트에서 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자를 다루는 기본적이면서도 가장 많이 사용되는 연산자입니다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫 을 구할 때 사용 합니다. % 나머지를 구할 때 사용 합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자는 변수에 값을 대입할때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽입니다. 대입 연.. 2022. 7. 20.
기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 자바스크립트를 공부하세요! 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어입니다 HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였스며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는.. 2022. 7. 20.
광고 준비중입니다

티스토리툴바