728x90 반응형 Programming/JavaScript15 🚀 스크롤 애니메이션, 이제 5분이면 끝! Intersection Observer로 구현하는 모던 웹 인터랙션 웹페이지를 좀 더 “고수”처럼 보이게 만드는 가장 간단한 방법,바로 스크롤 애니메이션입니다.사용자가 화면을 내릴 때마다 요소가 부드럽게 나타나거나 움직이는 것 —이 한 가지로 페이지의 완성도가 확 달라지죠. 그런데 막상 구현하려고 하면 “스크롤 이벤트, 위치 계산, 브라우저 호환성…”복잡함의 늪에 빠지기 딱 좋습니다. 저도 예전엔 scroll 이벤트에 수십 줄짜리 코드를 붙여요소의 위치를 매번 계산하곤 했습니다.하지만 요즘은 그럴 필요가 전혀 없습니다.브라우저가 직접 관찰해주는 기능, 바로 Intersection Observer 덕분이죠. 🧠 Intersection Observer란? Intersection Observer는 브라우저에 내장된 API로,어떤 HTML 요소가 화면(Viewport) 안에 .. 2025. 10. 30. [Vue.js] 초보자를위한 vue.js 설치 방법 1. 컴퓨터에 Node.js를 설치합니다. Vue.js는 Node.js 위에 구축되므로 Vue.js를 사용하려면 Node.js를 설치해야 합니다. 2. Node.js 공식 웹사이트(https://nodejs.org)에서 Node.js를 다운로드하여 설치할 수 있습니다. Node.js가 설치되면 명령 프롬프트 또는 터미널 창을 엽니다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 3. 다음 명령을 입력하여 Vue CLI를 설치합니다. npm install -g @vue/cli 이렇게 하면 컴퓨터에 Vue CLI가 전체적으로 설치됩니다. 4.다음 명령을 입력하여 Vue CLI가 올바르게 설.. 2023. 3. 15. [Lottie] SVG를 Web에 구현해보자 Lottie란 무엇인가요? 로티는 에어비앤비에서 개발한 라이브러리로, 개발자가 프로젝트에서 벡터 애니메이션을 로티 JSON 파일로 쉽게 구현할 수 있도록 지원합니다. 이러한 애니메이션은 어도비 애프터 이펙트 또는 JSON 파일을 내보낼 수 있는 다른 소프트웨어를 사용하여 만들 수 있습니다. 개발자는 로티를 사용하여 복잡한 코드를 작성하지 않고도 웹, 모바일 및 데스크톱 애플리케이션에 고품질 애니메이션을 추가할 수 있습니다. 로티 애니메이션은 쉽게 크기를 늘리거나 줄일 수 있으며 파일 크기도 작아 웹에서 사용하기에 이상적입니다. Lottie Docs airbnb.io Lottie 설치하기 웹 프로젝트에서 로티를 사용하려면 먼저 로티 자바스크립트 라이브러리를 다운로드해야 합니다. Lottie GitHub 리.. 2023. 3. 8. [JavaScript] 간단한 레이어 팝업 구현 HTML 모달 팝업 열기 × 모달 팝업 내용 CSS .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fff; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { colo.. 2023. 3. 3. Vue.js와 React.js의 차이점과 장단점 Vue.js와 React.js의 차이점과 장단점 Vue.js와 React.js는 모두 인기 있는 프론트엔드 자바스크립트 프레임워크입니다. 이 둘의 차이점과 장단점을 살펴보겠습니다. Vue.js https://vuejs.org/ Vue.js - The Progressive JavaScript Framework | Vue.js Versatile A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework. vuejs.org 장점 간결하고 직관적인 문법: Vue.js는 템플릿, 로직, 스타일 등을 컴포넌트 단위로 작성할 수 있으며, 이를 HTML, CSS, JavaScript 파일로 분리할.. 2023. 3. 2. [React] 리액트 설치 및 실행 방법 React.js는 Facebook에서 개발한 사용자 인터페이스 라이브러리로, 다양한 웹 애플리케이션을 개발하는 데 사용됩니다. 이번 포스트에서는 초보자를 위한 React.js 설치 방법에 대해 알아보겠습니다. https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org Node.js 설치하기 React.js를 사용하기 위해서는 Node.js가 설치되어 있어야 합니다. Node.js는 자바스크립트 런타임으로, 서버 측 자바스크립트를 실행할 수 있도록 해줍니다. Node.js를 설치하기 위해서는 공식 사이트에서 다운로드 받아 설치합니다.. 2023. 3. 2. 이전 1 2 3 다음 728x90
