꿈트(GGUMT)

/ 리액트 입문서 intro 대상 - 리액트 입문자 - 자바스크립트도 리액트도 어려운 프론트앤드 개발 입문자 index 1- 3장 : 리액트 전 알아야 할 자바스크립트 기초 4장- 끝 : 리액트기본, 리액트에서 CSS다루기, 재랜더링,글로벌State관리, 리액트 개발에 타입스크립트 사용하기 등 참고 예제 다운로드 https:github.com/moseskim/book-react-code / 1장. 모던자바스크립트 기초 1-1. 모던자바스크립트 개요 모던자바스크립트의 특징 - 리액트, 뷰 앵귤러 등 가상 DOM을 이용하는 라이브러리/ 프레임워크를 사용 (최근에는 스벨트 처럼 가상 DOM을 이용하지 않는 기술도 등장) - npm, yarn 등 패키지 관리자 사용 - 주로 ES6이후의 표기법 사용 - 웹팩 등..

자바스크립트를 이용하여 GAME EFFECT 뮤직플레이어 만들기 완성화면 script -음악에 대한 정보 저장하기 const allMusic = [ { name : "1. summer", artist : "Joe Hisaishi", img : "music_img01", audio : "1.mp3" },{ name : "2. spring", artist : "Joe Hisaishi", img : "music_img02", audio : "2.mp3" },{ name : "3. hello", artist : "patric", img : "music_img03", audio : "3.mp3" },{ name : "4. hello", artist : "patric", img : "music_img04", aud..

게임 이펙트 웹 페이지 만들기 완성화면 script ✈. 운영체제 정보 보여주기(하단) function printAgent(){ // 운영체제 정보 알아내기 let os = navigator.userAgent.toLowerCase(); let sw = screen.width; let sh = screen.height; let info = document.querySelector(".info"); if (os.indexOf("windows") >= 0) { info.innerHTML = "현재 윈도우를 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다." } else if (os.indexOf("macintosh") >= 0) { info.innerHTML = "현재 맥을 사용하..

✈. 01 다음의 결괏값을 작성하시오. { let data = [10, 6, 7, 9, 3]; let temp; for(let i=0; i d)) ▷ 1이 b와 c가 같지 않거나 c와 d가 같은지 확인합니다. (1 == b ^ c != d) ▷ 위의 두 가지 조건문이 모두 true이면 a를 b+c로 할당합니다. 그렇지 않으면 b를 출력합니다. ▷ 따라서 위의 조건문이 참이면 a는 b+c인 7이 됩니다. 따라서 이 코드의 출력 결과는 7이 됩니다. ✈. 09 다음의 결괏값을 작성하시오. { function func(a){ if( a < 1 ) return 1 return a * func(a - 1); } console.log(func(5)) } 이 코드는 팩토리얼 계산 함수를 구현하는 코드입니다. 함수 '..

자바스크립트에서 문자열 객체에 대해 알아보기 문자열객체란? 자바스크립트에서 문자열(string)객체는 문자열 데이터를 나타내기 위한 객체 입니다. 문자열 데이터를 문자열 객체로 생성하면 , 문자열 객체의 다양한 메서드와 속성을 사용하여 문자열 데이터를 조작하고 분석할 수 있습니다. 문자열객체는 String()생성자를 사용하여 생성할 수 있습니다. 예를 들어, var str=new String("Hello, World!"); 와 같이 String()생성자를 사용하여 문자열 객체를 생성할 수 있습니다. 그러나 일반적으로 문자열데이터를 리터럴(literal)로 작성하여 문자열 객체를 자동으로 생성합니다. 예를 들어 , "Hello, World"와 같은 문자열 데이터를 리터럴로 표현하면 자동으로 문자열 객체가 ..

패럴랙스를 이용하여 이미지 스크롤 페이지 만들기 이미지와 함께 명언이 나오고, 보고있는 화면의 위치도 알려주는 페이지를 만들어 보았습니다. 완성화면 .✈ . HTML Javascript parallax Effect01 패럴랙스 이펙트 1 2 3 4 5 6 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 시간은 금이다 02 section2 배우고 때때로 익히면 또한 기쁘지 않겠는가 03 section3 아는 사람은 좋아하는 사람만 못하고, 좋아하는 사람은 즐기는 사람만 못하다. 04 section4 지혜로운 사람은 물을 좋아하고 어진사람은 산을 좋아한다. 05 section5 지혜로운 사람은 미혹되지 않고, 어진사람은 근심하지 않고 용감한 사람은 두려워하지 않는다 06..

자바스크립트를 이용하여 배경이 바뀌는 명언슬라이드를 만들어 보았습니다. 완성화면 .✈ . HTML .✈ . CSS .✈ . JAVASCRIPT const Result = document.querySelector("#result"); const Quote = result.querySelector(".quote"); const Author = result.querySelector(".author"); const dataresult = () => { fetch('json/dummy01.json') .then(res => res.json()) .then(items => { const randomIndex = Math.floor(Math.random() * items.length); Quote.textConten..

자바스크립트를 이용하여 로또 번호 추출하기 자바스크립트를 이용하여 1부터 45까지의 숫자를 무작위로 추출해주는 스크립트를 만들어 보았습니다. 완성화면 ✈. HTML LOTTO LUCKY NUMBERS COMING CLICK ✈. CSS *{ margin: 0; padding: 0; } #wrap { width: 100%; height: 100vh; background-color: #d6d7d3; padding-top: 100px; } .container { margin: 0 auto; border : dotted 10px #c4a43f; width: 1000px; height: 280px; text-align: center; } h1 { font-size: 50px; font-weight: bold; c..

명언 나오는 화면 만들기 자바스크립트를 이용하여 json파일에 저장된 명언 10개가 무작위로 추출되어 보여지는 화면을 만들어 보았습니다. 완성화면 .✈ . HTML .✈ . CSS @font-face { font-family: 'Cafe24Shiningstar'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff'); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; color: #34190e; background-color: #9fb6be; } .wrap { width:100%; m..

자바스크립트를 이용해 슬라이더를 만들어 보기 완성화면

자바스크립트를 이용해 슬라이더 효과 만들기 SLIDER EFFECT : 슬라이드 유형 웹페이지 만들기 아래쪽으로 자연스럽게 넘어가는 5페이지 짜리 슬라이드 만들기 완성화면 ✈00.HTML Javascript Slide Effect03 슬라이드이펙트 1 2 3 4 5 6 aimee00418@gmail.com 🏴🏳‍🌈 ✈01.CSS 🏴🏳‍🌈 ✈03.선택자 🏴. appendChild() 메서드는 DOM(Document Object Model)에서 사용되며, 주어진 부모 노드에 새로운 자식 노드를 추가하는데 사용됩니다. // 부모 요소 선택 const parent = document.getElementById('parent-element'); // 새로운 자식 요소 생성 const child = document..

SLIDER EFFECT : 슬라이드 유형 웹페이지 만들기 왼쪽으로 자연스럽게 넘어가는 5페이지 짜리 슬라이드 만들기 완성화면 ✈00.HTML Javascript Slide Effect03 슬라이드이펙트 1 2 3 4 5 6 aimee00418@gmail.com 🏴🏳‍🌈 ✈01.CSS 🏴🏳‍🌈 ✈03.선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역 const slider = slider..

JAVASCRIPT SLIDE EFFECT 웹페이지 만들기 자바스크립트로 슬라이드 유형 웹페이지를 구현해보자. 완성화면 ✈00. html Javascript Slide Effect01 슬라이드이펙트 1 2 3 4 5 6 aimee00418@gmail.com ✈00. CSS =>총 슬라이더의 위치를 슬라이드 한장만큼씩 옆으로 이동해 주면서 이미지를 다르게 보여주는 스크립트를 만든다 세가지 방식으로 스크립트를 적용해 보았습니다 🏳‍🌈00. 공통 선택자 부분 //선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = s..

JAVASCRIPT SLIDE EFFECT 웹페이지 만들기 자바스크립트로 슬라이드 유형 웹페이지를 구현해보자. 완성화면 ✈00. html Javascript Slide Effect02 슬라이드이펙트 1 2 3 4 5 6 aimee00418@gmail.com ✈00. CSS .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 움직이는 이미지 */ disp..

JAVASCRIPT SLIDE EFFECT 웹페이지 만들기 자바스크립트로 슬라이드 유형 웹페이지를 구현해보자. 완성화면 세가지 방식으로 스크립트를 적용해 보았습니다 🏳‍🌈00. 공통 선택자 부분 ✈01. JAVASCRIPT ✈02. GSAP 🏴. GSAP CDN소스를 가져와 적용합니다. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js ✈03. jQuery //jQuery CDN 🏴. jQuery CDN소스를 가져와 적용합니다. https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jq..

정보처리기능사 오답노트 2011년 4월 17일 필기 기출문제 오답노트 입니다. 2. 다음 중 RISC(Reduce Instruction Set Compauter)의 설명으로 옳은 것 은 ? 1) 메모리에 대한 액세스는 LOAD와 STORE만으로 한정되어 있다. 2) 명령어마다 다른 수행 사이클을 가지므로 파이프라이닝이 효율적이다. 3) 마이크로 코드에 의해 새석 후 명령어를 수행한다. 4) 주소지정 방식이 다양하게 존재한다. 6. 8비트 짜리 레지스터A와 B에 각각 11010101과 11110000이들어있다. 레지스터 A의 내용이 00100101로 바뀌었다면 두 레지스터 A , B사이에 수행된 논리 연산은? 1) Exclusive-OR 2) AND연산 3)OR연산 4) NOR연산 11. 연관기억장치의 구..

