jQuery load()는 특정 URL의 리소스를 요청하고, 응답을 HTML로 변환하여 지정된 DOM 요소에 로드합니다. 💡 ajax (Asynchronous JavaScript and XML) (에이싱크러너스 자바스크립트 앤 xml) 비동기 방식의 자바스크립트와 xml 동기방식: 서버에 신호를 보냈을때 응답이 돌아와야 다음 동작을 수행 비동기방식: 신호를 보냈을때 응답여부와 상관없이 다음 동작 실행 💡Ajax(Asynchronous Javascript and XML)는 클라이언트 가 비동기방식으로 자바스크립트를 이용하여 > 화면 … 더 읽기
탭(Tab) 메뉴 UI 내부에서 슬릭(Slick) 라이브러리를 활용한 캐러셀(Carousel, 슬라이드)과 매그니픽 팝업(Magnific Popup) 라이브러리를 활용한 라이트박스(Lightbox, 이미지 확대 모달)를 결합하는 구현 방법을 다룬다. 탭 전환 시 보이지 않는 영역의 슬라이더가 겪는 너비 계산 오류를 해결하고, 각 탭에 독립된 슬라이더와 팝업 기능을 안정적으로 연동하는 과정을 설명한다. HTML, CSS, 자바스크립트(JavaScript)로 나누어 마크업 구조부터 플러그인 재초기화 로직까지 단계별로 살펴본다. … 더 읽기
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> … 더 읽기
1. 탑버튼 탑버튼(Top Button, 상단 이동 버튼)은 세로로 긴 웹페이지에서 사용자가 스크롤을 내렸을 때 클릭 한 번으로 문서 최상단으로 되돌아갈 수 있도록 돕는 인터페이스 요소이다. 스크롤 위치에 따라 화면에 동적으로 표시되거나 사라지며, 클릭 시 부드러운 스크롤 애니메이션과 함께 시작 지점으로 이동하는 기능을 제공한다. 본 문서에서는 제이쿼리(jQuery) 라이브러리를 활용한 구현 방식과 순수 자바스크립트(Vanilla JavaScript, 바닐라 자바스크립트)를 … 더 읽기
롤링 슬라이드 배너는 한정된 영역 안에서 여러 개의 이미지나 콘텐츠를 일정 개수만큼 순차적으로 노출하는 사용자 인터페이스(UI, User Interface) 요소다. 웹 페이지의 공간을 효율적으로 활용하면서 여러 시각 자료를 정돈된 형태로 보여줄 때 사용된다. 이 글에서는 HTML로 배너와 이동 버튼의 뼈대를 구성하고, CSS의 플렉스박스(Flexbox)와 넘침 영역 숨김 속성을 활용해 기본 구조를 스타일링하는 과정을 설명한다. 1. HTML 마크업 … 더 읽기
메가메뉴(Mega Menu)는 대분류 하위에 속한 세부 메뉴 항목들을 다단(Multi-column) 형태로 한눈에 보여주는 내비게이션(Navigation) 구조다. 본 글에서는 웹 표준 시맨틱 태그(Semantic Tag)와 플렉스박스(Flexbox)를 활용하여 2단계 메가메뉴의 마크업과 스타일을 제작하고, 자바스크립트(JavaScript)를 통해 마우스 및 키보드 인터랙션과 상단 고정(Sticky) 기능을 구현하는 전 과정을 설명한다. 미리보기 HTML HTML(에이치티엠엘) 코드는 전체 메뉴의 계층 구조를 정의한다. 최상위 내비게이션 영역인 <nav class=”nav”> … 더 읽기
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(() => … 더 읽기
1. 아코디언메뉴 아코디언 메뉴(Accordion Menu)는 상위 항목을 선택했을 때 하위 콘텐츠가 접히거나 펼쳐지는 사용자 인터페이스(UI) 구성 요소다. 아코디언 악기의 주름상자가 늘어나고 줄어들 듯이, 제한된 화면 공간 안에서 메뉴 영역을 효율적으로 확장하고 축소하는 데 사용된다. 각 상위 메뉴마다 포함된 하위 항목의 개수가 다를 때 고정된 높이를 부여하면 내용이 잘리거나 불필요한 여백이 발생하므로, 스크립트를 통해 하위 메뉴의 … 더 읽기
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. … 더 읽기
웹 페이지에서 사용자가 스크롤을 내릴 때 상단 내비게이션(Navigation, 메뉴 영역)을 화면 상단에 고정하고, 현재 뷰포트(Viewport, 화면 표시 영역)에 노출된 본문 구역(Section)에 맞춰 해당 메뉴 항목을 활성화하는 기능을 다룬다. 사용자의 스크롤 위치를 감지하여 상단 메뉴와 사이드 내비게이션에 활성 클래스를 부여하는 방식을 제이쿼리(jQuery)와 순수 자바스크립트(Vanilla JavaScript) 두 가지 코드로 각각 구현한다. 1. 메뉴활성화 1.1. 단계1-상단메뉴 1.1.1. 스티키 … 더 읽기
