JavaScript

32. scrollEffect

작성자:

1. 스크롤 효과를 만들어보자 1.1. 1단계-섹션1 1.1.1. 좌우이동 – css 메서드 활용 예제 미리보기 이 코드는 잠재적인 버그가 있다. 작성후 어떤 버그가 발생할수 있을지 예상해보자 HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="css/jq-01.css" /> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="js/jq-01.js" defer></script> </head> <body> <section class="section1"> <h2>section1</h2> <div … 더 읽기

34. ajax

작성자:

jQuery load()는 특정 URL의 리소스를 요청하고, 응답을 HTML로 변환하여 지정된 DOM 요소에 로드합니다. 💡 ajax (Asynchronous JavaScript and XML) (에이싱크러너스 자바스크립트 앤 xml) 비동기 방식의 자바스크립트와 xml 동기방식: 서버에 신호를 보냈을때 응답이 돌아와야 다음 동작을 수행 비동기방식: 신호를 보냈을때 응답여부와 상관없이 다음 동작 실행 💡Ajax(Asynchronous Javascript and XML)는 클라이언트 가 비동기방식으로 자바스크립트를 이용하여 > 화면 … 더 읽기

27. tabSlide

작성자:

탭(Tab) 메뉴 UI 내부에서 슬릭(Slick) 라이브러리를 활용한 캐러셀(Carousel, 슬라이드)과 매그니픽 팝업(Magnific Popup) 라이브러리를 활용한 라이트박스(Lightbox, 이미지 확대 모달)를 결합하는 구현 방법을 다룬다. 탭 전환 시 보이지 않는 영역의 슬라이더가 겪는 너비 계산 오류를 해결하고, 각 탭에 독립된 슬라이더와 팝업 기능을 안정적으로 연동하는 과정을 설명한다. HTML, CSS, 자바스크립트(JavaScript)로 나누어 마크업 구조부터 플러그인 재초기화 로직까지 단계별로 살펴본다. … 더 읽기

33. adaption

작성자:

1. 개요 2. 응용예제 3. 각 페이지별 이동버튼 추가 1. 개요 적응형(adaptive) 란 매체별 페이지를 별도로 제작하는 기술이다. 자바스크립트를 사용하여 사용자 접속 환경을 체크후 원하는 페이지로 리디렉션 한다. 2. 응용예제 예제 미리보기 HTML root/index.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>PC</title> </head> <body> <h1>PC전용페이지</h1> <div class="pc">PC</div> <div class="mobile">Mobile</div> … 더 읽기

35. topBtn

작성자:

1. 탑버튼 탑버튼(Top Button, 상단 이동 버튼)은 세로로 긴 웹페이지에서 사용자가 스크롤을 내렸을 때 클릭 한 번으로 문서 최상단으로 되돌아갈 수 있도록 돕는 인터페이스 요소이다. 스크롤 위치에 따라 화면에 동적으로 표시되거나 사라지며, 클릭 시 부드러운 스크롤 애니메이션과 함께 시작 지점으로 이동하는 기능을 제공한다. 본 문서에서는 제이쿼리(jQuery) 라이브러리를 활용한 구현 방식과 순수 자바스크립트(Vanilla JavaScript, 바닐라 자바스크립트)를 … 더 읽기

31. rollingBanner

작성자:

롤링 슬라이드 배너는 한정된 영역 안에서 여러 개의 이미지나 콘텐츠를 일정 개수만큼 순차적으로 노출하는 사용자 인터페이스(UI, User Interface) 요소다. 웹 페이지의 공간을 효율적으로 활용하면서 여러 시각 자료를 정돈된 형태로 보여줄 때 사용된다. 이 글에서는 HTML로 배너와 이동 버튼의 뼈대를 구성하고, CSS의 플렉스박스(Flexbox)와 넘침 영역 숨김 속성을 활용해 기본 구조를 스타일링하는 과정을 설명한다. 1. HTML 마크업 … 더 읽기

23. menu

작성자:

메가메뉴(Mega Menu)는 대분류 하위에 속한 세부 메뉴 항목들을 다단(Multi-column) 형태로 한눈에 보여주는 내비게이션(Navigation) 구조다. 본 글에서는 웹 표준 시맨틱 태그(Semantic Tag)와 플렉스박스(Flexbox)를 활용하여 2단계 메가메뉴의 마크업과 스타일을 제작하고, 자바스크립트(JavaScript)를 통해 마우스 및 키보드 인터랙션과 상단 고정(Sticky) 기능을 구현하는 전 과정을 설명한다. 미리보기 HTML HTML(에이치티엠엘) 코드는 전체 메뉴의 계층 구조를 정의한다. 최상위 내비게이션 영역인 <nav class=”nav”> … 더 읽기

24. stickyMenu

작성자:

1. 스크롤 양 얻기 HTML <p>Hello</p> <p></p> CSS p { margin: 10px; padding: 5px; border: 2px solid #666; height: 800px; } jQuery $(window).scroll(function () { $('p:last').text('scrollTop:' + $(window).scrollTop()); }); Vanilla const win = window; const secondP = document.getElementsByTagName(‘p’)[1]; function throttle(func, delay) { let timeoutId; return function (…args) { if (!timeoutId) { timeoutId = setTimeout(() => … 더 읽기

28. accordion

작성자:

1. 아코디언메뉴 아코디언 메뉴(Accordion Menu)는 상위 항목을 선택했을 때 하위 콘텐츠가 접히거나 펼쳐지는 사용자 인터페이스(UI) 구성 요소다. 아코디언 악기의 주름상자가 늘어나고 줄어들 듯이, 제한된 화면 공간 안에서 메뉴 영역을 효율적으로 확장하고 축소하는 데 사용된다. 각 상위 메뉴마다 포함된 하위 항목의 개수가 다를 때 고정된 높이를 부여하면 내용이 잘리거나 불필요한 여백이 발생하므로, 스크립트를 통해 하위 메뉴의 … 더 읽기

30. swiper

작성자:

1. Swiper란? Swiper 공식 사이트 파일다운로드 Swiper는 터치 슬라이더 라이브러리. 모바일과 데스크톱 모두 지원. 주요 특징: 터치/드래그 지원 반응형 디자인 다양한 효과 (fade, cube, flip 등) 네비게이션, 페이지네이션 지원 2. 설치 2.1. CDN <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css” /> <script src=”https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js”></script> 2.2. NPM npm install swiper 3. 기본 구조 슬라이드는 반드시 두 단계로 감싸야 합니다. HTML 4. … 더 읽기