메가메뉴(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. 스티키 … 더 읽기
스킬바 UI 스킬바는 포트폴리오 사이트에서 기술 숙련도를 시각적으로 보여주는 UI 요소이다. 스크롤 위치에 따라 막대나 원이 채워지는 애니메이션을 구현한다. 1. 막대형 스킬바 스크롤이 특정 위치에 도달하면 막대가 늘어나면서 퍼센트 숫자가 올라가는 애니메이션이다. jQuery 3 기반의 막대형 스킬바를 만들어줘. 조건은 다음과 같아. 1) 프로그레스 바 3개를 세로로 배치하고, 각각 목표 퍼센트를 data-rate 속성으로 지정한다(30%, 90%, 60%). … 더 읽기
리액트(React) 기반 애플리케이션을 구동할 때 터미널(Terminal) 콘솔에 바벨(Babel) 관련 의존성 경고 메시지가 출력되는 경우가 있다. 이 글은 `babel-preset-react-app`에서 발생하는 `@babel/plugin-proposal-private-property-in-object` 패키지 누락 경고의 원인을 파악하고 이를 해결하는 방법을 다룬다. 프로젝트의 개발 의존성(DevDependencies) 설정을 수정하여 경고 메시지를 제거하고 안정적인 개발 환경을 유지하는 방법을 설명한다. 터미널 경고 메시지 확인 터미널 창에 아래와 같은 메시지가 뜰때 One of … 더 읽기
Windows(윈도우) 운영체제 환경에서 Node.js(노드제이에스) 패키지를 관리하기 위해 npm 명령어를 실행할 때 스크립트 실행 권한 오류가 발생할 수 있다. 터미널에 “이 시스템에서 스크립트를 실행할 수 없으므로 npm.ps1 파일을 로드할 수 없습니다”라는 오류 메시지가 나타나는 현상이 대표적이다. 이는 시스템 보안을 담당하는 PowerShell(파워셸)의 기본 보안 정책이 스크립트 파일 실행을 차단하도록 설정되어 있기 때문에 일어난다. 이 글에서는 오류의 원인을 … 더 읽기
Node.js(노드제이에스) 환경에서 npm(엔피엠: Node Package Manager) 패키지를 전역으로 설치하거나 업데이트할 때 errno -13 오류가 발생할 수 있다. 이 오류는 운영체제에서 보호하는 시스템 디렉터리에 새로운 파일을 기록할 권한이 부족하여 나타나는 허가 거부(EACCES) 현상이다. 본 교안에서는 해당 오류가 발생하는 구조적 원인을 분석하고, 관리자 권한 실행 및 디렉터리 소유권 수정을 통해 안전하게 문제를 해결하는 과정을 다룬다. 1. 오류 … 더 읽기
💡 Dependency 충돌이 발생하거나 모듈에서 제공하는 기능의 일부를 수정하고 싶을때 아래의 방법을 사용. 해당 모듈의 배포 git repository 를 찾는다 모듈명을 웹에서 검색하거나 아래의 방법으로 찾는다. fork 를 클릭 설치한다 npm install git+"https://github.com/qwerewqwerew/react-notion-x.git" package.json 에서 의존성 주소 수정하기 초기 의존성은"react-native-nmap": "^0.0.66" 이와 같이 버전 정보만 표기되어 있는데, 이는 단순히 npm 패키지 저장소에서 해당 버전을 찾아 가져오기 … 더 읽기
