꿈트(GGUMT)

자바스크립트를 이용하여 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 = "현재 맥을 사용하..

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

scrollr.js 라이브러리를 이용하여 패럴랙스 페이지 만들기 -scrollr.js 라이브러리를 이용하여 스크롤값에 따라 화면이 다양하게 보여지는 패럴랙스 페이지 만들기 scrollr.js "scrollr.js"는 스크롤 이벤트를 사용하여 패럴랙스 효과를 만드는 자바스크립트 라이브러리입니다. 스크롤 이벤트에 따라 요소의 위치, 크기, 회전 등의 CSS 속성을 변경하여 패럴랙스 효과를 구현합니다. 또한, 요소의 위치나 속성을 스크롤 위치에 따라 동적으로 계산하고 조작할 수 있어서 매우 다양한 효과를 구현할 수 있습니다. scrollr.js는 jQuery를 기반으로 작성되었으며, 사용하기 쉬운 API와 다양한 설정 옵션을 제공 🏳‍🌈. 패럴랙스 란? 패럴랙스 효과(Parallax Effect)는 웹사이트에..

자바스크립트를 이용하여 로또 번호 추출하기 자바스크립트를 이용하여 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..

자바스크립트 객관식 퀴즈 만들기 자밥스크립트를 이용하여 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..

자바스크립트를 이용한 퀴즈 만들기 : 객관식 퀴즈 자바스크립트를 이용하여 슬라이드형 객관식 문제를 만들어 보았습니다. 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..

퀴즈 이펙트 : 객관식 문제 만들기 ✈. 정보처리기능사 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:..

자바스크립트 시험 입니다. 같이 풀어볼까요? ✈01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 🏴. 정답 더보기 정답 : 함수가 실행되었습니다 🏁. 즉시실행함수 즉시실행 함수(IIFE, Immediately Invoked Function Expression)는 함수를 정의한 후 바로 실행하는 JavaScript 함수입니다. 함수를 익명 함수로 선언하고, 소괄호로 감싸서 함수를 실행합니다. 이를 통해 함수를 정의한 후 바로 실행할 수 있습니다. IIFE를 사용하는 가장 일반적인 이유는 전역 스코프 오염을 방지하기 위해서입니다. IIFE를 사용하면 함수 내에서 선언된 변수는 해당 함수의 스코프 내에서만 유효하기 때문에, 전역 스코프에서..

혼란합니다. 점점 어려워지고 있는 자바스크립트...함수공부 이번엔 보충이 필요한 함수유형에 대해 공부해 보려고 합니다. / 01. 함수와 매개변수를 이용한 함수유형 ✈함수는 프로그래밍에서 매우 중요한 개념 중 하나이며, 일반적으로 어떤 입력값을 받아 처리를 수행한 후 결과를 반환하는 기능을 수행합니다. 이때 함수를 사용할 때 매개변수(parameter)를 이용하여 함수에 필요한 입력값을 전달합니다. 함수와 매개변수를 이용하여 다양한 함수 유형을 만들 수 있습니다. 인자 없는 함수 (Function without arguments) : 입력값이 없는 함수로, 함수 내부에서 정의된 코드를 실행하고 결과를 반환합니다. 인자 있는 함수 (Function with arguments) : 함수 호출 시에 매개변수로..

퀴즈 이펙트 : 퀴즈 내고 맞추는 페이지 만들기 퀴즈를 푸는 사이트를 만들어 보겠습니다. HTML/ CSS/ JAVASCRIPT를 활용하여 만들었습니다. 목적은 자바스크립트로 문제를 저장하고 문제에 맞는 텍스트를 출력할 수 있도록 만들었습니다. HTML Quiz 정답 확인하기 유형 . 정답확인하기 연변대비 aimee00418@gmail.com CSS_공통 리셋 /* reset css */ @import url('https://webfontworld.github.io/neodgm/NeoDunggeunmo.css'); @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld...

자바스크립트 데이터 불러오기 01. 변수 : 데이터 불러오기 02. 상수 : 데이터 불러오기 03. 배열 : 데이터 불러오기 : 기본 04. 배열 : 데이터 불러오기 : 2차 배열 05. 배열 : 데이터 불러오기 : 갯수 구하기 06. 배열 : 데이터 불러오기 : for()문 07. 배열 : 데이터 불러오기 : 중첩 for()문 08. 배열 : 데이터 불러오기 : forEach() 09. 배열 : 데이터 불러오기 : for of 10. 배열 : 데이터 불러오기 : for in 11. 배열 : 데이터 불러오기 : map() 12. 배열 : 데이터 불러오기 : 배열 펼침연산자 13. 배열 : 데이터 불러오기 : 배열 구조분해할당 14. 객체 : 데이터 불러오기 : 기본 15. 객체 : 데이터 불러오기 : O..

자바스크립트 오늘의 시험 리뷰 // 01. 1-50까지 for문으로 출력 { for(let i=1; i{ const str = "화살표 : 리턴함수 "; return str; } document.write(func()) } document.write(" ") } 정답 화살표 : 선언함수 화살표 : 익명함수 화살표 : 매개변수함수 화살표 : 리턴함수

자바스크립트 제어문 01. if문 if문은 가장 간단한 조건문이다. 주어진 조건이 참이면 true, 아니면 false를 출력한다. 1, true, "0","1", 0

함수 01/ 선언적 함수 선언함수는 자바스크립트 함수의 여백과 패딩을 관리하는 역할을 하는 함수를 말한다. 선언함수 안에서 margin과 padding의 값을 설정하여 함수의 여백과 패딩을 조절할 수 있다. { function func(){ document.write("실행되었습니다. "); } func(); } 02/ 익명 함수 익명함수란 이름이 없는 함수를 말한다. 익명함수는 함수 리터럴로 정의하며 주로 변수에 할당하여 사용하거나 함수의 인수로 전달하여 사용된다. 익명함수는 즉시 실행 함수로도 불리며 (IIFE, Immediately Invoked Function Expression) 함수 선언과 동시에 실행되는 특성을 가지고 있다. { const func = function(){ document.w..

1~25까지 출력되는 5*5 테이블 만들기 See the Pen Untitled by aimee418 (@aimee418) on CodePen.