한번 해보자 코딩

자바스크립트 패럴랙스 가로/세로효과 💜 parallax Effect09 코드 보기 / 완성 화면 Javascript Parallax Effect09 패럴럭스 이펙트 : 가로/세로 효과 1 2 3 4 5 6 7 8 9 01 02 03 04-1 04-2 04-3 05 06 07 08 09 scrollTop : 0ps #header { position: fixed; z-index: 10000; } .parallaxs__wrap { } .parallaxs__item { width: 100vw; height: 100vh; position: relative; } #section1 {background-color: #111; z-index: 7000;} #section2 {background-color: #222; ..

자바스크립트 패럴랙스 가로 효과 💜 parallax Effect08 코드 보기 / 완성 화면 Javascript Parallax Effect08 패럴럭스 이펙트 : 가로 효과 1 2 3 4 5 6 7 8 9 01 02 03 04 05 06 07 08 09 scrollTop : 0ps #header { position: fixed; z-index: 10000; } .parallaxs__wrap { position: fixed; left: 0; top: 0; display: flex; } .parallaxs__item { width: 100vw; height: 100vh; position: relative; } #section1 {background-color: #111;} #section2 {backgro..

자바스크립트 패럴랙스 리빌 효과 💜 parallax Effect07 코드 보기 / 완성 화면 01 Section1 네가 믿을 수 있다면, 넌 이미 반 이긴 것이다. 02 Section2 성공의 비결은 시작하는 것이다. 03 Section3 불가능은 무엇인가? 단지 미래의 가능성을 아직 발견하지 못한 것일 뿐이다. 04 Section4 계획이 없다면 실패를 계획한 것이다. 05 Section5 내일의 나를 더 나은 사람으로 만들기 위해 오늘 노력하라. 06 Section6 기회는 문을 두드리지 않는다. 우리가 문을 열어야 한다. 07 Section7 성공은 무엇보다 인내와 노력을 요구한다. 08 Section8 어려움은 성장의 씨앗이다. 09 Section9 가장 큰 모험은, 우리가 꿈꾸는 세상을 만들기 ..

