hyejeong 코딩

php를 이용하여 사이트를 만들었습니다. 사이트 안에는 로그인, 회원가입 페이지를 만들었습니다. 회원가입 화면 join.php 회원가입을 해주세요. 회원가입 회원가입 영역 이메일 이름 비밀번호 비밀번호 확인 연락처 회원가입 완료 PHP와 HTML을 사용하여 만든 회원가입 페이지의 소스 코드입니다. : 다른 파일의 내용을 이 파일에 포함합니다. 이 경우 "../include/head.php" 파일의 내용을 포함합니다. : 웹 접근성을 높이기 위한 스킵 내비게이션을 구현하는 코드를 포함합니다. : 웹 페이지의 헤더를 구현하는 코드를 포함합니다. main 태그 안에는 회원 가입시 필요한 영역들(이메일, 이름, 비밀번호, 비밀번호 재확인, 연락처)을 정의했습니다. 회원가입 폼을 나타내는 form 태그입니다. a..

패럴렉스 이펙트 - 메뉴 효과 HTML Javascript Parallax Effect01 패럴렉스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section01 늘 이걸 명심하라. 그 무엇보다 성공하겠다는 결의가 중요하다. 02 Section02 모든 진보는 안전 구역 밖에서 이루어진다. 03 Section03 성공이란 실패에 실패를 거듭하면서도 열의를 잃지 않는 것이다. 04 Section04 늘 이걸 명심하라. 그 무엇보다 성공하겠다는 결의가 중요하다. 05 Section05 더 열심히 일하면 할수록 운이 더 좋아진다는 것을 알게 된다. 06 Section06 더 나은 것을 위해 좋은 것을 포기하는 걸 두려워 하지 마라. 07 ..

마무리 문제풀이 (명언 랜덤) 에서 배경이미지를 추가하여 같이 10초마다 바뀌게 만들었습니다. HTML 배경이미지를 넣기 위해 wrap클래스명을 가진 div로 main 영역을 감쌌습니다. CSS SCRIPT 추가한 script function randomImg(){ let wrapImg = document.querySelector(".wrap"); const bgimgURL = `https://source.unsplash.com/random/?nature&t=${new Date().getTime()}`; wrapImg.style.backgroundImage = `url(${bgimgURL})`; } randomImg(); setInterval(randomImg, 10000); 함수 randomImg를 만..

문제 자바스크립트를 사용해서 자동으로 복권 번호를 생성해주는 프로그램을 작성하세요. 번호는 중복되면 안되므로 Set을 이용하고, 숫자는 1부터 45까지의 범위 안에 있어야 하며, 6개의 무작위 수를 추출합니다. 버튼을 클릭했을 때 모든 조건을 반영해서 6개의 숫자를 추출하세요. HTML 로또 번호 생성기 추첨 CSS SCRIPT 추첨 버튼 클릭시 실행하는 함수 lottoNumber를 생성합니다. button.addEventListener("click", lottoNumber);를 통해 버튼에 클릭 이벤트를 등록합니다. let randomLotto = new Set(); 중복된 데이터를 저장하지 않는 배열 변수를 만들어 줍니다. 6개의 추첨 번호를 출력하기 위해 for문을 사용해 6번 반복실행하여 .add..

문제 명언 데이터를 가져와 그 중에서 1개의 명언만 가져와서 문서의 #result 영역에 명언 내용과 말한 사람을 표시해보세요. 이 때 명언 내용은 #result 영역에 있는 .quote 영역에, 말한 사람은 .author 영역에 표시하세요. 10초마다 명언과 말한사람이 바뀌게 작업하세요. HTML CSS SCRIPT JSON 형식으로 된 명언 데이터가 들어있는 사이트의 주소를 quoteURL 변수에 저장합니다. 함수 randomQuote에 fetch(quoteURL)를 사용하여 명언데이터를 가져옵니다. .then(response => response.json()) fetch 성공 했을 때 실행되는 것으로 가져온 데이터를 변수 response에 저장 후 데이터 형태를 json으로 바꿔줍니다. .then(..

버튼과 썸네일을 누르면 해당 이미지로 바뀌는 이미지 슬라이드를 만들었습니다. HTML Javascript Slider Effect07 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next hyejeong3283@gmail.com CSS SCRIPT let images = [ "./img/sliderEffect02-min.jpg", "./img/sliderEffect03-min.jpg", "./img/sliderEffect06-min.jpg", "./img/sliderEffect09-min.jpg", "./img/sliderEffect10-min.jpg" ]; images라는 변수에 각 이미지 파일 경로를 문자열로 표현하여 배열 형태로 저장했습니다. 함수 image..

움직이는 이미지 슬라이드에 양쪽에 버튼과 하단에 닷 메뉴를 넣었습니다. 양쪽 버튼을 누르면 방향따라 이미지가 넘어가고 하단의 점을 누르면 해당 순서의 이미지로 바뀝니다. HTML Javascript Slider Effect06 슬라이드 이펙트 : 이미지 슬라이드(버튼, 닷메뉴) 1 2 3 4 5 6 7 prev next CSS SCRIPT 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 ..

위로 연속적으로 이미지를 움직이는 슬라이드를 만들었습니다. 마지막 이미지가 나온 후 다시 첫번째 이미지부터 보여주기를 반복합니다. HTML Javascript Slider Effect05 슬라이드 이펙트 : 위로 움직이기(연속적으로) 1 2 3 4 5 6 hyejeong3283@gmail.com CSS 위로 움직이는 이미지 슬라이드를 만들기 위해 이미지 height(이미지 세로값)을 520px로 맞추었습니다. 모든 이미지가 들어갈 슬라이드 영역의 height(세로값)은 3120px로 맞추었습니다. SCRIPT 선택자 javascript HTML 코드에서 slider__wrap, slider__img, slider__inner, slider 클래스를 가진 요소들을 변수에 할당합니다. 그리고 이미지 변경 간..

좌측으로 연속적으로 이미지를 움직이는 슬라이드를 만들었습니다. 마지막 이미지가 나온 후 다시 첫번째 이미지부터 보여주기를 반복합니다. HTML Javascript Slider Effect04 슬라이드 이펙트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 hyejeong3283@gmail.com CSS SCRIPT 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역 const sli..

여러 이미지를 저장해 위로 움직여 이미지를 보여주는 페이지를 만들었습니다. HTML Javascript Slider Effect02 슬라이드 이펙트 : 위로 움직이기 1 2 3 4 5 6 hyejeong3283@gmail.com CSS SCRIPT 선택자 // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역 const slider = sliderWrap.querySelectorAll..