Dragonball Online Goku Hand
본문 바로가기

코딩Gabojago~164

padStart() / padEnd() padStart() / padEnd() 에 대해 알아봅시다! padStart() 메서드란? : 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환 : 채워넣기는 대상 문자열의 시작(좌측)부터 적용 string.trim() padEnd() 메서드란? : 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환 : 채워넣기는 대상 문자열의 끝(우측)부터 적용 (자릿수, 뭘로 채울지(기본 숫자빼고 나머지 자리수를 채우는데 자릿수보다 적으면 반복, 크면 자릿수만큼만 채우고 짤림)) "문자열".padStart(길이) "문자열".padStart(길이, 문자열) string.padStart(목표 문자열 길이, "현재 문자열에 앞에 채워넣을 다른 문자열.. 2022. 8. 18.
repeat() repeat() 이란? : 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환 string.repeat(count) string : 문자열 count 매개변수 : 문자열을 반복할 횟수 (양의 정수) repeat() 메서드 사용예제 (★주석이 리턴값입니다!★) const str1 = "javascript"; const currentStr1 = str1.repeat(0); //'' const currentStr2 = str1.repeat(1); //javascript const currentStr3 = str1.repeat(2); //javascriptjavascript 2022. 8. 18.
concat() concat() 이란? : 두 개의 문자열을 하나의 문자열로 만들어주는 역할을 하는 메서드 : 입력값을 문자열 대신 배열을 사용하면 두 개의 배열을 하나의 배열로 만들어주는 역할도 하는 메서드 "문자열".concat("문자열"); [배열명].concat([배열명]); 문자열 결합 "문자열".concat(문자열) "문자열".concat(문자열, 문자열....) concat() 메서드 사용예제 (★주석이 리턴값입니다!★) const str1 = "javascript"; const currentStr1 = str1.concat("reference") //javascriptreference const currentStr2 = str1.concat(" ", "reference") //javascript refer.. 2022. 8. 18.
replace() / replaceAll() replace() / replaceAll()에 대해 알아봅시다! replace() / replaceAll() 메서드란? : 대상 문자열을 원하는 문자값으로 변환하는 메서드 : 첫번째 매개변수는 변환하고자 하는 대상이 될 문자열 : 두번째 매개변수는 변환할 문자 값 : replace()에서 따옴표를 / 슬래시로 대체하고, 뒤에 gi 를 붙이면 replaceAll()과 같은 기능 string.replace() string.replaceAll() "문자열".replace("찾을 문자열", "변경할 문자열") "문자열".replace(정규식) "문자열".replace(정규식, "변경할 문자열") [정규식] * g : 발생할 모든 패턴에 대한 전역 검색 * i : 대/소문자 구분 안함 * m : 여러 줄 검색 r.. 2022. 8. 18.
split() split()이란? : 구분자를 기준으로 문자열을 잘라 배열로 입력할 때 사용하는 메서드 출력방법 "문자열".split(구분자); "문자열".split(정규식 표현 가능); "문자열".split(구분자, 갯수); split() 메서드 사용예제 (★주석이 리턴값입니다!★) const str1 = "javascript reference"; const currentStr1 = str1.split('') // ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e'] const currentStr2 = str1.split(' ') // ['javascript', 'reference'] con.. 2022. 8. 18.
trim() / trimStart() / trimEnd() trim() / trimStart() / trimEnd() 에 대해 알아봅시다! trim() 메서드란? : 문자열의 앞쪽, 뒤쪽 공백을 모두 제거한 문자열을 반환 string.trim() trimStart() 메서드란? : 문자열의 앞쪽 공백을 모두 제거한 문자열을 반환 string.trimStart() trimEnd() 메서드란? : 문자열의 뒤쪽 공백을 모두 제거한 문자열을 반환 string.trimEnd() trim() / trimStart() / trimEnd() 메서드 사용예제 const str1 = " javascript "; const currentStr1 = str1.trim(); document.querySelector(".sample03_N1").innerHTML = "1"; docum.. 2022. 8. 18.
toUppercase() / toLowercase() toUppercase() / toLowercase() 에 대해 알아봅시다! toUppercase() 메서드란? : 문자열을 대문자로 변환해서 반환 string.toUpperCase() toLowercase() 메서드란? : 문자열을 소문자로 변환해서 반환 string.toLowerCase() toUppercase() / toLowercase() 메서드 사용예제 >const str1 = "javascript"; const currestStr1 = str1.toUpperCase() document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector(".sample02_Q1").innerHTML = "javascript"; documen.. 2022. 8. 18.
템플릿 문자열 템플릿(template) 문자열이란? : 문자열 결합 : 값을 (변수 or 상수) 문자열 안에 써야하는 경우에 사용하는 것 : 간단하게 말해서 내장된 표현식을 허용하는 문자열 리터럴 : 따옴표 대신 ``(백틱) 문자로 문자열을 감싸서 만드는데 ${} 안에 표현식을 넣어 값이나 간단한 식 등 자바스크립트 문법을 문자열 안에 사용 우선 ``(백틱)으로 문장을 감싸고, 변수가 들어갈 부분에 ${변수명}과 같은 형태로 입력 템플릿(template) 문자열 사용예제 const str1 = "자바스크립트"; const str2 = "제이쿼리"; //document.write(str1 + str2); //자바스크립트제이쿼리 document.querySelector(".sample01_N1").innerHTML = ".. 2022. 8. 18.
[사이트 제작] 두번째 : 이미지 유형 TYPE.02 사이트 제작하기 : 이미지 유형02 사이트 유형에는 이미지 유형도 있습니다. 카드 유형이랑 비슷해보이지만 이미지 안에 글씨가 들어간다는 차이가 있습니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. 그리드를 통해 기본적인 틀을 먼저 잡아준 후 " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 .. 2022. 8. 17.
[사이트 제작] 첫번째 : 이미지 유형 TYPE.01 사이트 제작하기 : 이미지 유형01 사이트 유형에는 이미지 유형도 있습니다. 카드 유형이랑 비슷해보이지만 이미지 안에 글씨가 들어간다는 차이가 있습니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. 그리드를 통해 기본적인 틀을 먼저 잡아준 후 " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다 설정해줬다면 코딩을 해봅시다! html의 body 부분에 .. 2022. 8. 17.
"서치 이펙트" Search 02. includes() 메서드를 활용하여 검색 화면 만들기 서치이펙트 02 includes()을 이용하여 검색 화면을 만들어 봅시다. HTML 태그 검색창 만들기! 실제 사이트보기 원본 소스보기 CSS 소스보기 ▶ 카테고리 만들기 카테고리를 만들기 위해 HTML로 먼저 틀을 짜주어야 합니다. HTML 1 2 3 4 5 6 list를 이용하여 목차가 있는 구조로 깔끔하게 카테고리를 짤 수 있습니다. 해당 페이지에 class="active"를 넣어주셔야 어느 페이지에 있는지 쉽게 알 수 있습니다. CSS /* header */ #header { display: flex; justify-content: space-between; } #header nav { margin: 10px; } #header nav li { position: relative; display: .. 2022. 8. 17.
slice() / substring() / substr() slice() / substring() / substr() 에 대해 알아봅시다! 01. slice() 메서드 slice() 메서드는 주어진 배열의 start 인덱스부터 end 인덱스까지(단, end인덱스는 포함하지 않음)에 대한 새로운 배열 객체로 반환합니다. ★slice(start index, end index)★ //start index : 0을 시작으로 하는 시작점에 대한 인덱스 : 만약 음수라면 배열의 끝에서부터의 길이를 나타냄 (-1이면 배열에서 제일 마지막 한 개 추출) : 배열의 길이보다 큰 값이면 빈 배열을 반환 //end index : 추출을 종료할 인덱스(end index를 제외하고 추출) : end가 생략되면? 배열의 끝까지(배열의 길이) 추출 : end가 배열의 길이보다 크다면? 배.. 2022. 8. 16.
indexOf() / lastIndexOf() indexOf() / lastIndexOf() 에 대해 알아봅시다! indexOf() 메서드란? : 앞에서부터 검색할 값을 찾기 시작하는 속성 : 여기서 시작할 위치가 생략이 될 경우에는 시작위치의 값을 0으로 인식하여 처음부터 검색을 시작 : 일치하는 결과값이 없을 경우에는 -1로 결과를 리턴 string.indexOf(검색할 값 , 시작위치) lastIndexOf() 메서드란? : 끝에서부터 검색할 값을 찾기 시작 : 시작위치가 생략되었을 경우 맨 끝에서부터 검색을 시작 string.lastIndexOf(검색할 값 , 시작위치) ★ 요약 ★ 검색된 문자열이 첫번째로 나타나는 위치의 index를 반환. 찾는 문자열이 없으면 -1을 반환 문자를 찾을 때 대소문자를 구분 indexOf() / lastInd.. 2022. 8. 16.
정규표현식 정규표현식이란? : 사전적인 의미로는 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어입니다. 주로 Programming Language나 Text Editor 등에서 문자열의 검색과 치환을 위한 용도로 쓰입니다. 입력한 문자열에서 특정한 조건을 표현할 경우 일반적인 조건문으로는 다소 복잡할 수 있지만, 정규표현식을 이용하면 매우 간단하게 표현할 수 있습니다. 하지만, 코드가 간단한 만큼 가독성이 떨어져 표현식을 숙지하지 않으면 이해하기 힘들다는 문제점이 있습니다. 정규표현식은 패턴을 사용하여 문자열을 처리합니다! 정규표현식 객체 주요 패턴을 정리해봅시다! 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[abc.. 2022. 8. 16.
"서치 이펙트" Search 01. indexOf() 메서드를 활용하여 검색 화면 만들기 서치이펙트 01 indexOf()를 활용하여 검색 화면을 만들어 봅시다. HTML 태그 검색창 만들기! 실제 사이트보기 원본 소스보기 CSS 소스보기 ▶ 카테고리 만들기 카테고리를 만들기 위해 HTML로 먼저 틀을 짜주어야 합니다. HTML 1 2 3 4 5 6 list를 이용하여 깔끔하게 카테고리를 짤 수 있습니다. CSS /* header */ #header { display: flex; justify-content: space-between; } #header nav { margin: 10px; } #header nav li { position: relative; display: inline; } #header nav li a { width: 30px; height: 30px; border: 1px.. 2022. 8. 16.
[HTML] "구조 관련 요소" 에 대해 알아보자! HTML 구조 관련 요소에 대해 알아봅시다! HTML 구조 관련 요소에는 블록 레벨 요소와 인라인 레벨 요소가 있습니다. 오늘은 블록 레벨 요소에 대해 공부해보겠습니다. 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 반응형웹 MENU01 MENU02 MENU03 MENU04 MENU05 콘텐츠 그룹01 콘텐츠 그룹02 주요기사 광고 경기도 안양시 동안구 031)123-4567 noeyheyh9357@gmail.com COPYRIGHT © All rights reserved. 결과보기 ➰구조 관련 요소를 활용하여 레이아웃을 만들어봅시다! HTML h1 반응형웹 header nav MENU01 MENU02 MENU03 MENU04 MENU05 div section 콘텐츠 그룹01 section 콘텐.. 2022. 8. 16.
내장 함수 내장 함수 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. ★종류★ 01. 인코딩, 디코딩 함수 02. 숫자, 유/무한 값 판별 함수 03. 숫자, 문자 변환 함수 04. 자바스크립트 코드 변경 함수 ▶ 인코딩, 디코딩 함수 URL주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이런 경우 인코딩 함수를 이용하여 문자를 부호화시키고 부호화된 문자를 다시 디코딩 함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 ()-_.~*!'을 제외한 문자를 인코딩합니다. decodeURIComponent() encodeURIComponent(.. 2022. 8. 16.
[CSS] 미디어쿼리에 대해 알아보자! 미디어쿼리(media query)란 무엇일까? 미디어쿼리란, 뷰포트의 해상도에 따라 CSS를 분리시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. ▶︎ 종류 01. 02. @media 03. media query를 흉내내는 script 01. 1000) $('body').addClass('mob').removeClass('pc'); else $('body').removeClass('mob').addClass('pc'); } 창의 가로 크기를 재고 1000px 보다 좁으면 body에 mob 클래스를 붙이고 pc 클래스는 제거하고, 1000px 이상이면 body에 pc 클래스를 붙이고, mob 클래스는 제거한다는 뜻입니다. $(window).resize(function() { initLayo.. 2022. 8. 16.
[CSS] 기본 문법 정리 CSS 기본 문법에 대해 알아봅시다! ★CSS 정의하는 방법★ 01. 내부 스타일시트 : 간단한 스타일 사용시 02. 외부 스타일시트 : 많이 사용하는 편 03. 인라인 스타일시트 : 거의 사용하지 않지만 우선순위가 가장 높기에 꼭 필요한 경우 편리하게 사용 가능 ※ CSS 주석 : /* */ 01. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 예제 우리를 기쁘게 하는 것들. 결과보기 02. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 스타일은 *.css확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 내부 스타일시트는 그 스타일이 기술된 페이지.. 2022. 8. 16.
배열 객체 배열 객체 배열 객체는 인접한 메모리 블록 내의 특정 위치에 보관되는 데이터 조각입니다. 이러한 메모리 블록을 "Array" 라고 하며 컴퓨터 프로그램 내에서 쉽게 구성하고 엑세스 할 수 있도록 유사한 객체를 함께 그룹화하는 데 사용됩니다. 배열에서 객체의 위치를 "Index" 라고 합니다. 대부분의 컴퓨터 언어에서 첫 번째 객체의 색인은 1인 아닌 0에서 시작합니다. 배열의 모든 객체는 동일한 유형이어야 하며 배울에 문자열을 포함하도록 선언된 경우 모든 배열 객체는 문자열이어야 합니다. 일반적인 객체 유형이 배열에 의해 선언된 것이면 배열 객체는 크기에 관계없이 모든 유형의 데이터를 포함할 수 있습니다. ▶ 배열 속성 : length ▶ 배열 메서드 01. join() 02. push() / pop().. 2022. 8. 11.
[사이트 제작] 세번째 : 카드유형 TYPE.03 사이트 제작하기 : 카드 유형03 이번 카드 유형은 큰 여백 안에 3개의 카드를 만들어 내는 유형입니다. 카드를 분리하는 선, 그림 안에 글씨 넣기, 제일 밑 부분에 인물 정보 넣어주기 등 기존에 했던 카드유형과는 다른 새로운 부분들이 있으니 주의하셔야 합니다! 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 기존의 카드 유형의 방법들과 같이 먼저 사이트 레이아웃을 설정해야 합니다. figma를 이용하여 레이아웃을 설정해줄 수 있습니다. layout을 grid가 아닌 columns로 설정 후 count 12, margin 380을 틀을 만들어줍니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 .. 2022. 8. 10.
[CSS] 비트맵(Bitmap)방식과 벡터(Vector)방식에 대해 알아보자! 비트맵(Bitmap)방식과 벡터(Vector)방식은 무엇일까? 이미지 확장자를 선택하는 것은 비트맵과 벡터 이미지 중 어떤 형식으로 저장할지를 선택하는 것입니다. 포토샵과 일러스트레이터 중 결정하는 것도 비트맵과 벡터 중에서 선택하는 것입니다. 이번 포스팅을 통해 비트맵 방식과 벡터 방식 차이를 배워봅시다! ▶ 비트맵(Bitmap) 방식이란? 비트맵(Bitmap) 방식이란, 사각형 격자로 된 작은 점(픽셀)들이 모여서 표시된 이미지를 의미합니다. 쉽게 말해 픽셀에 있는 비트들이 모여 있는 방식이라고 보면 됩니다. 비트맵 이미지는 래스터 이미지라는 다른 표현으로 부르기도 합니다. 1픽셀마다 다른 데이터들을 가지고 있으며 서로 조합하여 하나의 이미지가 완성됩니다. 비트맵 이미지는 섬세한 색상을 표현해야 하는.. 2022. 8. 9.
[사이트 제작] 두번째 : 카드 유형 TYPE.02 사이트 제작하기 : 카드 유형02 이번 카드 유형은 8개의 카드를 위 아래 4개씩 배치하는 것입니다. 네모 안 화살표를 오른쪽에 배치하는 부분이 카드 유형01과는 다른 특징입니다. 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. layout을 grid가 아닌 columns로 설정 후 count 12, margin 380을 주어 아래와 같은 형식을 만들어줍니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. v.. 2022. 8. 9.
[사이트 제작] 첫번째 : 카드 유형 TYPE.01 사이트 제작하기 : 카드 유형01 웹 개발자에게 사이트 제작하기는 기본입니다. 따라서 웹 개발자가 되기 위해서는 사이트의 유형과 사이트 만드는 방법을 기초부터 탄탄하게 배워야 합니다. 오늘은 코딩과 피그마를 활용하여 아래와 같은 사이트를 만들어 보겠습니다! 오늘 만들 사이트 형식 사이트 제작 방법 1. Figma 사용해서 레이아웃 설정 사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. 밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다. ※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다. 2. vscode를 통해 코딩해주기! : HTML편 레이아웃을 다.. 2022. 8. 8.
[HTML] "웹 표준/웹 호환성/웹 접근성"에 대해 알아보자! 웹 표준과 웹 호환성과 웹 접근성이란 무엇일까? 기본 개념이면서도 중요한 개념인 웹 표준과 웹 호환성 마지막으로 웹 접근성까지 알차게 배워봅시다! ▶ 웹 표준이란? 웹 표준이란, 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준입니다. 다른 기종이나 플랫폼에 따라 다르게 구현되는 기술을 동일하게 구현하고 어느 한쪽에 최적화 되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법입니다. 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있습니다. ※웹 표준 목적 : 사용자들(장애인, 노약자를 포함한 모든 사용자)이 어떤 운영체제나 브라우.. 2022. 8. 8.
"퀴즈이펙트" Quiz 04 : 객관식(한문제) 유형 Quiz 04. 자바스크립트를 활용하여 웹디자인기능사 필기 2013년도 5회차 문제를 통해 객관식 문제를 만들어봅시다! 원본 소스보기 자바스크립트 활용 ※ 객관식 문제 ※ -주관식이 아니므로 input X => quizInput없어도 됨! -문제를 출력할 때 실행문의 집합이 함수이므로 데이터가 많아질 때를 고려하여 자바스크립트에서 함수를 블록화 해주는 것이 편리한데 이 때 function updateQuiz(){}를 이용-> !!!함수를 이용했다면 반드시 마지막 }; 에 함수실행 써주어야함updateQuiz();!!! -정답 확인 시에도 함수를 실행해주는데 이 때 과정을 주의해야 한다. 1. for문을 통해 객관식 보기 수에 따라 몇 번 if문을 반복할지 정해줘야 함 2. for문 안에 if문을 쓸 때 .. 2022. 8. 8.
요소 선택 요소 선택 요소를 제어하기 위해서 가장 먼저해야할 것은 요소를 선택하는 것입니다. 그렇다면 요소를 어떻게 불러와서 제어를 하는걸까요? 바로 선택자를 통해서 요소를 불러옵니다. ▶ 요소를 직접 선택하는 메서드 메서드 설명 getElementById() document.getElementById('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName('menu')일 경우 HTML 요소 중 class 명이 'menu'인 요소들을 선택합니다. getElementsByTagName() document.getElementsByTagName('ul')일 경우 HTML 요소 중.. 2022. 8. 7.
"퀴즈이펙트" Quiz 03 : 여러 개의 주관식 유형 Quiz 03. 자바스크립트를 활용하여 웹디자인기능사 필기 2014년도 1회차 4개의 문제를 만들어봅시다! 원본 소스보기 자바스크립트 활용 ※ 주관식 문제 ※ -input 활용 => quizInput (주관식 답을 넣어주기 위함) -for문 또는 forEach문을 통해 데이터가 많을 때를 고려해서 사용!(중요) -if문 활용 => 정답인지 아닌지에 대한 확인 1. 선택자를 지정해준 후 문제 정보를 적어줍니다. 2. 그 후 문제 출력을 위해 선택자와 문제 정보를 연결해줍니다. 이 때 textContent를 사용해 줍니다. 여러 데이터를 저장하기 위해서는 for문이나 forEach문을 활용해줍니다. 3. 정답을 숨겨놓기 위해서 정답(quizResult)를 quizResult.style.diplay = "no.. 2022. 8. 5.
"퀴즈이펙트" Quiz 02 : 주관식 유형 Quiz 02. 자바스크립트를 활용하여 Quiz 01과는 다른 주관식 퀴즈를 만들어 봅시다. 원본 소스보기 자바스크립트 활용 ※ 주관식 문제 ※ -input 활용 => quizInput (주관식 답을 넣어주기 위함) -if문 활용 => 정답인지 아닌지에 대한 확인 1. 선택자를 지정해준 후 문제 정보를 적어줍니다. 2. 그 후 문제 출력을 위해 선택자와 문제 정보를 연결해줍니다. 이 때 textContent를 사용해 줍니다. 3. 정답을 숨겨놓기 위해서 정답(quizResult)를 quizResult.style.diplay = "none"으로 숨겨줍니다. 4. 정답 확인을 위해 사용자의 정답이 필요한데 이를 userWord라고 지정해줍니다. 5. if문을 활용하여 정답이었을 때와 정답이 아닐 때를 구분지.. 2022. 8. 4.
"퀴즈이펙트" Quiz 01 : 정답 확인하기 유형 Quiz 01. 자바스크립트를 활용하여 퀴즈를 만들어 봅시다. 원본 소스보기 자바스크립트 활용 1. 선택자를 먼저 지정해주고 문제 정보를 정리해준 후 문제 출력을 위해 선택자와 문제 정보를 innerText를 이용하여 문제를 출력해줍니다. 2. 정답을 확인하기 위한 버튼과 정답을 확인한 후의 화면을 디자인해줍니다. 이 때 정답을 확인하기 위해서 클릭하는 효과로 이벤트 객체인 addEventListener()메서드를 활용해 줍니다. //선택자 const quizType = document.querySelector(".quiz_type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz_question .number"); //퀴즈 번호 const qui.. 2022. 8. 4.

티스토리툴바