코딩공부

parallax effect란? 시차(관측 위치에 따른 물체의 위치나 방향의 차이)를 이용한 효과라는 뜻으로, parallax는 시차라는 뜻이며 천문학에서 사용하는 용어입니다. 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미합니다. 이 현상을 이용하면 입체감, 실체감을 높여서 보다 인상적인 디자인을 할 수 있습니다. 시차에 따라 모션을 다르게 줌으로써 움직이는 모션효과를 주는 것이므로 위와 같이 스크롤의 top값과 각 섹션의 값을 나타내는 효과를 만들어 보았습니다. HTML JavaScript Parallax Effect01 페럴렉스 이펙트 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 불가능은 자신이나 다..

오늘은 전에 명언이 10초에 한번씩 바뀌는 것에서 추가로 뒷 배경 이미지도 10초에 한번씩 바뀌는 것으로 만들어 보았습니다. HTML HTML은 전과 동일합니다. css @import url('https://webfontworld.github.io/gonggames/EsaManru.css'); @import url('https://webfontworld.github.io/sebang/SebangGothic.css'); body { background-size: cover; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100vh; box-sizing: cover;..

Q2. 자바스크립트를 사용해서 자동으로 복권 번호를 생성해주는 프로그램을 작성하려고 합니다. 번호는 중복되면 안되므로 셋(set)을 이용할 것이고, 숫자는 1부터 45까지의 범위 안에 있어야 하며, 6개의 무작위 수를 추출할 것입니다. 버튼을 클릭했을 때 모든 조건을 반영해서 6개의 숫자를 추출하는 소스를 작성해보세요. HTML 로또 번호 생성기 번호 뽑기 제목과 버튼 그리고 결과를 나타낼 영역을 만들어 주었습니다. CSS 폰트를 import 방식으로 불러왔고 배경색, 버튼색 버튼 모양등을 원하는 대로 설정해주었습니다. script const luckyNumber 객체는 생성될 숫자의 개수(numberDigit)와 최대 숫자(maxNumber)를 저장하고 있습니다. button.addEventListen..

Q1 JSON 형식으로 저장된 데이터를 불러와 구조를 살펴보고 #result 영역에 명언 내용과 말한사람 표시하세요. 이때 명언 내용은 #result 영역에 있는 .quote영역에, 말한 사람은 .author영역에 표시하세요. 10초에 한 번씩 명언이 바뀌게 하세요. HTML 문제에 따라서 result 영역 안에 명언이 들어갈 quote 영역, 작가가 들어갈 author 영역을 만들어주었습니다. CSS @import url('https://webfontworld.github.io/gonggames/EsaManru.css'); @import url('https://webfontworld.github.io/sebang/SebangGothic.css'); body { display: flex; justify-..

HTML JavaScript Slider Effect07 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next 1346zany@gmail.com style script 이미지 설정 let images = [ "img/sliderEffect01-min.jpg", "img/sliderEffect02-min.jpg", "img/sliderEffect03-min.jpg", "img/sliderEffect04-min.jpg", "img/sliderEffect05-min.jpg" ]; 이번엔 main이 아니라 스크립트에 배열을 만들어 이미지를 넣어주었습니다. 선택자 function imageSlider(parent, images){ let currentIndex = 0; /..

오늘은 닷메뉴가 있는 슬라이드 이펙트를 만들어 보았습니다. prev를 누르면 전 이미지로, next를 누르면 다음 이미지로, 닷 메뉴를 누르면 해당 순서의 사진으로 이동합니다. HTML JavaScript Slider Effect06 슬라이드 이펙트 : 이미지 슬라이드(버튼, 닷메뉴) 1 2 3 4 5 6 7 prev next 이번엔 아래쪽에 닷 메뉴가 있으므로 footer는 없애주었습니다. script 선택자 //선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 const sliderInner = sliderWrap..

이번에는 위에서 아래로 연속으로 움직이는 슬라이드 이펙트를 만들어 보았습니다. HTML JavaScript Slider Effect05 슬라이드 이펙트 : 연속적으로 상하로 움직이기 1 2 3 4 5 6 1346zany@gmail.com script 선택자 이번엔 상하 세로로 움직이므로 이미지의 세로 값을 구해주었습니다. javascript 변수를 sliderWidth에서 새로 추가한 sliderHeight로 바꾸고 이번에도 위에서 아래로 움직이기 때문에 4번에서 만든 스크립트에서 X축을 Y축으로 바꿔주었습니다. appendChild는 요소에 새로운 자식요소를 추가하는 매서드입니다. liderEffect 함수는 이미지 슬라이더가 동작할 때 실행됩니다. 동작이 싱행될떄 style을 설정해줍니다. curre..

전에는 그냥 좌측으로 이동했다가 이미지가 끝나면 다시 앞쪽 이미지로 돌아왔지만 이번엔 연속적으로 이미지가 계속 나오는 슬라이드 효과를 만들어보았습니다. HTML JavaScript Slider Effect04 슬라이드 이펙트 : 연속적으로 좌로 움직이기 1 2 3 4 5 6 1346zany@gmail.com script 이번에도 javascript, GSAP, jQury 세 가지 방법으로 짜는 법을 소개해보겠습니다. 선택자 선택자로 각 요소를 선택해줍니다. 이번엔 offsetWidth를 통해 이미지의 가로값을 구해줬습니다. .firstElementChild는 DOM에서 특정 엘리먼트의 첫번째 자식 요소(element)를 반환하는 속성입니다. cloneNode(true)는 DOM에서 특정 요소를 복사할 때..

이번엔 상하로 움직이는 슬라이드 이펙트를 만들어 보았습니다. HTML JavaScript Slider Effect03 슬라이드 이펙트 : 상하로 움직이기 1 2 3 4 5 1346zany@gmail.com script 선택자 저번과 동일하게 선택자로 선택해줍니다. javascript 저번엔 X축이였는데 이번엔 상하로 움직이므로 Y축으로 설정해주었습니다. 그리고 이번엔 height 값에 맞추어 -450으로 설정해주었습니다. GSAP 이것도 똑같이 Y축으로 바꿔주고 값을 -450으로 설정했습니다. jQuery 상하로 움직이므로 left에서 top으로 바꿔주고 이것도 값을 -450으로 설정해주었습니다. 이러면 예시와 같은 효과를 세가지 방법으로 표현 할 수 있습니다!

2번은 위와 같이 좌측으로 슬라이드 되는 이펙트를 만들어보았습니다. HTML JavaScript Slider Effect02 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 1346zany@gmail.com 1번에서 이미지를 바꿔주고 slider__inner를 추가하였습니다. 거기에 맞춰 style 부분도 변경해주었습니다. script 이번에도 같은 효과를 javascript, GSAP, jQuery 세가지 방법을 통해서 짜보았습니다. 선택자 슬라이드 이펙트 1번과 마찬가지로 선택자로 선택해줍니다. javascript slider inner가 움직이는 영역이므로 좌측으로 x축으로 움직일 수 있도록 translateX() 함수를 사용하여 이동 거리를 설정하며, -800 * i로 각각의 슬라이드를 구분합..