한번 해보자 코딩

자바스크립트 패럴랙스 가로/세로효과 💜 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"); } ..

PHP 사이트 만들기 회원가입 유효성검사 jquery HTML 회원가입 회원가입을 위해 아이디와 비밀번호를 등록해주세요. 회원가입 영역 성별 선택 남 여 회원가입 완료 회원가입을 위한 코드입니다. form요소는 실제 회원가입 양식을 담고 있습니다. action 속성은 양식을 제출할 때 보낼 URL 을 지정합니다. name 속성은 양식을 식별하는 데 사용됩니다. mathod 속성은 양식을 제출할 때 사용할 HTTP메소드를 지정합니다. fieldset 요소는 관련된 입력 요소들을 그룹화하고 그룹에 대한 설명을 제공합니다. legend 요소는 fieldset 요소에 대한 설명을 제공합니다. 유효성 검사 아이디, 비밀번호, 비밀번호 확인, 이름, 연락처, 닉네임, 생년월일에 대한 유효성 검사를 하나씩 해줬습니다..

정보처리 기능사 실기 문제풀어보기 1. 데이어베이스에서 아직 알려지지 않았거나 모르는 값으로, 정보의 부재를 나타내기 위해 사용하며 아무 것도 없는 특수한 데이터를 의미하는 용어를 쓰시오. ✨ 정답보기 NULL 2. 윈도우 10에서 가상 테스크탑 만들기와 가상 테스크탑 닫기 단축키를 각각 적으시오. 가상 데스크탑 만들기 : 윈도우 키 + CTRL + ( ① ) 가상 데스크탑 닫기 : 윈도우 키 + CTRL + ( ② ) ✨ 정답보기 1=D 2=F4 3. 원도우 운영체제에서 시스템 매개변수 및 프로세스 종류 등을 기록한 저장소로 하드웨어, 운영체제 소프트웨어 등에 대한 정보와 설정이 들어 있는 것을 뜻하는 단어는 무엇인지 작성하시오. ✨ 정답보기 레지스트리(Ragistry) 4. UNIX 내에서 소유자, ..

블로그 만들기 CSS로 레이아웃 쉽게짜보자, 텍스트 제한 블로그 만들기를 하면서 CSS로 레이아웃 틀을 미리 만들어놓고 HTML에서 입력만 해주면 바로 레이아웃이 바뀌도록 작업해줬는데요 정리를 한번 해보겠습니다. HTML Javascript Topic 지속적인 학습과 개발 IT 산업은 빠르게 변화하고 발전하고 있습니다. 새로운 기술과 도구들이 출시되는 속도는 더더욱 빨라지고 있기 때문에, 개발자로서 적극적인 학습과 개발이 필수적입니다. 더보기 팀워크와 소통 능력 향상 개발자는 혼자서 일하는 경우가 드뭅니다. 대부분의 경우 팀을 이루어 프로젝트를 수행하게 됩니다. 따라서, 팀원과의 원활한 소통과 협력이 필수적입니다. 더보기 코드 가독성 및 유지보수성 고려 개발자가 작성한 코드는 다른 개발자들이 이해하고 유..

REACT_컴포넌트, props https://nodejs.org/ko 전에도 한번 정리를 했었는데요 이번에 다시 한번 REACT 기초부터 정리를 해보겠습니다. REACT 설치 우선 리액트를 사용하려면 먼저 Node.js를 설치해야 합니다. https://nodejs.org/ko 설치는 여기서 하면 됩니다. 설치를 완료 했다면 터미널을 열어 dir로 (저장할)경로를 찾고 npx create-react-app react3 을 입력해 react 파일을 만들어줍니다. 그럼 이렇게 자동으로 파일이 만들어집니다. We suggest that you begin by typing: cd react3 npm start Happy hacking! npm notice npm notice New minor version o..

PHP사이트 만들기_이용약관 체크하고 넘어가기 HTML 이용약관 1 2 3 제1조 (목적) 본 약관은 [서비스 제공자] (이하 "회사")가 제공하는 인터넷 관련 서비스 (이하 "서비스")의 이용과 관련하여 회사와 회원의 권리와 의무 및 책임사항을 규정함을 목적으로 합니다. 제2조 (용어의 정의) "서비스"라 함은 회사가 제공하는 모든 인터넷 관련 서비스를 의미합니다. "회원"이라 함은 서비스를 이용하기 위하여 회사와 이용계약을 체결한 자를 의미합니다. "아이디(ID)"라 함은 회원의 식별과 서비스 이용을 위하여 회원이 정하고 회사가 승인하는 문자와 숫자의 조합을 의미합니다. "비밀번호"라 함은 회원이 부여 받은 아이디와 일치된 회원임을 확인하고 비밀보호를 위해 회원 자신이 설정한 문자 또는 숫자의 조합을..