자바스크립트 객관식 퀴즈 만들기 자밥스크립트를 이용하여 JSON파일로 저장한 문제 데이터를 불러와 객관식문제를 만들어 보겠습니다. 정답을 체크하면 omr카드에 체크가 되고, 남은 문제가 표시되며, 다풀고 제출하면 정답과 오답, 채점표시가 나타나는 효과를 적용합니다. 문제를 풀어볼까요? HTML Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 제출하기 59분 10초 수험자 : 권현정 전체 문제수 : 0문항 남은 문제수 : 0 기능사 시험 도전하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 ..

자바스크립트와 json을 사용한 객관식 문제 만들기 문제를 풀어볼까요? html Quiz 객관식 확인 OMRcard 형식 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 59분 10초 제출하기 수험자 : 전체 문제수 : 60문항 남은 문제수 : 59문항 ✈. 01. 객관식 문제를 먼저 html으로 작성 02. json파일에 문제에 대한 데이터를 담기 03. 문제에 대한 html을 자바스크립트로 json데이터를 불러오는 식으로 바꿈 css .cbt__selects{ margin-bottom: 15px; } .cbt__selects label{ display: flex; } .cbt__selects label span{ font-size: 1rem; line-height: 1.5; curso..

✈ . 자바스크립트 MOUSEOVER, MOUSEOUT 이벤트를 활용해서 이미지를 바꿔주는 효과를 만들어 보았습니다. 🏴. 완성화면 🏁. HTML/ CSS 마우스 오버하면 이미지 바꾸기 🏁. JAVASCRIPT 이벤트를 활용하여 필요에 따라 표시했다가 감추는 메뉴를 만들어 보겠습니다. 🏴. 완성화면 🏁. HTML/ CSS ✈ click JAVASCRIPT TYPESCRIPT NODE.JS 🏁. JAVASCRIPT const btn1 = document.querySelector(".btn"); const nav1 = document.querySelector(".nav"); btn1.addEventListener("click", () => { btn1.classList.toggle("active"); nav..

자바스크립트에서 사용하는 문자열과 배열을 공부하겠습니다. ✈. 문자열 문자열은 자바스크립트에서 텍스트를 처리하기 위해 사용하는 자료형입니다. 그중 배열은 자주 사용하는 자료형인데 배열 객체에는 메서드가 많아 코드를 더 효율적이고 간단하게 만들어 줍니다. 먼저, 문자열부터 알아보겠습니다. 원시유형과 객체 -원시유형 : 단순히 값만 가진 경우 -객체 : 프로퍼티와 메서드를 가진 경우 - 확인 할 기능 메서드 예시코드 비고 문자열의 길이 문자열.length let str = "good morning!"; let gretting = "안녕하세요"; ser.length // 14 greeting.length // 6 공백도 문자열에 포함 문자의 위치 문자열.charAt(위치) let str = "Good morn..

자바스크립트를 이용한 퀴즈 만들기 : 객관식 퀴즈 자바스크립트를 이용하여 슬라이드형 객관식 문제를 만들어 보았습니다. HTML과 CSS, SCRIPT를 각각 살펴보면서 어떻게 만들었는지 살펴보겠습니다. ✈. 퀴즈 완성화면 정보처리기능사 문제입니다. 같이 풀어볼까요? ✈. HTML Quiz 객관식 확인(슬라이드)하기(여러문제) 유형 : 슬라이드 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음문제 설명 aimee00418@gmail.com 🏁. POINT ✈. JAVASCRIPT :문제정보 //문제정보 // 이렇게 이미지 넣기 const quizInfo = [ { infoType: "정보처리 기능사", infoTime: "2009년 7월 12일 5회", infoNumber: "20090501", info..

Array배열 개념 이해하기 배열은 자바스크립트에서 데이터를 순서대로 담는 자료구조 입니다. 배열 안에는 여러 개의 값들이 순서대로 나열 되어 있으며, 각 값들은 인덱스(Index)를 이용해 접근 할 수 있습니다. 인덱스는 첫 번째 요소가 0부터 시작하여 1씩 증가하는 정수 입니다. 배열은 '[ ]' 대괄호로 생성하며, 생성 시 배열의 초기값을 지정할 수 있습니다. const arr1 = [1, 2, 3]; // 초기값을 지정한 배열 const arr2 = []; // 빈 배열 배열에는 다양한 메서드(method)가 존재합니다. 이 메서드들을 사용하여 배열에 요소를 추가, 삭제, 검색하는 등 다양한 작업을 할 수 있습니다. 예를 들어, 다음은 배열의 'push()'메서드를 사용하여 배열의 끝에 요소를 추..

퀴즈 이펙트 : 객관식 문제 만들기 ✈. 정보처리기능사 60문제 시험으로 만들어 보았습니다. 같이 풀어볼까요? ✈. HTML Quiz 주관식 확인하기 유형 1 2 3 4 5 aimee00418@gmail.com 🏁.POINT - 문제정보는 자바스크립트로 작성할 예정 입니다. ✈. CSS /* header */ #header { background-color: #d3d3d3; color: #fff; padding: 10px; position: fixed; left: 0; top: 0; width: 100%; display: flex; justify-content: space-between; } #header::before { content: ''; border: 4px ridge #ccc; position..

Search_Effect : 검색 효과 웹페이지 만들기 검색하면 연관데이터가 나오는 웹페이지를 만들어 보았습니다. ✈. 완성화면 : 검색해 보세요! ✈. HTML 1 2 3 4 5 6 CSS 검색하기 자바스크립트 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지연 시간을 ..

마우스이펙트 2 마우스를 움직이면 따라다니고, 지정 위치에 놓으면 커서가 커지는 효과를 넣은 화면을 만들어 보겠습니다. ✈. 완성화면 ✈ . HTML Javascript Mouse Effect01 마우스이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Tyey must often change who would be constant in happiness of wisdom. - Confucius 늘 행복하고 지혜로운 사람이 되려면 자주 변해야 한다. -공자 aimee00418@gmail.com ✈. CSS POINT 01. mouse__cursor.active --> mouse__cursor2.active에 transform요소로 scale 크기 변화를 주어 커서가 올라갔을 때와 빠져나왔을 때를 다르게 표..

마우스이펙트 : 마우스 따라 다니는 효과 마우스의 위치에 따라 다양한 transition을 적용한 화면을 만들어 보겠습니다. 자바스크립트를 활용하여 마우스의 위치를 수치로 보여주는 효과도 적용하였습니다. ✈완성화면 ✈완성코드 https://github.com/aimeekwon/web2023/blob/main/javascript/mouse/mouseEffect01.html GitHub - aimeekwon/web2023: 수업시간 예제 수업시간 예제. Contribute to aimeekwon/web2023 development by creating an account on GitHub. github.com 🏴. HTML Javascript Mouse Effect01 마우스이펙트 - 마우스 따라다니기 1 ..

QUIZ : 객관식 문제 만들기 객관식 퀴즈를 만들어 보려고 합니다.(웹디자인 기능사 문제 입니다) 순서. ✈. 객관식 퀴즈 화면을 만들고 ✈. 답을 체크하면, ✈. 정답과 해설이 나오고, ✈. 정답이면 강아지가 웃고, ✈. 오답이면 강아지가 우는 퀴즈를 만들어 보겠습니다! ✈객관식 퀴즈 화면 만들기 1. 먼저 보여져야 할 화면을 디자인 합니다. 2. HTML으로 구조를 작성해 줍니다. 3. CSS로 디자인을 적용해 주고(컬러와 글씨체 등) 4. JAVASCRIPT로 퀴즈의 정보를 담은 스크립트를 넣어줍니다. 🏁. HTML : 구조를 작성해 줍니다. 정답입니다! 틀렸습니다! 정답확인하기 설명 🏁. CSS : 디자인을 적용해 줍니다. /* header */ #header { background-color:..

퀴즈 이벤트 : 문제 풀고 정답/ 오답 이벤트 2 퀴즈 이벤트를 만들어 보려고 합니다. 정보처리기능사 퀴즈입니다. 정답이면 강아지가 웃으면서 정답 애니메이션이 작동하고 오답이면 강아지가 울면서 오답 애니메이션이 작동하도록 만들어 봅니다. ▼링크를 따라가서 퀴즈를 풀어보세요!

forEach문 이해하기 [데이터불러오기] 파트에서 배운 forEach문을 공부해 보려고 합니다. forEach문은 JavaScript에서 배열(array)에 포함된 각 요소(element)에 대해 반복적으로 작업을 수행하는 메서드입니다. for문 for(let i=0; i { console.log(i); }); forEach문 만드는 법 arr.forEach(callback(currentValue [, index [, array]])[, thisArg]) arr : 작업을 수행할 배열명 callback : 배열의 각 요소에 대해 실행할 함수 currentValue : 현재 배열 요소의 값(내가 정하는 값) index(선택적) : 현재 배열 요소의 인덱스 array(선택적) : 배열자체 thisArg(선..

[javascript] 퀴즈 이펙트 : 문제 풀고 정답/오답에 따라 다른 화면이 나오는 효과 퀴즈의 답을 적어 제출했을 때, 정답이면 강아지가 웃고, 오답이면 강아지가 우는 화면을 보여줍니다. 스터디 목적은 자바스크립트에서 컨트롤 하고 싶은 선택자 전달하기(데이터 저장), 문제의 정보 작성하기(데이터 저장), 전달한 선택자에 맞는 정보 전달하기(데이터 불러오기), 만들어 놓은 정답과 해설 숨기기(데이터 제어하기) 사용자가 정답을 입력하고 버튼을 클릭하면 몇가지 이벤트 발생(데이터 제어하기) Quiz 주관식 확인하기 유형 1 2 . 정답확인하기 연변대비 설명 aimee00418@gmail.com 1. 컨트롤 하고 싶은 선택자 전달하기(데이터 저장) const quizWrap = document.queryS..