코딩하는 거북이

패럴랙스 이펙트로 가로로 스크롤 하듯 만들기 패럴랙스 이펙트로 스크롤할 때 가로로 넘어가는 것처럼 보이게 만들어 보겠습니다. HTML 작성하기 Javascript Parallax Effect08 패럴랙스 이펙트 : 가로 효과 1 2 3 4 5 6 7 8 9 10 01 02 03 04 05 06 07 08 09 scrollTop : 0px Javascript 작성하기 Javascript 정리해보기 scroll 함수 window.pageYoffset을 사용해 현재 보이는 화면의 Y값(스크롤값)을 구합니다. 패럴랙스 내용이 담겨있는 parallaxs__wrap의 선택자를 만들어 넓이를 구해 parallaxWidth변수에 저장합니다. 문서 body의 height를 pallaxWidth값과 동일하게 만듭니다. g..

패럴랙스 이펙트로 각각의 효과 주기 각각의 스타일 애니메이션을 만들어 메세지에 효과를 줘보겠습니다. HTML 살펴보기 Javascript Parallax Effect06 패럴랙스 이펙트 : 텍스트 효과 1 2 3 4 5 6 7 8 9 10 01 Section1 과정도 중요하지만, 결과도 꽤나 중요하다. 02 Section2 후회하기 싫으면 그렇게 살지 말고, 그렇게 살거면 후회하지마라. 03 Section3 인생은 곱셈이다. 어떤 찬스가 와도 내가 제로면 아무런 의미가 없다. 04 Section4 꿈에 눈이 멀어라 시시한 현실 따위 보이지 않게. 05 Section5 네가 모든 사람을 사랑할 수 없듯이 모든 사람이 널 사랑할 수도 없다. 06 Section6 내안에 빛이 있으면 스스로 빛나는 법이다. 0..

글의 내용에 따라 적을 수 있는 공간을 추가하기 게시글을 적을 때 적을 내용이 추가됨에 따라 적을 수 있는 공간을 추가하는 버튼을 만들어 보도록 하겠습니다. Javascript 작성하기 Javascript 정리해보기 내용을 추가하고, 삭제하는 버튼에 대한 선택자를 만들어 주었습니다. fieldset이 추가될 공간인 contents__addbox에 대한 선택자를 만들어 주었습니다. 게시글을 적을 수 있는 fieldset은 5개로 제한을 두기위해 fieldsetCount라는 변수를 만들어 초기값으로 1을 저장해주었습니다. contentsPlus에 대한 클릭함수 우선 클릭하면 fieldsetCount에 ++연산을 먼저 해줍니다. (fieldset 개수) fieldsetCount가 1보다 크다면 contents..

비동기 방식( ajax )로 가입페이지 만들기 ajax를 사용하여 비동기 방식 가입페이지를 만들어 보겠습니다. 중복검사 중복검사 알아보기 ( jQuery ) isEmailCheck와 isNickCheck 변수에 각각 false의 값을 저장합니다. (초기값) emailChecking()함수 youEmail 변수에 html문서에 있는 #youEmail의 value값을 가져와 저장합니다. youEmail이 null 혹은 공백이면 #youEmailComment에 이메일 작성요구 텍스트를 출력합니다. 공백이 아니라면 ajax를 사용해 POST방식으로 joinCheck.php로 아래의 데이터를 넘깁니다. "youEmail"에는 youEmail을 "type"에는 "isEmailCheck"의 데이터를 넘깁니다. 데이터..

