공부블로그

코딩테스트 문자열 겹쳐쓰기 문제 설명 출력 예시 뼈대 문자열 my_string과 그 사이를 끼워맞출 문자열 overwrite_string, my_string 문자열에 몇번째 글자부터 끼워맞춰야하는지 알려주는 정수 s 가 있습니다. my_string을 s번째 인덱스부터 overwrite_string문자열의 길이만큼 overwrite_string 문자열로 바꿔야합니다. let my_string = "He11oWor1d"; let overwrite_string = "lloWorl"; let s = 2; //"HelloWorld" 문제 예시가 이렇게 있으면 출력은 "HelloWorld" 이 되어야 합니다. my_string 의 문자열은 "He11oWor1d" 이므로 s번째 인덱스는 "He" 이후입니다. over..

패럴랙스 (parallax) 이펙트 ( 5 ) (scrollTop , offsetTop, innerHeight) VSCode Javascript parallax Effect01 패럴랙스 이펙트 : 리빌 효과 1 2 3 4 5 6 7 01 Section1 행운의 여신은 용기 있는 자를 좋아한다. 02 Section2 꿈이 없다면 아무 일도 일어나지 않는다. 03 Section3 지나간 일로 미래를 설계할 수는 없다. 04 Section4 준비하지 않은 자는 기회가 와도 소용없다. 05 Section5 노력에 집착하라. 숙명적인 노력을. 06 Section6 내일이란 오늘의 다른 이름일 뿐 07 Section7 불가능한 일을 해보는 것은 신나는 일이다. 08 Section8 당신이 포기할 때, 나는 시작한다..

패럴랙스 (parallax) 이펙트 ( 4 ) (gsap, scrollTop , offsetTop, innerHeight) VSCode Javascript parallax Effect01 패럴랙스 이펙트 : 텍스트 효과 1 2 3 4 5 6 7 01 Section1 행운의 여신은 용기 있는 자를 좋아한다. 02 Section2 꿈이 없다면 아무 일도 일어나지 않는다. 03 Section3 지나간 일로 미래를 설계할 수는 없다. 04 Section4 준비하지 않은 자는 기회가 와도 소용없다. 05 Section5 노력에 집착하라. 숙명적인 노력을. 06 Section6 내일이란 오늘의 다른 이름일 뿐 07 Section7 불가능한 일을 해보는 것은 신나는 일이다. 08 Section8 당신이 포기할 때, ..

패럴랙스 (parallax) 이펙트 ( 3 ) (scrollTop , offsetTop, innerHeight) VSCode Javascript parallax Effect01 패럴랙스 이펙트 : 나타나기 1 2 3 4 5 6 7 01 Section1 행운의 여신은 용기 있는 자를 좋아한다. 02 Section2 꿈이 없다면 아무 일도 일어나지 않는다. 03 Section3 지나간 일로 미래를 설계할 수는 없다. 04 Section4 준비하지 않은 자는 기회가 와도 소용없다. 05 Section5 노력에 집착하라. 숙명적인 노력을. 06 Section6 내일이란 오늘의 다른 이름일 뿐 07 Section7 불가능한 일을 해보는 것은 신나는 일이다. 08 Section8 당신이 포기할 때, 나는 시작한다...

패럴랙스 (parallax) 이펙트 ( 2 ) (제이쿼리, scrollTop , offsetTop) VSCode Javascript parallax Effect01 패럴랙스 이펙트 : 이질감 효과(3d효과) 1 2 3 4 5 6 7 01 Section1 행운의 여신은 용기 있는 자를 좋아한다. 02 Section2 꿈이 없다면 아무 일도 일어나지 않는다. 03 Section3 지나간 일로 미래를 설계할 수는 없다. 04 Section4 준비하지 않은 자는 기회가 와도 소용없다. 05 Section5 노력에 집착하라. 숙명적인 노력을. 06 Section6 내일이란 오늘의 다른 이름일 뿐 07 Section7 불가능한 일을 해보는 것은 신나는 일이다. 08 Section8 당신이 포기할 때, 나는 시작한다..