자바스크립트 패럴랙스 효과 03_숨김메뉴, 탑버튼 💜 parallax Effect03 코드 보기 / 완성 화면 이번 패럴랙스 효과는 스크롤했을 때 사라지는 메뉴바와 아래로 다 스크롤 했을 때 나타나는 탑버튼입니다. HTML Top 클릭하면 화면 상단의 header부분으로 넘어갈 수 있게 Top버튼을 만들어줍니다. script window.addEventListener("scroll", () => { let scrollTop = window.pageXOffset || window.scrollY; if (scrollTop > document.body.scrollHeight - 1000) { document.querySelector(".parallax__top").classList.add("show"); } ..

자바스크립트 패럴랙스 이펙트 02_사이드메뉴 💜 parallax Effect02 코드 보기 / 완성 화면 HTML Javascript Parallax Effect02 패럴럭스 이펙트 : 사이드 메뉴 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 기회는 문을 두드리지 않는다. 우리가 문을..

자바스크립트 콜백함수 종류 콜백함수 -callback function 다른 함수에 전달되어 그 함수가 어떤 이벤트가 발생했을 때 실행되는 함수 즉, 콜백함수는 다른 함수의 인자로 전달되어 호출된다. { function func(){ document.write("2. 함수 실행"); } function callback(str){ document.write("1. 함수 실행");//이게 먼저 실행 str(); } callback(func); } 결과값은 1. 함수 실행 2. 함수 실행 func()는 2. 함수 실행을 출력하고, callback은 1. 함수실행을 출력합니다. 그 이후 인자로 전달받은 함수를 호출합니다. callback(func)를 호출해 callback함수는 func 함수를 인자로 받아 호출합..

자바스크립트 게임 이펙트_음악재생(반복, 재생목록 등) 저번에 했던 음악 재생에 이어 오늘은 음악재생 목록 불러오기와 반복재생 등의 작업을 해보겠습니다 전의 작업내용이 궁금하다면 아래 링크로 확인해주세요~! 코드 보기 💜 게임 이펙트 코드 보기 / 완성 화면 HTML music 노래 제목 작가 이름 0:00 3:55 뮤직 리스트 주석된 곳의 내용을 스크립트로 작업해줍니다. 선택자 const musicRepeat = musicWrap.querySelector("#control-repeat"); const musicListBtn = musicWrap.querySelector("#control-list") const musicList = musicWrap.querySelector(".music__list");..

포트폴리오 메인페이지 만들어보기(gsap) 💜 포트폴리오 메인페이지 코드 보기 / 완성 화면 폰트CSS @font-face { font-family: 'PPNeueWorld-CondensedRegular'; font-weight: normal; font-style: normal; src: url('fonts/PPNeueWorld-CondensedRegular.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'PPNeueWorld-ExtendedThin'; font-weight: normal; font-style: normal; src: url('fonts/PPNeueWorld-ExtendedThin.woff2') forma..

자바스크립트 게임 이펙트 _음악 재생 💜 게임 이펙트 코드 보기 / 완성 화면 HTML music 노래 제목 작가 이름 0:00 3:55 뮤직 플레이어 구역을 추가해줬습니다. js const allMusic = [ { name: "1. Who Do You Think I Think You Are", artist: "Mini Vandals", img: "music_view01", audio: "music_audio01" }, { name: "2. The Monuments and Tunnels in Goa and Hampi", artist: "Bail Bonds", img: "music_view02", audio: "music_audio02" }, { name: "3. We Cruisin'", artist: ..

게임 이펙트 01 💜 게임 이펙트 코드 보기 / 완성 화면 HTML JIN GAME WORLD 2023년 4월 24일 09시 30분 15초 뮤직듣기 뮤직듣기 뮤직듣기 뮤직듣기 현재 맥을 사용하고 있으면, 화면 크기는 1920 X 760입니다. 헤더에 사이트 제목과 시간을 설정해줄거고, 메인에 아이콘을 설정해줄 구간을 정해줍니다. 푸터엔 OS크기를 구현해줄 위치를 잡아줍니다. script jQuery, jQuery UI, 그리고 GSAP 라이브러리를 사용해 컨테이너 내에 있는 아이콘을 드래그 가능하게 만드는 코드를 가져옵니다. jQuery 는 javascript를 기반으로 한 오픈 소스의 빠르고 가볍고 기능적으로 강력한 javascript 라이브러리 입니다. 웹 개발에서 HTML문서의 조작, 이벤트 처리,..

자바스크립트 문자열 객체 정리 자바스크립트 문자열 객체 at() charAt() charCodeAt() codePointAt() concat() localeCompare() normalize() padEnd() padStart() repeat() at() "문자열".at(위치값); - 주어진 위치값에 해당하는 문자를 반환 - 위치값은 0부터 시작, 음수값도 허용 - 문자열의 범위를 벗어나면 undefined를 반환 "javascript refernce".at(0); //j "javascript refernce".at(1); //a "javascript refernce".at(-1); //e "javascript refernce".at(-7); //e "javascript refernce".at(-7); ..

자바스크립트 시험 오답 01.(X) { 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 🐾 풀이 10보다 작은 동안 반복하는 while루프를 실행합니다. 반복문이 한 번 실행될때 i의 값이 1씩 증가해 1부터 10까지의 값을 가지게 됩니다. i가 3의 배수일때마다 sum에서 i를 빼고 i를 3으로 나눈 나머지가 1일 경우 sum에 i를 더해줍니다. i를 3으로 나눈 나머지가 2일 경우 sum에 i를 곱해줍니다. 반복문이 종료된 후 최종적으로 sum의 값을 출력합니다. 02. { l..

자바스크립트 패럴랙스 이펙트 _애니메이션 💜 패럴랙스 이펙트 코드 보기 / 완성 화면 scrollTop scrollTop값을 먼저 구해줘야 합니다. script 스크롤에 따라 요소를 애니메이션 하는 라이브러리 skrollr을 불러오는 스크립트 태그를 사용해 작업해줍니다. let a = skrollr.init() Skroll라이브러리를 초기화 하여 s 라는 변수에 할당합니다. window.addEventListener("scroll", () => {}) 윈도우의 스크롤 이벤트를 감지하고 콜백 함수를 실행합니다. let scrollY scrollTop 변수에 스크롤의 상단위치를 저장 window.pageYOffset은 IE에서 사용되는 스크롤 위치 속성이고, window.scrollY는 다른 브라우저에서 사..

자바스크립트 패럴랙스 이펙트 01_메뉴효과 💜 parallax Effect01 코드 보기 / 완성 화면 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 내일의 나를 더 나은 사람으로 만들기 위해 오늘 노력하라. 06 Section6 기회는 문을 두드리지 않는다. 우리가 문을 열..

Unsplash 이미지 랜덤으로 사진 불러오기 모던자바스크립트 마무리 문제 1 명언랜덤표시 모던자바스크립트 마무리 문제 1 명언랜덤표시 오늘은 모던자바스크립트 책의 p.520 마무리문제를 만들어보도록 하겠습니다. 명언 js파일을 불러와 화면에 보여주게 합니다. 추가적으로 10초에 mi-1119.tistory.com 바로 전에 했던 모던 자바스크립트 마무리 문제였던 명언 json파일 가져와 랜덤으로 보여주기에 추가적으로 unsplash의 이미지를 랜덤으로 불러와 명언과 같이 배경 이미지도 10초마다 바뀌게 설정해줬습니다. 💜 명언 코드 보기 / 완성 화면 HTML HTML은 이렇게 마무리해줬습니다. script 저번에 했던 명언과 작가 이름을 가져오는 코드에 Unsplash 에서 이미지를 가져와 페이지의 ..

모던자바스크립트 마무리 문제 2 로또번호뽑기 자바스크립트를 사용해 자동으로 복권 번호를 생성해주는 프로그램 작성하기 - 중복되지 않게 set을 사용 - 1~45까지의 범위 - 6개를 무작위로 💜 로또번호 뽑기 코드 보기 / 완성 화면 HTML 로또 번호를 받아가세요! 클릭! 👆 클릭하면 번호가 나옵니다. 클릭버튼과 번호가 나올 구역을 정해줍니다. style btn을 hover 했을때 버튼의 크기가 약간 커지도록 transform:scale 속성을 사용했습니다. script Btn.addEventListener("click", () => {} ); 요소에 클릭 이벤트가 발생하면 화살표 함수를 실행 numvers 변수에 Set 객체를 할당하고 빈 집합으로 초기화 While(numbers.size < 6) 집..

모던자바스크립트 마무리 문제 1 명언랜덤표시 오늘은 모던자바스크립트 책의 p.520 마무리문제를 만들어보도록 하겠습니다. 명언 js파일을 불러와 화면에 보여주게 합니다. 추가적으로 10초에 한번씩 명언이 바뀌게 해주겠습니다. - fetch와 then, catch를 사용해 URL에서 자료 가져오기 - 가져온 데이터에 어떤 값이 어떤 구조로 저장되어 있는지 확인하고 그 중에 명언과 말한 사람 정보를 가져오기 - 무작위로 명언 보여주기 - 10초에 한번씩 명언 바꾸기 💜 명언 코드 보기 / 완성 화면 HTML HTML은 이렇게 마무리해줬습니다. script 우선 선택자를 만들어주고, const dataresult = () => {} dataresult 함수를 정의하고 JSON 데이터를 가져와Quote와 Aut..

슬라이더 이펙트 썸네일 슬라이드(버튼, 썸네일) 💜 슬라이더 이펙트 07 코드 보기 / 완성 화면 슬라이드 이펙트 7번째 썸네일 입니다. head 07. 슬라이더 - 썸네일 css 파일을 링크로 연결시켜줘 따로 작업했습니다. reset.css와 slider.css는 전에 했던 파일과 동일합니다 확인을 원하시면 아래 링크를 통해 확인해주세요 웹디자인기능사 실기 연습_슬라이더 이펙트 트랜지션 효과 웹디자인기능사 실기 연습_슬라이더 이펙트 트랜지션 효과 이미지 슬라이드 형식 3가지 방법에 대해 정리해보겠습니다! 우선 기본 설정입니다. css연결 01. 슬라이더 타이틀 제목을 작성해주고 cs mi-1119.tistory.com style slider__img 는 이미지 슬라이더의 이미지를 감싸는 컨테이너이다 이..

슬라이더 이펙트 : 이미지 슬라이드 (버튼, 닷메뉴) 💜 슬라이더 이펙트 06 코드 보기 / 완성 화면 버튼을 눌러 이미지를 바꿀 수 있게 작업해줬습니다. style 가로와 세로 크기를 정해두고 overflow 속성으로 이미지를 감춥니다. sliderInner 이미지가 움직이는 영역을 감사는 부모 요소에 대한 스타일을 정의 해당 요소는 가로 4800px, 세로 450px 크기로 설정 display속성으로 flexbox 레이아웃을 사용 개별적인 이미지의 크기를 정해주고 position 속성으로 상대적인 위치를 지정 버튼에 대한 스타일을 지정 hover시에는 배경색과 테두리 모양이 변경되게 해줬습니다. 개별적인 페이지 닷에 대한 설정도 해주고 애니메이션효과도 추가해줬습니다. HTML Javascript Sl..

슬라이드 이펙트 - 위로 움직이기 💜 슬라이더 이펙트 05 코드 보기 / 완성 화면 style 위로 움직이게 하기 위해선 display:flex와 flex-wrap:wrap을 없애줘야합니다. script // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역 const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지 let curre..

슬라이드 이펙트 - 좌로 움직이기(연속적) 💜 슬라이더 이펙트 04 코드 보기 / 완성 화면 style 이미지가 보이는 영역, 이미지가 움직이는 영역 = 전체 이미지를 감싸고 있는 부모, 총 이미지, 개별적인 이미지에 대한 css입니다. body Javascript Slider Effect04 04. 슬라이드 이펙트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 hunmi961119@gmail.com body 안에 사진을 넣어주고 작업합니다. script 슬라이드 이미지의 width값을 구하는 offsetWidth sliderClone을 이용해 첫번째 이미지 복사 sliderClone 요소를 sliderInner 변수의 마지막 자식 요소로 추가 이를 통해 마지막 이미지에서 다시 첫 번째 이미지로 이..

자바스크립트 퀴즈 사이트 만들기 OMR 유형 (3) OMR유형 추가된 부분을 정리해보려고 합니다. 타이머 넣기(+10초 미만부터 앞에 0 붙여주기) 이름 입력해주면 해당이름 뜨게 하기 점수 결과 표시하기 💜 퀴즈 7번째 OMR 코드 보기 / 완성 화면 타이머 넣기 let questionTime = ""; let questionTimeRemain = "3600"; -변수 선언 변수들의 초기값세팅 const startQuiz = () => { //시간 설정 questionTime = setInterval(reduceTime, 1000); } -함수 선언 reduseTime 함수를 1초마다 반복해서 실행하는 setlnterval() 메서드를 사용해 questionTime 변수에 할당 setlnterval() ..

자바스크립트 퀴즈 이펙트 7 OMR(2) 오늘은 바로 어제 올렸던 자바스크립트 퀴즈 이펙트의 7번째 OMR유형에 더 추가된 내용을 정리해보겠습니다! 💜 퀴즈 7번째 OMR 코드 보기 / 완성 화면 시험 시작 전 창 띄우기 기능사 시험 도전하기 정보처리기능사 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회 정보처리기능사..

자바스크립트 퀴즈 이펙트 7 OMR카드 형식 만들어보기 오늘은 수업시간에 한 자바스크립트 퀴즈 사이트 만들기 OMR형식에 대해 정리해보겠습니다. 💜 퀴즈 7번째 OMR 코드 보기 / 완성 화면 head 우선 header부분에 css를 연결해주고 파비콘도 만들어 넣어줬습니다. body Quiz 객관식 확인 OMR카드 형식 1 2 3 4 5 6 7 web 2020년 1회 정보처리 기능사 기출문제 59분 10초 제출하기 수험자 : 땡떙땡 전체 문제수 : 60문항 남은 문제수 : 59문항 그 다음 body안에 header, main, footer로 영역을 나누어 레이아웃작업을 해줬습니다. 원래작업했던 것들은 여기 안에서 문제정보와, OMR카드 작업을 해주었는데 이번에는 밑에 script부분에서 작업해줄거기때문에..

자바스크립트 시험 4(재시험) 오답 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

자바스크립트 연습문제 마우스 포인터를 올려놨을때 이미지가 바뀌는 효과 💜마우스 포인터 효과 코드 보기 / 완성 화면 우선 body 안에 mouse 태그를 만들어 class를 지정해줍니다. 그리고 아래 script안에 이미지 선택자를 만들어주고 mouseover와 mouseout으로 마우스를오버했을때 나오는 사진과 마우스를 뺐을때 나오는 사진을 넣어줘 효과를 줍니다. 클릭하면 메뉴나오는 효과 💜마우스 클릭 효과 코드 보기 / 완성 화면 메뉴 Javascript Typerscript Node.js body안에 button태그와 nav 태그 안에 각각의 메뉴를 지정해줍니다. 그리고 style안에 css를 설정해줍니다. script 안에 버튼을 클릭했을때의 효과를 설정해줍니다. 선택자를 먼저 만들어주고 버튼을 ..

자바스크립트 문자열 접근하기 문자열을 다루는 방법에 대해 살펴보겠습니다. 💜 원시 유형과 객체 단순히 값만 가지고 있을 경우 원시 유형이고 프로퍼티와 메서드를 가지고 있을 때는 객체 라고 설명했습니다. 그런데 사실 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 문자열을 만들때 다음의 소스처럼 간단히 변수에 문자열을 할당한 후 length라는 프로퍼티를 사용해보세요 str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다. let str = "hello" str.length //5 자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉 숫자는 Number객체, 문자열은 St..

사이트 만들기1 오늘은 사이트 만들기를 했던 각각의 영역들을 합쳐서 하나의 사이트로 만들어보는 작업에 대해 정리해보겠습니다. 💜커피 사이트 만들기 코드 보기 / 완성 화면 커피에 대한 사이트를 만들었습니다. 이미지타입, 이미지 텍스트타입, 카드타입, 베너타입, 텍스트타입, 푸터타입 이렇게 나눠서 작업을 해줬었는데요 이제 이걸 한 페이지에 다 나오게 합쳐보는 작업을 했습니다. 우선 사이트 폴더를 따로 만들어준다음, assets, css, ico, img, js파일을 각각 만들어줍니다. css폴더에 각각의 css폴더도 만들어줍니다. index파일을 만들어 여기로 하나로 합쳐주는 작업을 할겁니다. 우선 head에 파비콘과 css파일을 만들어 연결시켜줍니다. style.css @import url("header..

자바스크립트 퀴즈 이펙트 6 슬라이드 형식 오늘은 퀴즈 이펙트 6번째 유형을 정리해보겠습니다! 💜 퀴즈 6번째 코드 보기 / 완성 화면 완성화면입니다. 이번엔 슬라이드 형식으로 한문제를 풀면 다음 문제로 넘어가는 형식입니다. 우선 head 에 css링크를 넣어줍니다. head reset.css @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after..

자바스크립트 시험 4(재시험) 오답 01. { const str = "javascript refercence"; str.indexOf("javascript"); str.indexOf("javascripts"); str.indexOf("j"); str.indexOf("J"); str.indexOf("a"); str.indexOf("ja"); str.indexOf("jv"); str.indexOf("refercence"); str.indexOf("r"); str.indexOf("re"); str.indexOf("javascript", 0); str.indexOf("javascript", 1); str.indexOf("refercence", 0); str.indexOf("refercence", 11); str..