카테고리165 퀴즈 만들기02/ 주관식 유형 퀴즈 만들기_주관식 유형 이번에도 자바 스크립트를 이용해서 퀴즈를 만들어 보겠습니다. 저번시간과는 다르게 스크립트를 이용해 문제를 입력 후, 정답확인을 눌렀을 때 1. 정답 확인하기 버튼을 숨기고 정답을 출력하며 2. 정답일 경우 "정답입니다"출력, 오답일 경우 "오답입니다"를 출력 합니다. 원본 소스 보기 Javascript 영문의 경우에는 대소문자에 따라 맞는 정답도 오답이 될 수 있으므로 정답과 입력된정답값을 소문자로 변환시키는 toLowerCase()를 활용하고 공백을 제거하기 위해 trim()을 활용합니다. // 선택자 // querySelector를 이용해 각 class이름에 연결시킴 const quizType = document.querySelector(".quiz__type"); // 퀴즈.. 2022. 8. 4. 퀴즈 만들기01/ 정답 확인 유형 퀴즈 만들기_정답 확인하기 유형 오늘은 자바 스크립트를 이용해서 퀴즈를 만들어 보겠습니다. 스크립트를 이용해 문제를 입력 후, 정답확인을 눌렀을 때 정답 확인하기 버튼을 눌렀을 때 정답을 보여줍니다. 원본 소스 보기 Javascript innerHTML/innerText : html은 태그를 인식하고, text 는 말그대로 텍스트로 출력합니다. textContent()를 사용할 수 도 있지만 이 메서드는 브라우저 호환문제로 잘 쓰지 않습니다. // 선택자 // querySelector를 이용해 각 class이름에 연결시킴 const quizType = document.querySelector(".quiz__type"); // 퀴즈 종류 const quizNumber = document.querySelec.. 2022. 8. 4. 레이아웃 배치 5 레이아웃(Layout) 배치 레이아웃 배치 다섯번째 시간입니다. (float, flex, grid에 대한 자세한 설명은 여기를 참고하세요!) 저번 시간에 배웠던 container요소와 기존에 계속해서 학습했던 레이아웃속성값들을 이용해서 구조화 해볼게요! 그리고 flex에도 grid처럼 시멘틱태그를 활용해서 구조화 해 볼 예정입니다. 01_ float을 이용한 레이아웃 foat:left 속성을 이용해 좌측 빈 공간부터 차곡 차곡 채워나갑니다. float로 인해 깨지는 영역은 clearfix를 활용해서 해결합니다. 반응형 웹을 구현하기 위해서 width와 height의 값을 조정해줍니다. * { margin: 0; padding: 0; } #wrap { width: 100%; } #header { width.. 2022. 7. 29. 레이아웃 배치 4 레이아웃(Layout) 배치 레이아웃 배치 네번째 시간입니다. 주요 콘텐츠들을 가운데로 배치하고 화면이 늘어나도 뒷요소들을 계속해서 표현해주는 구조입니다. 요즘 실제 웹들은 이러한 구조를 가장 많이 사용하고 있습니다. container라는 부모요소를 활용한 레이아웃 이번 구조는 따로 레이아웃에 관련된 속성값을 부여할 필요가 없는 구조입니다. 가운데 주요 콘텐츠 요소들을 container로 묶어 설정합니다. container의 높이값은 직접 입력해도 되지만, height: inherit를 이용해 부모요소의 높이값을 그대로 상속받도록 합니다. *{ margin: 0; padding: 0; } #header{ height: 100px; background-color: #E0F2F1; } #nav{ height.. 2022. 7. 29. 레이아웃 배치 3 레이아웃(Layout) 배치 레이아웃 배치 세번째 시간입니다. (float, flex, grid에 대한 자세한 설명은 여기를 참고하세요!) 특이사항으로, flex사용 시 요소들을 한번 더 묶어서 구조화 합니다. 또 태블릿 이후의 해상도에서는 사라지는 요소가 있는데 이는 display:none을 이용합니다. 01_ float을 이용한 레이아웃 foat:left 속성을 이용해 좌측 빈 공간부터 차곡 차곡 채워나갑니다. 이후 아래 요소가 보이지 않는 버그는 clear:both속성을 사용하여 해결하였습니다. 반응형 웹을 구현하기 위해서 width와 height의 값을 조정해줍니다. *{ margin: 0; } body{ background-color: #E1F5FE; } #wrap{ width: 1200px; .. 2022. 7. 29. 레이아웃 배치 2 레이아웃(Layout) 배치 저번시간과 마찬가지로 기존에 배웠던 float, flex, grid를 활용하여 실제 레이아웃 배치를 해봅시다. (자세한 설명은 여기를 참고하세요!) 두번째 구조는 1번 구조에서 한개가 더 추가된 구조이며, 반응형 웹 적용시 속성값을 변경해주는 구조입니다. 01_ float을 이용한 레이아웃 foat:left 속성을 이용해 좌측 빈 공간부터 차곡 차곡 채워나갑니다. 이후 아래 요소가 보이지 않는 버그는 clear:both속성을 사용하여 해결하였습니다. 반응형 웹을 구현하기 위해서 width와 height의 값을 조정해줍니다. *{ margin: 0; } body{ background-color: #E8F5E9; } #wrap{ width: 1200px; margin: 0 aut.. 2022. 7. 29. 레이아웃 배치 1 레이아웃(Layout) 배치 오늘은 기존에 배웠던 float, flex, grid를 활용하여 실제 레이아웃 배치를 해봅시다. (자세한 설명은 여기를 참고하세요!) 첫번째 구조는 가장 기본이 되는 구조입니다. 01_ float을 이용한 레이아웃 foat:left 속성을 이용해 좌측 빈 공간부터 차곡 차곡 채워나갑니다. 이후 아래 요소가 보이지 않는 버그는 clear:both속성을 사용하여 해결하였습니다. 반응형 웹을 구현하기 위해서 모바일사이즈에서는 aside와 section의 width값을 100%로 조정해줍니다. *{ margin: 0; } body{ background-color: #FFF3E0; } #wrap{ width: 1200px; margin: 0 auto; } #header{ width: .. 2022. 7. 29. 지역/전역 변수 지역변수/전역변수 변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역/지역 변수'로 나뉩니다. 전역 변수는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 지역 변수는 함수 블록{} 내에서만 사용 가능합니다. 전역 변수와 지역 변수 선언 위치 전역 변수 지역 변수 var변수; function 함수(){ } function 함수 () { var 변수; ; 함수블록 {}안에 있는 kor 변수는 전역 변수입니다. ∴ getScore()함수를 호출하게 되면 kor 변수 값이 90에서 100으로 바뀝니다. var kor = 90; function getScore() { kor = 100; // 전역 변수 console.log(kor); // 100 } getScore(); console.log(.. 2022. 7. 28. 함수 함수 함수는 자바스크립트의 기본적인 구성 중 하나입니다. 함수는 작업을 수행하거나 계산하는 문장 집합 같은 개념입니다. 함수는 쉽게말해 실행문이라고 생각하면 편합니다. 01_ 선언적 함수 가장 기본이 되는 함수 방식입니다. function func(){ document.write("함수가 실행되었습니다.1") }; func(); 결과보기 함수가 실행되었습니다.1 02_ 익명 함수 함수의 이름이 선언되지 않아 변수 이름을 따라갑니다.(변수 속의 함수) const func = function(){ document.write("함수가 실행되었습니다.2"); } func(); 결과보기 함수가 실행되었습니다.2 03_ 매개변수 함수 함수의 매개변수(parameter)란 함수를 호출할 때 인수로 전달된 값을 함수 .. 2022. 7. 26. 데이터 타입 데이터 타입 데이터 타입은 변수에 저장되는 데이터의 유형으로 원시데이터 타입과 객체데이터 타입으로 나눌 수 있습니다. 01_ 숫자(number) 데이터 숫자데이터는 정수, 소수점, 지수를 표현할 수 있습니다. var num1 = 10; var num2 = 10.5; var num3 = 1e+2; consloe.log(num1); //10 consloe.log(num2); //10.5 consloe.log(num3); //100, 1e+2는 1*10의2승을 의미합니다 02_ 문자(string) 데이터 문자데이터는 ''또는 ""으로 표현할 수 있습니다. 문자안에 문자가 들어갈 경우 서로 다른 따옴표로 표시합니다. var str1 = "문자"; var str2 = '문자'; var str3 = "문자는'문자'.. 2022. 7. 25. 조건문 조건문 특정 조건 만족 시(true) 실행하는 명령의 집합입니다. 조건문은 if문, switch문이 있습니다. 01_ if문 if문에는 3가지 형식이 있습니다. 1) 조건이 true 인 경우 실행문을 실행합니다. if (조건식) { 실행문; } 2) 조건이 true 인 경우 실행문1을, false일 경우 실행문2를 실행합니다. if (조건식) { 실행문1; } else { 실행문2; } 3) 조건1이 true일 경우 실행문1을, false일 경우 조건2를 비교하여 조건2가 true일 경우 실행문2를, 아닐경우 실행문3을 실행합니다. (조건이 false일 경우 다음 조건식을 비교합니다.) if (조건식) { 실행문1; } else if(조건식2) { 실행문2; }else { 실행문3; } 4) if문은 i.. 2022. 7. 25. 레이아웃 기본 익히기 레이아웃(Layout) 기본 레이아웃 배치시 사용할 수 있는 방법으로는 float, flex, grid 방식이 있습니다. 01_ float 특정 요소(elemnet)를 떠있게, 부유하게 만드는 속성입니다. 즉, 박스를 왼쪽(left) 또는 오른쪽(right)으로 배치시키는 방법입니다. flaot를 사용할시 영역이 깨지는 버그(부모요소가 자식요소의 높이를 인지못함)가 있는데, 이 버그는 1) 깨지는 영역에 'clear: both' 속성을 사용합니다.(비추) 2) 부모 요소 영역에 overflow:hidden을 설정합니다. 3) flaot을 사용한 부모요소에 clearfix를 설정합니다 float를 취소할 때에는 float:none; 합니다. 속성 값 속성 설명 left 좌측 빈공간부터 채워 내려옴 righ.. 2022. 7. 25. 반복문 반복문 반복문은 프로그램에서 필요한 결과값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. 01_ for문 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문입니다. for (초기 값 ; 조건식 ; 증감값){ 실행문; } 02_ while문 조건문이 참일 때 실행되는 반복문입니다. 조건은 문장 안이 실행되기 전에 참, 거짓을 판단합니다. 초기 값 while (조건식) { 실행문; 증가감식; } 03_ do while문 while문과 다르게 실행문을 먼저 한번실행하고 조건을 따져 출력합니다. 초기 값 do { 실행문; 증가감식; } while (조건식) 0부터 99까지 출력.. 2022. 7. 21. 연산자 자바스크립트 연산자 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자입니다. 자바스크립트 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 01_ 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자입니다. 산술 연산자 종류 속성 설명 + 더하기 연산 시 사용 문자와 문자, 문자와 변수 등을 연결할 때 사용 - 빼기 연산 * 곱하기 연산 시 사용 / 몫을 구할때 사용 % 나머지 구할때 사용 ++ 1씩 증가시킬때 사용 -- 1씩 감소시킬때 사용 02_ 대입 연산자 대입 연산자는 변수에 값을 대입할때 사용하는 이항 연산자입니다. 대입 연산자 종류 설명 = num = 1은 우변의 1값을 좌변의 num 변수에 대입(저장) += num += 2는 num.. 2022. 7. 20. 기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 자바스크립트를 공부하세요 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였으며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는 표준화 작.. 2022. 7. 20. 이전 1 ··· 3 4 5 6 다음 반응형