자바스크립트 마우스 이펙트 4 gsap을 이용하여 마우스위치에 따라 움직이는 화면을 만들었습니다. VSCode Javascript Mouse Effect04 마우스 이펙트 - 마우스 따라다니는 공, 마우스 위치에 따라 움직이는 화면 1 2 4 4 5 I never dreamed about success, I Workd for it 나는 결코 성공에 대해 꿈꾸지 않았다. 나를 꿈을 위해 행동했다. ehcjswo1@gmail.com 마우스를 움직일 때 이미지가 약간 커지도록 정의되어 있으며, 마우스 위치에 따라 이미지가 움직입니다. 또한 마우스 커서를 따라다니는 작은 흰색 동그라미가 있습니다. 이 페이지에는 GSAP 라이브러리도 사용되어 있습니다. script gsap 라이브러리를 로드합니다. 이 라이브러리..

포트폴리오 메인페이지 만들어보기 (GSAP, split) GSAP 라이브러리를 이용한 메인 페이지 일부분을 만들어봤습니다. VSCode KDH PORTFOLIO work about let's introduce frontend developer's all works of portfolio https://ehcjswo.github.io/web2023/ 헤더 영역에서는 position 속성으로 fixed를 사용하여 스크롤을 내려도 항상 상단에 위치하도록 설정하고 있습니다. 그리고 display 속성으로 flex를 설정하여 요소들을 수평 방향으로 배치하고 있습니다. 메인 영역에서는 display 속성으로 flex를 설정하여 요소들을 수평, 수직 방향으로 배치하고 있습니다. 그리고 .text__inner 클래스와..

게임 이펙트 만들기! ( 2 ) (jquery,gsap, 뮤직플레이어, 리스트) 뮤직 플레이어를 만들어 재생, 정지, 반복, 음악 리스트 버튼의 기능을 만들었습니다. VSCode GAME WORLD 현재 날짜, 시간출력 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 Music 노래 제목 노래 작가 이름 0:00 3:55 Music List 현재 OS정보 출력 이 코드에서는 jQuery, jQuery UI 및 GSAP 라이브러리를 사용하여 웹 페이지를 조작합니다. 페이지에는 네 개의 아이콘이 있으며, 각각을 드래그할 수 있습니다. 드래그하는 동안, 해당 폴더의 색상에 따라 header의 색상이 변경됩니다. 아이콘을 클릭하면 정보가 footer에 표시됩니다. 아이콘을 드래그한 후에는 시간이 표시됩니다. 뮤직 플..

정보처리기능사 대비 오답노트 01. 다음 중 OSI 7 계층의 네트워크 계층에 해당하는 프로토콜을 모두 고르시오. HTTP, TCP, UDP, FTP, ICMP, IP, ATM, TELNET 더보기 iICMP, IP 02. 다음이 설명하는 용어를 작성하시오. 이것은 네트워로 연결된 두 호스트 사이에서 연결할 수 있는지 점검하는 진단도구이다. 이 명령을 실행하면 ICMP Echo 반향 패킷을 이용하여 원격 IP 주소에 송신하고 ICMP 응답을 기다린다. 더보기 PING 03. 다음이 설명하는 용어를 작성하시오. Window 10의 pro 버전에서 지원하는 기능으로 128bit 키의 CBC 모드에서 AES 암호화 알고리즘을 이용하여 이동식 디스크와 시스템 드라이브 암호화를 지원한다. 더보기 비트로커 04. ..

자바스크립트 정보처리 대비 테스트 ( 9 ) 오답노트 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } 더보기 결과: 190 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); } 더보기 정답 : ..