리액트 시작하기 REACT!? 리액트는 페이스북에서 개발된 UI(User Interface)라이브러리 입니다. 리액트는 컴포넌트 기반으로 설계되어 있으며, 각각의 컴포넌트는 독립적이고 재사용 가능합니다. 리액트는 Virtual DOM을 사용하여 UI 를 업데이트 합니다. 이는 UI를 업데이트 할 때, 전체 UI를 다시 렌더링 하는 것이 아니라 변경된 부분만 렌더링 하여 성능을 향상시킵니다. 또한, 리액트는 JSX 라는 문법을 사용하여 JavaScript 코드 안에 HTML 코드를 작성할 수 있도록 지원합니다. JSX 는 HTML과 유사하지만, JavaScript와 통합된 문법을 가지며, 컴파일러를 사용해 일반 javaScript 코드로 변환합니다. 리액트는 단독으로 사용될 수도 있지만, 다른 라이브러리나..

자바스크립트 패럴랙스 이펙트 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..

코딩일기 💜 코드 보기 / 완성 화면 수업시간 내용을 정리중인 사이트 분위기를 알록달록하게 바꾸고 싶었지만 마음에 드는게 없어서 완전 심플한걸로 바꿨다 ALL CLASS JAVASCRIPT SITE HTML 버튼 클릭시 해당 필터링 그룹과 클래스를 이용해 페이지의 요소를 필터링 해서 보여주는 코드 CLASS 클래스 클래스 CLASS CLASS 클래스 CLASS CLASS를 눌렀을때 필터링되서 나오게 되는 박스 JAVASCRIPT 자바스크립트 자바스크립트 JAVASCRIPT JAVASCRIPT 자바스크립트 JAVASCRIPT JAVASCRIPT를 눌렀을때 필터링되서 나오게 되는 박스

PHP 사이트만들기 검색 오늘은 PHP사이트의 검색 기능을 추가해봤습니다. boardSearch.php

자바스크립트 게임 이펙트 _음악 재생 💜 게임 이펙트 코드 보기 / 완성 화면 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: ..

php 사이트 만들기 게시판작업 board.php if(isset($_GET['page'])){ $page = (int) $_GET['page']; } else { $page = 1; } $viewNum = 10; $viewLimit = ($viewNum * $page) - $viewNum; // 1~20 DESC LIMIT 0, 20 -> page1 (viewNum * 1) - viewNum // 21~40 DESC LIMIT 20, 20 -> page2 (viewNum * 2) - viewNum // 40~60 DESC LIMIT 40, 20 -> page3 (viewNum * 3) - viewNum // 60~80 DESC LIMIT 60, 20 -> page4 (viewNum * 4) - view..

php 게시판 페이지만들기(글작성, 수정, 삭제) 게시판 페이지 전체 코드 보기 board.php

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

사이트 제작 - 디자인 시안 디자인 시안 조사 먼저 제작하고자 하는 화장품에 관련된 사이트들을 조사하고 마음에 드는 시안을 짜집기해봤습니다. 참고사이트는 아래 더보기에 첨부해뒀습니다. 더보기 빈느 https://vinne.co.kr/?gclid=Cj0KCQjwi46iBhDyARIsAE3nVrY8q0pfn2Wo8r_xxlqYafpOJ_Dc2lg7AC0TXAp9FS1073qVx2hqxzwaAvpOEALw_wcB 아리따움 https://www.aritaum.com/main.do 스키큐어 http://skincure.co.kr/ 이니스프리 https://www.innisfree.com/kr/ko/Main.do 라미화장품 https://www.lamy.co.kr/ 💜 https://theblessedmoon.co..

자바스크립트 문자열 객체 정리 자바스크립트 문자열 객체 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는 다른 브라우저에서 사..

PHP 회원가입, 로그인 페이지 만들기 PHP - 서버 측에서 동작하는 스크립트 언어로, 웹 개발에 널리 사용되는 프로그래밍 언어입니다. PHP는 PHP:HyperText Preprocessor의 약자로 초기에는 Personal Home Page의 약자였습니다. PHP 는 HTML 과 같이 웹 페이지를 동적으로 생성하는데 사용되며, 웹 서버에서 PHP 스크립트를 실행해 동적인 웹 콘텐츠를 생성하고 처리할 수 있습니다. PHP를 사용해 회원가입 페이지와 로그인 페이지를 만들어봤는데요 정리를 해보겠습니다. PHP에서 MySQL 데이터베이스에 접속 PHP에서 MySQL 데이터베이스에 접속 우선 PHP에서 MySQL 데이터베이스에 접속하는 코드로 연결해줍니다. $를 사용해 데이터베이스 접속에 필요한 변두르을 선..

자바스크립트 패럴랙스 이펙트 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 는 이미지 슬라이더의 이미지를 감싸는 컨테이너이다 이..