비동기 방식(ajax)으로 가입페이지 만들기 ajax를 사용하여 비동기 방식으로 가입페이지 내에서 유효성 검사를 해보겠습니다. Javascript 작성( jQuery ) [이메일 중복확인] let isEmailCheck = false; function emailChecking(){ let youEmail = $("#youEmail").val(); if(youEmail == null || youEmail == ''){ $("#youEmail").val().text("* 이메일을 입력해주세요.") } else { $.ajax({ type : "POST", url : "joinCheck.php", data : {"youEmail" : youEmail, "type" : isEmailCheck}, dataType..

마우스 오버했을 때 메뉴탭이 각각 나오도록 만들기 상단 메뉴에 마우스 오버했을 때 메뉴탭이 각각 나오도록, 혹은 한번에 나오도록 만들어 보겠습니다. HTML (메뉴바만) 작성하기 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 메뉴2 서브메뉴2-1 서브메뉴2-2 서브메뉴2-3 서브메뉴2-4 메뉴3 서브메뉴3-1 서브메뉴3-2 서브메뉴3-3 서브메뉴3-4 메뉴4 서브메뉴4-1 서브메뉴4-2 서브메뉴4-3 서브메뉴4-4 HTML 정리해보기 각각의 메뉴와 서브메뉴가 하나의 속 4개의 안에 들어있는 구조입니다. 각각의 서브메뉴는 한개의 과 4개의 로 구성했습니다. CSS 작성하기 .nav { width: 70%; background-color: #85d47e; padding: 30px 40px;..

정보처리 연습문제 풀어보기 let num = [56, 4, 3, 65, 78]; let temp; for(let i=0; i

Game Effect 페이지 만들기 (2) 이번에는 음악 플레이어 기능을 만들어 보겠습니다. HTML 작성하기 Hoong Player🎧 노래 제목 가수 이름 0:00 3:55 HTML 정리해보기 html 문서에 추가된 내용은 뮤직 플레이어 부분입니다. 버튼은 각각의 span태그로 영역을 잡고 i태그를 사용해 배경이미지를 넣었습니다. 주석처리 부분은 스크립트로 처리하기 위한 영역입니다. Javascript 작성하기 const allMusic = [ { name : "I Found Her", artist : "Faime", img : "music__view01", audio : "music_audio01" },{ name : "Let", artist : "Vietra", img : "music__view02..

Game Effect 페이지 만들기 여러가지 게임 효과들이 있는 페이지를 만들어보겠습니다. 이번 포스팅에는 메인 화면을 만들어보도록 하겠습니다. HTML 작성하기 HOONG GAME ZONE 현재 시간이 나옵니다 ! 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 운영체제와 화면크기가 나옵니다 ! HTML 정리해보기 html문서상의 구조는 아주 간단합니다. 헤더, 메인, 푸터 세 부분으로 구성되어있고 헤더에는 제목과 시간표시, 푸터에는 운영체제 정보와 화면크기를 나타냈습니다. CSS 작성하기 * { cursor: none; } body { width: 100%; height: 100vh; overflow: hidden; color: #fff; } .cursor { width: 15px; position: ab..

문자열 메서드 알아보기 문자열 메서드에 대해서 몇 가지 더 알아보도록 하겠습니다. at() at() 메서드는 문자열에서 지정된 인덱스에 해당하는 요소를 반환합니다. at() 메서드는 배열과 문자열에서 모두 사용 가능합니다. "문자열".at(숫자) console.log("javascript reference".at("0"));//j console.log("javascript reference".at("1"));//a console.log("javascript reference".at("2"));//v console.log("javascript reference".at("11"));//r console.log("javascript reference".at("12"));//e console.log("javas..

플러그인을 사용하여 패럴랙스 효과 만들기 이번에는 skroll.js를 사용하여 패럴랙스 효과를 준 페이지를 만들어 보도록 하겠습니다. HTML 작성하기 HOONG Gooo Class Fighting Together HTML 정리해보기 스크립트 부분에서 skroll.js 플러그인을 사용하기 때문에 html문서 내의 각각의 요소들의 속성이 변해야 하는 데이터 값과 속성을 모두 적어주었습니다. 기본적으로 속성 변화가 있는 시작점의 데이터는 각각의 요소가 처음에 있어야 하는 모습 그대로의 속성을 가지고 있어야합니다. 데이터의 흐름에 따라 속성에 변화를 주기 위해서는 모든 데이터에 해당하는 속성을 같이 적어주어야 합니다. (변화의 유무과 상관없이) CSS 작성하기 * { margin: 0; padding: 0; ..

각 섹션의 좌표와 스크롤 좌표를 이용한 패럴랙스 이펙트 만들기 스크롤의 좌표와 각 컨텐츠들의 좌표를 이용하여 패럴랙스 효과를 만들어 보도록 하겠습니다. HTML 작성하기 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 네가 모든 사람을 사랑할 수 없듯이 ..

명언이 넘어감과 동시에 배경 이미지도 같이 바뀌도록 스크립트를 추가해보겠습니다. Javscript 추가하기 const quotesData = () => { fetch("json/quest415.json") .then(quotes => quotes.json()) .then(saying => { // console.log(saying); quoteAll = saying.quotes.map((el, index) => { const formattedSaying = { id : el.id, quote : el.quote, author : el.author } // console.log(formattedSaying) return formattedSaying; }); // 명언 출력 실행문 updateQuote();..

무작위 숫자 여섯개를 가져오는 로또번호 추첨기 만들기 버튼을 누르면 1부터 45까지의 무작위 숫자를 가져오는 스크립트를 만들어보도록 하겠습니다. Javascript 작성하기 바로 스크립트로 넘어 가겠습니다 ! const Button = document.querySelector(".btn"); const noticeNum = document.querySelector(".number"); const lottoNum = new Set(); const drawLot = () => { for(i=1; i

Json파일을 불러와 계속 넘어가는 명언 만들기 시간이 지남에 따라 계속 명언이 바뀌는 효과를 만들어보도록 하겠습니다. HTML 작성하기 HTML 정리해보기 html문서 상의 구조는 배경이미지를 넣어 전부를 감쌀 wrap부분과 명언이 들어갈 상자인 saying__box 부분, 명언 번호, 문구, 저자를 포함하는 saying 부분으로 만들었습니다. CSS 작성하기 * { margin: 0; padding: 0; } body { background-color: #000007 } #wrap { width: 80%; height: 100vh; margin: 0 auto; background-image: url("img/city.jpg"); background-position: center; background-..

썸네일 이미지와 버튼이 있는 슬라이드 효과 만들기 이번에는 버튼과 썸네일 이미지가 있는 슬라이드 효과를 만들어보도록 하겠습니다. HTML 작성하기 prev next 변경된 HTML 알아보기 이번에는 스크립트를 통해 이미지를 넣어줄 것이기 때문에 slider__image 부분을 비워놨습니다. 썸네일이 들어갈 slider__thumb 부분에도 같은 이미지를 스크립트를 통해 넣어주기 위해 비워놨습니다. CSS 작성하기 /* slider__wrap */ .slider__wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 800px; height: 450px; box-shadow: 0 50px 100px r..

버튼을 눌렀을 때 넘어가는 슬라이드 효과 만들기 이번에는 버튼을 눌렀을 때 이미지가 좌 혹은 우로 넘어가도록 만들어보겠습니다. HTML 작성하기 prev next 추가된 html 알아보기 이미지의 기본틀을 동일합니다. 이미지의 좌 우에 버튼을 만들기 위해 slider__btn의 부분을 만들어 주었습니다. 페이지의 하단에 dot메뉴를 만들기 위해 slider__dot의 부분을 만들어 주고, 스크립트를 통해 이미지의 개수와 동일하게 dot을 만들어 줄 것이기 때문에 html의 구조상에는 아무것도 넣지 않았습니다. CSS 작성하기 .slider__btn a { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px..

연속적으로 위로 넘어가는 슬라이드 효과 만들기 이번에는 사진이 연속적으로 끝 없이 위로 넘어가는 슬라이드 효과를 만들어 보도록 하겠습니다. HTML 작성하기 HTML 알아보기 translateX를 사용할 때와 다르지 않습니다. CSS 작성하기 변경된 css translateX를 이용하여 좌로 이동할 때는 사진이 가로 정렬되어야 하기 때문에 slider__inner에 display : flex의 속성을 주었지만 지금은 사진을 가로 정렬할 필요가 없기 때문에 slider__inner의 속성을 없애주었습니다. 나머지는 동일합니다. Javscript 작성하기 ( javascript 사용 ) javscript 정리해보기 sliderHeight라는 변수를 하나 더 만들어 clientHeight를 사용하여 각 이미지..

연속적으로 좌로 넘어가는 슬라이드 효과 만들기 이번에는 사진이 연속적으로 끝 없이 좌로 넘어가는 슬라이드 효과를 만들어 보도록 하겠습니다. HTML 작성하기 HTML 정리해보기 html문서 상의 구조는 이전에 만들었던 translateX를 사용하여 좌로 보내는 슬라이드 페이지와 동일합니다. CSS 작성하기 변경된 css 기존 스타일과 동일합니다. Javascript 작성하기 ( javascript 사용 ) javascript 정리해보기 sliderWidth와 sliderClone이라는 변수를 추가했습니다. sliderWidth = clientWidth를 사용하여 [0] 번째 slider(순서 무관)의 width 값을 저장합니다. sliderClone = cloneNode(true)를 사용하여 slider..

TranslateY의 값으로 슬라이드 효과 만들기 이번에는 translateY의 값을 조절하여 이미지가 좌로 넘어가는 효과를 만들어보겠습니다. HTML 작성하기 변경된 HTML 알아보기 X축 이동에서 Y축 이동으로만 변한 것이기 때문에 html문서 상의 구조는 변하지 않습니다. CSS 작성하기 /* slider__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; } .slid..

TranslateX의 값으로 슬라이드 효과 만들기 이번에는 translateX의 값을 조절하여 이미지가 좌로 넘어가는 효과를 만들어보겠습니다. HTML 작성하기 변경된 HTML 알아보기 main의 구조만 살짝 바뀌었는데, 각각의 이미지 전체를 감싸고 있는 slider__inner를 추가했습니다. CSS 작성하기 /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidde..

Transition 으로 슬라이드 효과 주기 이미지의 opacity를 조절하여 이미지 슬라이드 효과를 주도록 하겠습니다. HTML 작성하기 Javascript Slider Effect01 슬라이드 이펙트 1 2 3 4 5 6 gnsrdbi@naver.com HTML 정리해보기 이 전에 작성했던 마우스 효과의 기본적인 틀을 가져와 main의 구조만 변경하였습니다. main에는 슬라이드 효과를 받을 이미지를 다섯장 넣어주었습니다. CSS 작성하기 @import url('https://webfontworld.github.io/NexonFootballGothic/NexonFootballGothic.css'); @import url('https://webfontworld.github.io/NexonLv1Gothi..

CBT형식의 시험지 만들기 추가된 HTML 추가된 HTML알아보기 시험 문제를 다 풀고 제출하기 버튼을 눌렀을 때 사용자의 점수를 나타내줄 div박스를 하나 추가하였습니다. 내용추가 1번에서 만들었던 select 박스에 onchange="changeSelet(this)"를 추가하여 select박스의 내용이 변할 때 함수를 추가하였습니다. 추가된 javascript const nameInput = document.querySelector(".cbt__view input"); const cbtResult = document.querySelector(".cbt__result"); let great = 0; const startQuiz = () => { cbtStart.classList.add("hide"); ..

CBT형식의 시험지 만들기 추가된 HTML 시험 유형 선택하기 정보처리기능사 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회 정보처리기능사 2011년 1회 정보처리기능사 2011년 2회 정보처리기능사 2011년 4회 정보처리기능..

CBT형식의 시험지 만들기 HTML 작성하기 Quiz 객관식 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 59분 10초 제출하기 수험자 : 전체 문항 : 문항 남은 문항 : 문항 HTML 정리해보기 기존에 사용하던 강아지(dog__wrap부분)와 다른 방식인 CBT형식으로 만들기위해 html의 구조를 다르게 변경했습니다. 구조는 크게 좌, 우를 나누어 좌측에는 문제를 나열하고 우측에는 omr형식의 답지를 고정하여 두는 구조입니다. 문제가 많아 script로 문제와 omr카드를 출력하기 때문에 문제가 들어갈 cbt__quiz부분과 omr형식의 답지가 들어갈 cbt__omr부분을 만들어 놓기만 했습니다. CSS 작성하기 .quiz__wrap__cbt { padding: 0 2..

마우스 오버 했을 때 이미지 바꿔주기 스크립트를 통해 이미지에 마우스를 올렸을 때, 이미지가 바뀌는 효과를 주도록 하겠습니다. HTML 작성하기 마우스 오버하면 이미지 바꾸기 HTML 정리해보기 html문서에는 간단하게 주제와 이미지 하나만을 넣어주었습니다. 밝은 한강의 사진을 넣어주었고, 스크립트를 통해 마우스 오버했을 때, 어두운 사진으로 바뀌면서 밤이 되는 느낌을 주도록 하겠습니다. Javascript 작성하기 const Img = document.querySelector("#container img"); Img.addEventListener("mouseover", () => { Img.src = "practice/img/Han-river2.png" }); Img.addEventListener("m..

문자열 property, 문자열 method 문자열의 길이 문자열.length 위 형식으로 사용하면 문자열의 길이를 나타낼 수 있습니다. 문자열의 길이에는 공백도 포함됩니다. const str = "Good morning!"; console.log(str.length)// 14 const str1 = "안녕하세요"; console.log(str1.length)// 5 문자열에서 문자의 위치 활용하기 문자열에서 특정 위치의 문자 문자열.charAt(위치) 위 형식으로 사용하면 문자열에서 특정 위치의 문자열을 가져올 수 있습니다. 인덱스로 표시하므로 0부터 시작합니다. const str = "Good morning!" console.log(str.charAt(3))// d console.log(str.[5]..

여러개의 객관식문제 출력하기 (슬라이드 형식) HTML 작성하기 Quiz 객관식(여러문제) 확인하기 / 슬라이드 유형 1 2 3 4 5 6 정답 ! 오답 ! 다음 문제보기 gnsrdbi@naver.com HTML 정리해보기 기존 4번의 객관식 페이지와 동일하지만 이번 페이지에서는 각각의 Tag를 만들어 script를 통해 html문서에 넣어 줄 것이라 문제의 보기 부분을 지웠습니다. 그 외는 4번 페이지의 html과 동일합니다. 새로 추가된 CSS .quiz__main h4 { text-align: center; padding-top: 5px; font-family: DungGeunMo; } CSS 정리해보기 남은 문제의 개수를 알려주는 h4태그를 하나 넣어주었기 때문에 h4태그의 속성을 만들어 주었습니..

여러개의 객관식문제 출력하기 HTML 문서작성 Quiz 객관식(여러문제) 확인하기 유형 1 2 3 4 5 gnsrdbi@naver.com HTML 정리해보기 이번 객관식 퀴즈 유형은 문제의 갯수만큼 계속 출력시키도록 script를 작성하기 때문에 기존의 html문서에서는 헤더와 푸터, quiz__wrap부분만 남기고 전부 지웠습니다. 새로 추가된 CSS .quiz__check { position: fixed; right: 40px; bottom: 70px; width: 100px; height: 100px; line-height: 95px; border-radius: 45%; text-align: center; background-color: rgb(247, 157, 157); font-family: H..

Javascript 연습문제 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 true 02. 다음의 결괏값을 보고 빈칸을 채우시오. { function func(){ document.write("함수2가 실행되었습니다."); } function callback(str){ document.write("함수1가 실행되었습니다."); _______(); } callback(fu..