Web's study ! 지선

music player 음악이 나오는 music player 를 만들어보았습니다. https://jiseonpack.github.io/webs_class/javascript/musicPlayer/index.html Music Player expand_more Now Playing more_horiz repeat skip_previous play_arrow pause --> skip_next queue_music repeat_one shuffle --> queue_music Music list close jiseonpack.github.io

document.addEventListener("mousemove", function (e) { let body = document.querySelector("#mouseType07"); let circle = document.createElement("span"); let x = e.offsetX; let y = e.offsetY; circle.style.left = x + "px"; circle.style.top = y + "px"; let size = Math.random() * 100; circle.style.width = 20 + size + "px"; circle.style.height = 20 + size + "px"; body.appendChild(circle); setTimeout(fun..

const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClientRect(); const onMouseEnter = () => { gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0.3, opacity:0}); gsap.to(imageWrap, {xPercent: -50, yPer..

function mousemove(e){ let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1; let positionFast = (e.pageX - (window.innerWidth/2)) * 0.2; gsap.to(".spanSlow", {duration: 0.4, x: positionSlow}); gsap.to(".spanFast", {duration: 0.4, x: -positionSlow}); gsap.to(".cursor", {duration: 0.3, left: e.pageX, top: e.pageY}); } document.addEventListener("mousemove", mousemove) https://jiseonpack.githu..

React란? React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있습니다. 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다. 즉, 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리라고 볼 수 있습니다. React의 필요성? react를 사용하지 않아도, html과 css, javascript를 이용해서 웹 페이지를 만들 수 있지만, react를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용되는 것 같습니다..! React의 특징 React의 특징은 크게 다음..

SPA(Single Page Application) 이란? 너무 당연하게 사용해 온 SPA. 어떻게 작동하는 것일까요? 일상생활에서 너무 당연하다는 듯이 사용하고 있어 이제는 웹 개발이 그 자체로 SPA 개발이 되어버린 기분이 든다. 하지만 ‘SPA가 대체 뭐니?’ 하고 누군가 묻는다면 선뜻 대답할 수 있을까? 이번 포스팅은 그래서 준비했다. 과거의 웹 사이트 전통적인 웹 사이트는 지금보다 문서 하나에 전달되는 파일의 용량이 적었다. 그래서 어떤 요소를 한번 클릭하면 완전히 새로운 페이지를 서버에서 전송해 주곤 했다. 그래도 상관 없었다. 그러나 현대에 이르러 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 전달하는 게 점점 버거워지게 되었다. SPA..

변수(variable) 변수(variable)란 데이터(data)를 저장하기 위해 프로그램에 의해 이름을 할당받은 메모리 공간입니다. 즉, 변수란 데이터(data)를 저장할 수 있는 메모리 공간이며, 저장된 값은 변경될 수 있습니다. 변수의 선언 PHP에서는 달러($) 기호를 사용하여 다음과 같이 변수를 선언합니다. 문법 $변수이름 = 초깃값; PHP에서 변수를 선언할 때는 변수의 이름 앞에 달러($) 기호를 사용하여 선언합니다. 또한, C언어와는 달리 변수를 선언할 때 따로 타입을 명시하지 않습니다. PHP에서 변수의 타입은 해당 변수에 대입하는 값에 따라 자동으로 결정되기 때문입니다. PHP 타입에 대한 더 자세한 사항은 PHP 기본 타입 수업에서 확인할 수 있습니다. 예제 $var = 10; // ..

PHP 코드 영역 PHP 코드는 웹 페이지의 어느 부분에나 위치할 수 있습니다. 따라서 PHP 파서가 PHP 코드를 인식하기 위해서는 그 시작과 끝을 알려줄 필요가 있습니다. PHP 코드 영역을 알려주는 방식에는 다음과 같이 여러 가지 스타일을 사용할 수 있습니다. PHP 권장 스타일과 HTML 스크립트 스타일은 그 어떤 상황에서도 정확히 인식될 것입니다. 하지만 SGML 스타일과 ASP 스타일은 php.ini 설정 파일의 특정 태그를 활성화했을 경우에만 정확히 인식될 것입니다. 따라서 서버별 이식성 문제 등을 피하기 위해서라도 PHP 권장 스타일을 사용하는 것이 좋습니다. PHP 문법 C언어처럼 PHP 명령문도 마지막은 세미콜론(;)으로 끝납니다. 또한, PHP 코드 영역을 나타내는 종료 태그도 생략할..