반응형

코딩 공부 162

패럴랙스 이펙트(parallaxEffect) : 사이드 메뉴

패럴랙스 이펙트란? 패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다. 웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다. 패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선..

GSAP( GreenSock Animation Platform) 라이브러리

GSAP( GreenSock Animation Platform) 라이브러리 HTML Three.js는 3D 그래픽을 만들기 위한 JavaScript 라이브러리이며, Threex는 Three.js를 이용한 다양한 기능들을 제공하는 라이브러리입니다. SimplexNoise.js는 Threex에서 제공하는 노이즈 생성 라이브러리로, 지형 모양을 생성하는 데 사용됩니다. threex.terrain.js는 Threex에서 제공하는 지형 생성기입니다. 이 코드들을 사용하여 지형을 만들고 Three.js의 WebGLRenderer를 사용하여 3D 지형을 화면에 렌더링합니다. var onRenderFcts = []; //화면 설정 var renderer = new THREE.WebGLRenderer({ antialia..

제이쿼리로 탭메뉴 만들기

제이쿼리로 탭메 만들기 로고 메뉴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 이미지 슬라이드 공지사항/갤러리 배너 바로가기 로고 COPYRIGHT SNS 하나씩 내려오는 탭 //mouseover $(".nav > ul > li").mouseover(function(){ $(this).find(".submenu").stop().slideDown(); }); //mouseout $(".nav > ul > li").mouseout(function(){ $(this).find(".submenu").stop..

자바스크립트 게임 이펙트(Game Effect)01-(3)

게임 이펙트(Game Effect)란? 자바스크립트를 사용하여 구현된 게임에서의 이펙트는 일반적으로 다양한 애니메이션 기술과 그래픽 처리 기술을 사용하여 구현됩니다. 이를 통해 게임에 동적이고 생동감 있는 느낌을 부여할 수 있습니다. 추가 선택자 const musicRepeat = musicWrap.querySelector("#control-repeat"); const musicListBtn = musicWrap.querySelector("#control-list") const musicList = musicWrap.querySelector(".music__list"); const musicListUl = musicWrap.querySelector(".music__list ul"); const music..

PHP 결과 게시판 페이지 만들기

PHP란? PHP는 Hypertext Preprocessor의 약어로, 서버 측에서 실행되는 스크립트 언어입니다. PHP는 주로 동적 웹 페이지를 생성하고 관리하는 데 사용됩니다. PHP는 오픈 소스 언어이며, 웹 서버에서 무료로 실행될 수 있습니다. PHP는 HTML과 함께 사용되며, PHP 코드를 HTML 문서 안에 포함시킬 수 있습니다. 이렇게 함으로써 PHP는 웹 페이지를 동적으로 생성하고 데이터베이스와 상호 작용할 수 있는 능력을 갖춥니다. PHP는 또한 파일 업로드, 이메일 전송, 세션 관리, 암호화, 데이터베이스 연결 등과 같은 기능도 제공합니다. PHP는 많은 유명한 CMS(Content Management System) 및 프레임워크(Framework)에서 사용됩니다. 예를 들어, Wor..

코딩 공부/PHP 2023.05.01

정보처리기능사 대비 테스트 문제

테스트 다음의 스크립트를 보고 결과 값을 작성하거나 빈칸을 채우시오. 01. 다음 중 OSI 7 계층의 네트워크 계층에 해당하는 프로토콜을 모두 고르시오. 01. 다음 중 OSI 7 계층의 네트워크 계층에 해당하는 프로토콜을 모두 고르시오. HTTP, TCP, UDP, FTP, ICMP, IP, ATM, TELNET 😎결과 확인하기 ICMP , IP 02. 다음이 설명하는 용어를 작성하시오. 이것은 네트워로 연결된 두 호스트 사이에서 연결할 수 있는지 점검하는 진단도구이다. 이 명령을 실행하면 ICMP Echo 반향 패킷을 이용하여 원격 IP 주소에 송신하고 ICMP 응답을 기다린다. 😎결과 확인하기 PING 03. 다음이 설명하는 용어를 작성하시오. Window 10의 pro 버전에서 지원하는 기능으로..

자바스크립트 테스트09 정보처리 대비 오답노트

자바스크립트 테스트 정보처리기능사 기출문제를 자바스크립트로 변환한 문제입니다. 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } 😎결과 확인하기 190 오답 코드에서는 0부터 9까지의 숫자를 반복하면서 i 값을 증가시키고, i 값이 4의 배수일 때 sum에서 i 값을 뺀 후, 4로 나누어 떨어지지 않을 때는 i 값을 더하고, 4로 나누어 떨어질 때는 i 값을 곱한 값을 sum에 더합니다. i=1 일 때, 1 % 4 == 1 이므로 sum에 1을 더합니다. i..

자바스크립트 게임 이펙트(Game Effect)01-(2)

게임 이펙트(Game Effect)란? 자바스크립트를 사용하여 구현된 게임에서의 이펙트는 일반적으로 다양한 애니메이션 기술과 그래픽 처리 기술을 사용하여 구현됩니다. 이를 통해 게임에 동적이고 생동감 있는 느낌을 부여할 수 있습니다. '' 선택자 const musicWrap = document.querySelector(".music__wrap"); const musicName = musicWrap.querySelector(".music__control .title h3"); const musicArtist = musicWrap.querySelector(".music__control .title p"); const musicView = musicWrap.querySelector(".music__view ...

728x90
Adventure Time - BMO