스킬바 UI 스킬바는 포트폴리오 사이트에서 기술 숙련도를 시각적으로 보여주는 UI 요소이다. 스크롤 위치에 따라 막대나 원이 채워지는 애니메이션을 구현한다. 1. 막대형 스킬바 스크롤이 특정 위치에 도달하면 막대가 늘어나면서 퍼센트 숫자가 올라가는 애니메이션이다. jQuery 3 기반의 막대형 스킬바를 만들어줘. 조건은 다음과 같아. 1) 프로그레스 바 3개를 세로로 배치하고, 각각 목표 퍼센트를 data-rate 속성으로 지정한다(30%, 90%, 60%). … 더 읽기
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 … 더 읽기
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”> … 더 읽기
