Web (6) 썸네일형 리스트형 자동 스크롤 감지 기능 : IntersectionObserver 활용 방법 IntersectionObserver 함수 물체나 요소가 화면에 보이는지 감시하고, 보이거나 숨겨질 때 특정 동작을 수행할 수 있는 JavaScript 기능입니다. 스크롤 이벤트 대신 사용되며, 웹 페이지의 성능을 향상시킵니다. - 감시요소의 가시성을 모니터링할 수 있음. - 이 함수의 이점은 타이머, 스크롤 이벤트를 사용하지 않아도 됨 (번거롭게 스크롤의 높이, 작동 시간 이런 걸 계산하고 구하지 않아도 됨) observe observe메서드는 IntersectionObserver안에 감시하고자 하는 대상을 등록하는 용도로 사용됨 - 감시요소가 화면에 들어올 때나 나갈 때를 감지 observer.observe(감시요소); // 감시 대상 요소 등록 var box1 = document.getElement.. [Swiper.js] 다양한 멋진 캐러셀을 구현하는 JavaScript 라이브러리 Swiper.js란? Swiper.js는 다양한 종류의 캐러셀 기능을 구현하는데 도움을 주는 JavaScript 라이브러리입니다 이 라이브러리를 사용하면 다양한 종류의 멋진 캐러셀, 슬라이드를 쉽게 만들 수 있습니다 Swiper.js CDN 연결 ~ 기본 설정까지 Swiper.js에 들어가서 Swiper.js 라이브러리를 다운로드합니다 해당 웹 사이트에 접속했으면 "Download" 또는 "Get Started"를 클릭 Swiper.js CDN 불러오기 Swiper의 기본 레이아웃을 추가 Slide 1 Slide 2 Slide 3 ... Swiper의 기본 CSS 적용 .swiper { width: 600px; height: 300px; } Swiper의 기본 Js 연결 const swiper = new.. ES6 모듈 문법 :: export default와 export {} 차이 이해하기 Export Default / Export {} 사용 예시 export default / import 문법 export default는 한 모듈에서 딱 한번만 사용 가능 import시 자유롭게 작명 가능 // myModule.js const constantValue = 42; export default constantValue - export default 변수명 // Vue.app import 작명 from "./myModule.js"; console.log(작명); // 42 - import 작명 from "파일 경로" export { } / import 문법 export{}는 여러번 사용 가능 import시 자유로운 작명 불가능. export 변수명을 사용 var contantValue = 42; .. [JavaScript] 이벤트 버블링(이벤트 중복 발생) 해결 방법 이벤트 버블링이란? - HTML 요소들 간에 발생한 이벤트가 상위 요소로 순차적으로 전파되는 동작을 의미 - 이벤트가 자식 요소에서 발생하더라도 부모 요소에도 영향을 미칠 수 있다는 걸 알려줌 이해를 돕기 위한 예제 STEP 01) 아래와 같이 2개의 를 겹쳐 놓았음 뒷면에 있는 검은 배경은 BACK 앞면에 있는 하얀 배경은 FRONT STEP 02) document.querySelector('.back').addEventListener('click', function(){ console.log('back-click'); }) 이 코드는 바깥에 있는 검은 배경을 클릭하면 콘솔을 출력하는 자바스크립트 코드가 분명함 하지만 안에 있는 하얀 배경을 클릭해도 콘솔이 찍히는 걸 알 수 있음 STEP 03) - 해.. [jQuery] 제이쿼리 다운로드 CDN 연결 방법 제이쿼리(jQuery) 간략하게 알아보기 웹 개발에서 jQuery는 많은 웹 개발자들이 자주 사용하는 JavaScript 라이브러리 중 하나입니다. jQuery를 사용하면 웹 개발을 보다 더 쉽고 효율적이게 할 수 있으며 다양한 브라우저에서 일관된 동작을 보장합니다 jQuery를 사용하면 브라우저 간의 호환성 문제를 해결해 주고 복잡한 DOM 조작을 간단하게 만들 수 있습니다 jQuery를 사용하려면 다음과 같이 jQuery 라이브러리를 웹 페이지에 연결해야 합니다. 01. 제이쿼리 라이브러리 다운로드 단계 1: 제이쿼리 홈페이지에서 Download jQuery를 클릭 - 제이쿼리 홈페이지 https://jquery.com/ 단계 2: 맨 위에 있는 링크를 클릭 (최신 버전) 단계 3: 마우스 우클릭 -.. [JavaScript] 메뉴 클릭 시 원하는 페이지로 스크롤 이동하기 UI 동작을 위해 생각해 봐야 할 것 링크의 기본 동작을 막아야함 화면을 스무스하게 이동 시켜야함 이동을 원하는 각 섹션의 위치를 담아 둬야함 HTML 구조 더보기 1 2 3 4 [STEP 01] 링크 기본 동작 막기 자바스크립트에서 기본 동작을 막을 수 있는 'e.preventDefault' 매소드를 사용 $('.nav-bar li a').on('click', function(e){ e.preventDefault(); // 링크 클릭의 기본 동작을 중단 }) 선택자를 $('. nav-bar li')가 아닌 $('.nav-bar li a')로 직접적으로 한 이유는 hash 함수를 사용 하기 위해서임 [STEP 02] hash() 함수로 해당 값 담아두기 $('.nav-bar li a').on('click.. 이전 1 다음
