june blog

지금까지 완성된 화면입니다. HTML 화면입니다. hello Game World 2023년 4월 24일 16시 50분 뮤직 듣기 아이 듣기 소리 듣기 사운 듣기 music player 노래 제목 노래 작가 0:00 3:55 뮤직 리스트 현재 맥을 사용하고 있으면, 화면크기는 1920 X 760 입니다. JS코드입니다. //전체 이미지와 오디오 객체에 저장 const allMusic = [ { name : "1. 저리가라", artist : "partick", img : "music_view01", audio : "music_audio01" },{ name : "2. 저리가라", artist : "partick", img : "music_view02", audio : "music_audio02" },{ n..

완성된 화면 입니다. HTML 화면입니다. hello Game World 2023년 4월 24일 16시 50분 뮤직 듣기 아이 듣기 소리 듣기 사운 듣기 music player 노래 제목 노래 작가 0:00 3:55 현재 맥을 사용하고 있으면, 화면크기는 1920 X 760 입니다. css 코드입니다. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap'); .music_inner { width: 350px; /* background: rgba(0,0,0,0.5); */ filter: blur(0.3); backdrop-filter: blur(20px); position: absolute; left: 50%..

완성된 화면 입니다. HTML 화면입니다. hello Game World 2023년 4월 24일 16시 50분 뮤직 듣기 아이 듣기 소리 듣기 사운 듣기 현재 맥을 사용하고 있으면, 화면크기는 1920 X 760 입니다. css 코드입니다. * { cursor: none; } body { width: 100%; height: 100vh; overflow: hidden; } .cursor { width: 20px; position: absolute; left: 0; top: 0; z-index: 1000; pointer-events: none; user-select: none; cursor: none; } #header { position: fixed; left: 0; top: 0; background-c..

at() ES2021에서 도입된 문자열 메서드 중 하나입니다. 이 메서드는 문자열에서 특정 인덱스의 문자를 반환합니다. charAt()과 비슷하지만, at()은 유니코드 코드 포인트의 인덱스를 사용한다는 점에서 다릅니다. 반환할 문자의 위치를 나타내는 0부터 시작하는 정수 값입니다. 만약 인덱스가 문자열 길이를 벗어난 경우, undefined를 반환합니다. 구문 at(index) 예시 const str = 'Hello, world!'; console.log(str.at(1)); // 출력 결과: "e" console.log(str.at(2)); // 출력 결과: "l" console.log(str.at(3)); // 출력 결과: "l" console.log(str.at(4)); // 출력 결과: "o" ..