게임 이펙트 만들기! (뮤직 플레이 기능) 작은 음악 재생기를 만들어 봤습니다! script const allMusic = [ { name : "1. Here it Comes", artist : "TrackTribe", img : "musicView01", audio : "music_audio01" },{ name : "2. Here it Comes", artist : "TrackTribe", img : "musicView02", audio : "music_audio02" },{ name : "3. Here it Comes", artist : "TrackTribe", img : "musicView03", audio : "music_audio03" },{ name : "4. Here it Comes", a..

게임 이펙트 만들기! (jquery, 드래그 이벤트) jquery를 이용한 드래그 이벤트 입니다. VSCode GAME WORLD 현재 날짜, 시간출력 asdf 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 현재 OS정보 출력 이 코드에서는 jQuery, jQuery UI 및 GSAP 라이브러리를 사용하여 웹 페이지를 조작합니다. 페이지에는 네 개의 아이콘이 있으며, 각각을 드래그할 수 있습니다. 드래그하는 동안, 해당 폴더의 색상에 따라 header의 색상이 변경됩니다. 아이콘을 클릭하면 정보가 footer에 표시됩니다. 아이콘을 드래그한 후에는 시간이 표시됩니다. script //폴더 드래그, 헤더색 바꾸기 $(".icon1").draggable({ //특정 범위 안에서 드래그로 못빠져나가게 하기 con..

자바스크립트 문자열 메서드에 대해 알아봅시다! at(), charAt(), charCodeAt(), charPointAt(), concat(), localeCompare(), normalize(), padEnd(), padStart(), repeat() 01. at( ) "문자열".at(검색값) 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다. 대소문자를 구별을 안합니다. { "javascript reference".at(0); //j "javascript reference".at(1); //a "javascript reference".at(2); //v "javascript reference".at(-1); //e "javascript reference".at..

자바스크립트 테스트 ( 7 ) 오답노트 정보처리기사, SQL, 정보처리기능사 오답노트입니다. 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) } 정답: 129 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,..

패럴랙스 Skrollr 라이브러리를 이용하여 사이트 만들기! 라이브러리는 사용자가 웹페이지를 스크롤할 때 요소들의 애니메이션을 제어하는 것을 가능하게 합니다. [ Skrollr 를 이용하여 만든 사이트 입니다. ] Skrollr란? Skrollr는 웹 개발에서 사용되는 JavaScript 라이브러리 중 하나입니다. 이 라이브러리는 사용자가 웹페이지를 스크롤할 때 요소들의 애니메이션을 제어하는 것을 가능하게 합니다. 스크롤에 따라 요소들의 위치, 크기, 회전, 투명도 등을 변경하거나 CSS 클래스를 추가/제거하여 요소의 스타일을 변경할 수 있습니다. 이를 통해 사용자에게 더욱 동적이고 인터랙티브한 경험을 제공할 수 있습니다. Skrollr는 다양한 브라우저와 기기에서 호환되며, 다양한 프레임워크와 라이브러..

패럴랙스 (parallax) 이펙트 ( 1 ) pageYOffset,scrollY,scrollTop 패럴랙스 이펙트를 이용해 사이트 스크롤에 효과를 줬습니다. VSCode Javascript parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 행운의 여신은 용기 있는 자를 좋아한다. 02 Section2 꿈이 없다면 아무 일도 일어나지 않는다. 03 Section3 지나간 일로 미래를 설계할 수는 없다. 04 Section4 준비하지 않은 자는 기회가 와도 소용없다. 05 Section5 노력에 집착하라. 숙명적인 노력을. 06 Section6 내일이란 오늘의 다른 이름일 뿐 07 S..

자바스크립트 문제 풀기 (JSON,fetch,location.reload()) 명언, 배경화면 랜덤으로 출력하기 명언과 배경화면을 랜덤으로 불러와 출력해보겠습니다. 명언과 배경화면을 랜덤으로 표시해 보세요. 무작위 수를 사용해 명언과 배경화면을 가져온 후 에 표시합니다. click HTML 에서 "say", "name", "button" 클래스를 가진 요소들을 JavaScript에서 선택합니다~ random 변수에 0부터 30까지의 랜덤한 정수를 저장합니다! fetch() 함수를 사용해서 "dummy01.json" 파일을 읽어옵니다. .then() 메소드를 사용해서 응답(Response) 데이터를 JSON 변환합니다. 변환된 JSON 객체에서는 "quotes" 배열에 명언 데이터가 저장되어 있습니다. 이..

자바스크립트 문제 풀기 (set(),펼침연산자,forEach) 로또 번호만들기 set() 함수를 이용하여 로또 번호 랜덤만들기를 해봤습니다. 문제 1 자바스크립트를 사용해서 자동으로 복권 번호를 생성해 주는 프로그램을 작성하세요. 번호는 중복되면 안되므로 Set() 함수를 이용 하고, 숫자는 1~45 범위안, 6개의 숫자를 무작위 추출 로또 번호 생성기 생성 document.querySelectorAll(".num")은 HTML 문서 내에 클래스 이름이 "num"인 모든 요소를 선택합니다. 이렇게 선택된 요소들은 num이라는 이름으로 배열 형태로 저장됩니다. document.querySelector("#wrap button")은 HTML 문서 내에 id가 "wrap"인 요소 내에서 button 요소를 선..

자바스크립트 문제 풀기 (JSON,fetch) 명언json에서 랜덤으로 배경화면과 명언 랜덤 출력하기 json 에서 데이터와 배경사진을 랜덤으로 불러와 출력해보겠습니다. 1번 문제 JSON 데이터를 가져온 후 콘솔창에 결과를 표시해 보세요. 가져온 데이터가 어떤 구조로 이루어져 있는지 살펴보는 것이 목표입니다. fetch("json/dummy01.json") .then((res)=> res.json()) .then((obj) => { console.log(obj); }); json 데이터를 콘솔창에 띄운 모습입니다. 2번 문제 JSON데이터에서 명언 1개를 가져와 내용과 말한 사람을 표시해 보세요. 무작위 수를 사용해 명언을 가져온 후 명언과 말한 사람을 나눠서 화면에 표시합니다. click HTML 에..

슬라이드 이펙트 사용해보기 ( 7 ) 버튼, 썸네일 만들기 슬라이드 이펙트를 버튼이나 썸네일을 누르면 이동하는 사이트를 만들어 보겠습니다. VSCode Javascript Slider Effect07 슬라이드 이펙트 : 이미지 슬라이스(버튼, 썸네일 만들기) 1 2 3 4 5 6 7 prev next ehcjswo1@gmail.com 이 코드는 자바스크립트를 사용하여 이미지 슬라이더를 만드는 코드입니다. 슬라이더는 주어진 영역 안에서 이미지를 보여주고, 다음/이전 버튼을 클릭하거나 썸네일을 클릭하여 이미지를 전환할 수 있습니다. .slider__wrap: 슬라이더 영역을 감싸는 가장 바깥 div입니다. position: absolute와 transform 속성을 사용하여 중앙 정렬을 합니다. .slide..

슬라이드 이펙트 사용해보기 ( 6 ) 버튼,닷 슬라이드 슬라이드 이펙트를 버튼이나 닷을 누르면 이동하는 사이트를 만들어 보겠습니다. VSCode Javascript Slider Effect03 슬라이드 이펙트 : 이미지 슬라이스(버튼, 닷 만들기) 1 2 3 4 5 6 7 prev next 화면 밑에 누를 수 있고 현재 화면을 표시하는 닷(dot) 을 만들었습니다. slider__dot 이라는 클래스를 만들었고 이미지 갯수만큼 닷 갯수를 만들기 위해 스크립트 안에서 dot을 만듭니다. function init(){ //이미지 갯수만큼 닷 메뉴 생성 slider.forEach(() =>dotIndex += "이미지"); sliderDot.innerHTML = dotIndex; //첫번째 닷 메뉴한테 활성화..

슬라이드 이펙트 사용해보기 ( 5 ) 하 슬라이드 연속성 GSAP, jQuery 슬라이드 이펙트를 이용해 사진이 하로 무한 슬라이드 하는 사이트를 만들어 보겠습니다. VSCode Javascript Slider Effect05 슬라이드 이펙트 : 하로 움직이지(연속적) 1 2 3 4 5 6 ehcjswo1@gmail.com 이미지 크기값이 바뀔 수 있으니 sliderHeight 라는 변수를 만들었습니다. slider[0].offsetHeight : slider[0]의 height값을 가져 옵니다. 슬라이드를 끊기지 않고 돌려야 하기 때문에 첫사진을 맨 뒷사진 다음에 나오게 하기 위해 sliderClone 변수를 만들었습니다. sliderInner.firstElementChild.cloneNode(true..

슬라이드 이펙트 사용해보기 ( 4 ) 좌 슬라이드 연속성 GSAP, jQuery 슬라이드 이펙트를 이용해 사진이 좌로 무한 슬라이드 하는 사이트를 만들어 보겠습니다. VSCode Javascript Slider Effect04 슬라이드 이펙트 : 좌로 움직이지(연속적) 1 2 3 4 5 6 ehcjswo1@gmail.com 이미지 크기값이 바뀔 수 있으니 sliderWidth 라는 변수를 만들었습니다. slider[0].offsetWidth : slider[0]의 width값을 가져 옵니다. 슬라이드를 끊기지 않고 돌려야 하기 때문에 첫사진을 맨 뒷사진 다음에 나오게 하기 위해 sliderClone 변수를 만들었습니다. sliderInner.firstElementChild.cloneNode(true): ..

슬라이드 이펙트 사용해보기 ( 3 ) 상하 슬라이드 슬라이드 이펙트를 이용해 사진이 상하로 슬라이드 하는 사이트를 만들어 보겠습니다. VSCode Javascript Slider Effect03 슬라이드 이펙트3 1 2 3 4 5 ehcjswo1@gmail.com 슬라이드 영역이 상하로 바뀌기 때문에 .slider__inner 클래스의 width값과 height 값이 달라졌습니다. 또 상하로 움직여야 하기 때문에 .slider__inner 클래스에 display를 없앴습니다. javascript setInterval() 함수는 일정한 간격으로 함수를 반복 실행하는 함수입니다. 이 코드에서는 sliderInterval 변수에 저장된 시간 간격으로 currentIndex와 sliderInner 요소를 조작하..

슬라이드 이펙트 사용해보기 ( 2 ) 좌우 슬라이드 슬라이드 이펙트를 이용해 사진이 좌우로 움직이는 사이트를 만들어 보겠습니다. SliderEffect02 Javascript Slider Effect02 슬라이드 이펙트2 1 2 3 4 5 ehcjswo1@gmail.com 코드 상단에서 GSAP( GreenSock Animation Platform) 라이브러리를 로드합니다. 이 라이브러리는 웹 애니메이션을 제작하는 데 사용되며, 매끄러운 애니메이션을 만들기 위해 사용됩니다. 그리고 setInterval() 함수를 사용하여 일정한 간격으로 이미지 슬라이더를 이동시키는 기능을 구현합니다. 이전 코드와 마찬가지로 currentIndex 변수는 현재 슬라이드의 인덱스를 저장하고, sliderCount 변수는 총..

슬라이드 이펙트 사용해보기 ( 1 ) 슬라이드 이펙트를 이용해 사진이 바뀌는 사이트를 만들어 보겠습니다. VSCode Javascript Slider Effect01 슬라이드 이펙트 1 2 3 4 5 ehcjswo1@gmail.com 이 코드는 겹쳐진 여러 사진을 순서대로 보여주는 코드입니다. setInterval 함수를 이용하여 처음 사진을 보여주고 시간이 지나면 처음사진을 opacity = "0"; 을 해주어 투명하게 만들어 안보이게 만든뒤, 그 다음 보여질 사진을 opacity = "1"; 처리 해줘서 다음 사진이 보이게 만들어 줍니다. .slider:nth-child(1) {z-index: 5;} .slider:nth-child(2) {z-index: 4;} .slider:nth-child(3) ..

퀴즈 이펙트 ( 7-3 ) cbt 퀴즈 이펙트 ( 7-3 ) json 연동과 cbt연동 완성입니다. [ json파일 연동 완료 ] 추가 VSCode 당신의 이름은 입니다. 당신은 웹디자인 기능사시험을 선택했습니다. 시작하기 모달창에 이름을 입력할 수 있는 input 창과, 어떤 기능사 종류를 골랐는지 나타내는 span을 추가했습니다. 추가 script const cbtScore = document.querySelector(".cbt__score"); const cbtName = document.querySelector(".cbt__name"); const cbtViewInput = document.querySelector(".cbt__view input"); const cbtViewSubject = do..

퀴즈 이펙트 ( 7 ) cbt 퀴즈 이펙트 ( 7-2 ) cbt형식으로 만들었습니다. [ 처음 화면에 시작하기, 타이머, 문제수 추가 ] 추가 VSCode 기능사 시험 정보처리기능사 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회 정보처리기능사 2009년 5회 정보처리기능사 2010년 2회 정보처리기능사 2010년 5..

퀴즈 이펙트 ( 7 ) cbt 퀴즈 이펙트 ( 7 ) cbt형식으로 만들었습니다. [ 학교 다닐때 보던 omr 입니다! ] VSCode Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 다음 빈칸을 채우시오. 객체지향 언어는 _____이다. 클래스 메소드 상속 메시지 객체지향 언어는 이다. 객체지향 언어 asd 제출하기 이 코드는 객관식 문제를 보여주는 HTML 코드입니다. header 요소는 웹페이지 상단에 위치하는 영역입니다. 여기에는 제목(h1)과 문제 번호(li)로 구성된 ul 리스트가 포함됩니다. main 요소는 웹페이지의 주요 콘텐츠를 담는 영역입니다. 여기에는 문제를 담고 있는 div 요소들이 포함됩니다. 각 문제는 cbt 클래스를 가지고 있으..

자바스크립트 테스트 ( 6 ) 틀린문제 오답노트 해보겠습니다.... 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