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. 스티키 … 더 읽기
스킬바 UI 스킬바는 포트폴리오 사이트에서 기술 숙련도를 시각적으로 보여주는 UI 요소이다. 스크롤 위치에 따라 막대나 원이 채워지는 애니메이션을 구현한다. 1. 막대형 스킬바 스크롤이 특정 위치에 도달하면 막대가 늘어나면서 퍼센트 숫자가 올라가는 애니메이션이다. jQuery 3 기반의 막대형 스킬바를 만들어줘. 조건은 다음과 같아. 1) 프로그레스 바 3개를 세로로 배치하고, 각각 목표 퍼센트를 data-rate 속성으로 지정한다(30%, 90%, 60%). … 더 읽기
1. gsap gsap공식사이트 gsap코드펜 gsap치트시트 gsap의 모든 기능이 있는 cdn 링크 웹 브라우저에서 애니메이션을 구현하기 위한 자바스크립트 라이브러리 기존 CSS나 순수 자바스크립트보다 탁월한 퍼포먼스를 발휘할 수 있도록 최적화 된 애니메이션 전용 라이브러리이며, HTML5와 Flash 두 개의 플랫폼에서 사용할 수 있다. GreenSock Engaging the Internet GASP은 애니메이션을 쉽게 적용할 수 있는 라이브러리로 탁월한 퍼포먼스로 알려져 있다. … 더 읽기