01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < min) min = num[i]; } console.log(max, min); } 03. 다음의 결괏값을 작성하시오. { function func(begin, diff, n)..

완성된 화면 입니다. HTML 화면입니다. hello javascript,react,php 남은시간 잘보내서 행복하게 삽니다. 그럼이만 skrollr.js의 양식을 이용해서 작성해주었습니다. data-0은 스크롤이 0일때 의 효과를 주는 코드입니다. 이런식으로 각각 주어서 노다가 방식으로 css효과를 주었습니다. css 코드입니다. * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Cookie"; } body { /* height: 20000px; */ background-color: #E0E4DD; } .scrollTop { position: fixed; left: 10px; top: 10px; z-index: 1000; width: 4..

완성된 화면 입니다. 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 Section6 좋은 성과를 얻으려면 한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다 07 Section7 평생 살 것처럼 꿈을 꾸어라.그리..

문제입니다. 명언 데이터를 가져옵니다. 그중에서 1개의 명언만 가져와서 문서의 #result 영역안에 있는 quote에 명원 내용을 author 안에는 말한 사람을 넣으세요 그리구 10마다 바뀌게 출력하세요. 길라잡이 무작위 수를 사용해서 명언을 가져온 후 명언 부분과 말한 사람 이름을 나눠서 화면에 영역에 표시힙니다. 완성화면 입니다. HTML 코드입니다. HTML은 그냥 result 안에 감싸여진 div박스 3개가 있습니다. JS 코드입니다. const num = document.querySelector(".num"); const quote = document.querySelector(".quote"); const author = document.querySelector(".author"); cons..

문제입니다. 자바스크립트에서 자동으로 복권 번호를 생성해 주는 프로그램을 작성하려고 합니다. 번호는 중복되면 안되므로 셋을 이용할 것이고 숫자는 1부터 45까지 범위안에 있어야 하며, 6개의 무작위 수를 추출할 것입니다. 버튼을 클릭했을떄 모든 조건을 반영해서 6개의 숫자를 추출하는 소스를 작성해보세요. See the Pen Untitled by ture403 (@ture403) on CodePen. 완성화면 입니다. HTML 코드입니다. 로또 번호 생성기 클릭 HTML은 그냥 result 안에 감싸여진 div박스 3개가 있습니다. JS 코드입니다. const result = document.querySelector('#result'); const button = document.querySelector..

문제입니다. 명언 데이터를 가져옵니다. 그중에서 1개의 명언만 가져와서 문서의 #result 영역안에 있는 quote에 명원 내용을 author 안에는 말한 사람을 넣으세요 그리구 10마다 바뀌게 출력하세요. 길라잡이 무작위 수를 사용해서 명언을 가져온 후 명언 부분과 말한 사람 이름을 나눠서 화면에 영역에 표시힙니다. See the Pen 숙제 by ture403 (@ture403) on CodePen. 완성화면 입니다. HTML 코드입니다. HTML은 그냥 result 안에 감싸여진 div박스 3개가 있습니다. JS 코드입니다. const num = document.querySelector(".num"); const quote = document.querySelector(".quote"); const..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect07 슬라이드 이펙트 - 썸네일 슬라이드(버튼,썸네일) 1 2 3 4 5 6 7 prev next ture403@gmail.com css 코드입니다. /* silder_wrap */ .slider_wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%); width: 800px; height: 450px; box-shadow: 0 50px 100px rgba(0,0,0,0.4); } .slider_img { position: relative; width: 100%; height: 100%; overflow: hidden; } .sl..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect06 슬라이드 이펙트 - 이미지 슬라이드(버튼,닷메뉴) 1 2 3 4 5 6 css 코드입니다. /* silder_wrap */ .slider_wrap { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .slider_img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */ display: flex; flex..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect04 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 1 2 3 4 5 6 css 코드입니다. /* silder_wrap */ .slider_wrap { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .slider_img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */ width: 800px; height:..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect04 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 1 2 3 4 5 6 css 코드입니다. /* silder_wrap */ .slider_wrap { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .slider_img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */ display: flex; flex-w..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect03 슬라이드 이펙트 - 상하 움직이기 1 2 3 4 5 6 ture403@gmail.com css 코드입니다. /* silder_wrap */ .slider_wrap { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .slider_img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */ width: 800..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect02 슬라이드 이펙트 - 좌로 움직이기 1 2 3 4 5 6 css 코드입니다. /* silder_wrap */ .slider_wrap { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .slider_img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 500px; overflow: hidden; } .slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */ display: flex; flex-wrap: wr..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect01 슬라이드 이펙트 - 트랜지션 효과 1 2 3 4 5 6 ture403@gmail.com css 코드입니다. /* silder_wrap */ .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 { position: absolute; left: 0; top: 0; transition: all 0.3s; } .slider::..

완성된화면입니다. HTML 코드입니다. Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 제출하기 60분 00초 수험자 : 황상연 전체 문제수 : 0문항 남은 문제수 : 0문항 기능사 시험 도전하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 2008년 2회 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 정보처리기능사 2009년 1회 정보처리기..

완성된화면입니다. HTML 코드입니다. Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 제출하기 59분 10초 수험자 : 전체 문제수 : 60문항 남은 문제수 : 59문항 기능사 도전하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 2008년 2회 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 정보처리기능사 2009년 1회 정보처리기능사 20..

완성된 화면입니다. HTML 코드입니다. Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 수험자 : 홍길동 전체 문제수 : 60문항 남은 문제수 : 59문항 제출하기 59분 10초 주석친 부분은 스크립트로 불러와서 문제를 입력할 부분 입니다. JS 코드입니다. const cbt = document.querySelectorAll(".cbt"); const cbtQuiz = document.querySelector(".cbt__quiz"); const cbtOmr = document.querySelector(".cbt__omr"); const cbtSubmit = document.querySelector(".cbt__submit"); const ScoreEm..

01. 다음의 결괏값을 작성하시오. { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } 결과확인하기 0 02. 다음의 결괏값을 작성하시오. { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); } 결과확인하기 20,21 03. 결괏값을 작성하시오. { function func(){ let a = []; for(i=1; i

문자열 접근하기 원시유형과 객체 단순히 값만 가지고 있을 경우에는 원시유형이고 프로퍼티와 메서드를 가지고 있을때는 객체라고 설명했습니다. 문자열의 길이 length 프로퍼티 문자열의 길이를 찾을떄 프로퍼티 입니다. 기본형 : 문자열.length 예제 let str = "good morning!"; console.log(str.length); //14 문자열에서 문자 위치의 위치 활용하기 - charAt(), infexOf() 메서드 특정위치의 문자 접근하기 - charAt()메서드 문자열에서 특정 위치의 문자를 가져오려면 chatAt() 함수를 사용합니다. ESMA2015부터는 별도의 메서드 없이 배열처럼 대괄호([])를 사용할 수 있습니다. 위치는 인덱스로 표시되는데, 인덱스는 0부터 시작합니다. 기본..

퀴즈이펙트 완성 화면 입니다. html 코드입니다. Quiz객관식(슬라이드) 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 5 정답입니다. 틀렸습니다! 다음 문제 ??점 ture403@gmail.com dog_wrap 안에있는 p 와 span 태그는 총 갯수와 맞힌 갯수를 표출해 줄려고 만들었습니다. 기존 html이랑 별 다를게 없습니다. JS 코드입니다. const quizInfo = [ { infoType : "정보처리 기능사", infoTime : "2011년도 5회", infoNumber : "20110501", infoQuection : "JK 플립플롭(Flip Flop)에서 보수가 출력되기 위한 J, K의 입력 상태는?", infoChoice : ["J=1, K=0","J=0, ..

01. 결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } 결과확인하기 1,3,ture 02. 다음의 결괏값을 보고 빈칸을 채우시오. { function func(){ document.write("함수2가 실행되었습니다."); } function callback(str){ document.write("함수1가 실행되었습니다."); _______(); } callback(func); //함수1가 실행되었..

01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 결과확인하기 함수가실행되었습니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 결과확인하기 함수가실행되었습니다. 03. 결괏값을 작성하시오. { let sum = 0; for(var i=1; i num2) return num1 else return num2 } console.log(func(10, 23) + func(40, 50)) } 결과확인하기 73 오답노트 04. 다음의 결괏값을 보고 빈칸을 작성하시오. { const obj = { a: 100, b: 200, c: "..

break문 break문은 보통 반복문 내에서 사용되며, 실행 중인 반복문을 즉시 종료시키고 다음 코드 블록으로 이동합니다. 즉, 반복문이 조건에 따라 종료되기 전에도 break문을 만나면 그 즉시 반복문을 빠져나옵니다. 예를 들어, 아래 코드에서는 for 반복문을 실행하다가 i 값이 3이 되었을 때 break문을 만나면 for 반복문이 즉시 종료됩니다. for (var i = 0; i < 5; i++) { if (i === 3) { break; } console.log(i); } // 출력 결과: 0 1 2 return문 return문은 함수 내에서 사용되며, 함수 실행을 즉시 종료시키고 함수를 호출한 곳으로 값을 반환합니다. return문이 실행되면 그 이후의 코드는 실행되지 않습니다. 예를 들어, ..

01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 결과확인하기 x y x+y 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } 결과확인하기 1 2 3 4 5 6 07. 결괏값을 작성하시오. { for(let i=1; i { const str = "함수가 실행되었습니다."; return str; } console.log(func()); } 결과확인하기 함수가 실행 되었습니다. 11. 결괏값을 작성하시오. { let direct = 1; function gallery(num){ if(num){ if(num == 2) ..

01. 변수 : 데이터 불러오기 변수안에 저장된 데이터를 불러오는 방법입니다. { let x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 결과확인하기 100 200 "javascirpt" 02. 상수 : 데이터 불러오기 상수안에 저장된 데이터를 불러오는 방법입니다. { const x = 100, y =200, z = "javascript"; console.log(x, y, z); } 결과확인하기 100 200 "javascirpt" 03. 배열 : 데이터 불러오기 배열안에 저장된 숫자 및 문자를 불러오는 방법입니다. { const arr = [100, 200, "javasscript"]; console.log(arr[0], arr[1], arr[..

자바스크립트 동작 원리 자바스크립트는 싱글 쓰레드 언어입니다. 이 의미는 쉽게 풀어쓰면 한 번에 한 가지 일 밖에 처리할 수 없다는 것을 의미합니다. (어려운 용어로는 Call stack이 하나라고 표현 합니다) 현재 실행하고 있는 함수가 있는 경우에 다른 일을 할 수가 없고, 다른 일들이 블락되게 됩니다. 이렇게 되면 브라우저에서 오래 걸리는 작업이 실행될 경우, 웹 페이지의 UI는 멈춰버리고, 사용자는 어떠한 행동도 할 수 없게 됩니다. 예를 들어, 크롬에서 alert 창을 띄어 보면 alert 창을 닫기 전까지는 아무것도 할 수 없는 것과 마찬가지 입니다. 1분 이상이 시간이 소요되는 오래 걸리는 작업이 있다고 가정 해보겠습니다. 자바스크립트는 머리가 하나이기 때문에, 1분 동안 아무것도 안하고 기..