UI 컴포넌트

게슈탈트이론

6월 26, 2026 작성자:

게슈탈트(Gestalt) 이론이란? 막스 베르트하이머(Max Wertheimer)의 이론으로, 우리의 뇌는 구성요소들을 개별적으로 보기에 앞서 그 윤곽이나 패턴, 형태적 차이를 먼저 파악하려는 습성을 지녔다는 이론입니다. 우리의 뇌는 구성요소들을 개별적으로 보기에 앞서서 그 윤곽이나 패턴 형태적 차이를 먼저 파악하려는 습성을 지녔다 4가지 원칙 유사성의 원리 근접성의 원리 연속성의 원리 공통영역의 원리 유사성의 원리 색, 모양, 크기가 유사한 요소들을 하나의 … 더 읽기

topBtn

6월 26, 2026 작성자:

1. 탑버튼 페이지 상단으로 이동하는 탑버튼을 만들어보자 1.1. 제이쿼리 완성화면 지시문 탑버튼을 만들어보자 HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> </head> <body> <div class="dummy"> <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore … 더 읽기

rollingBanner

6월 26, 2026 작성자:

롤링 슬라이드 배너를 구현해보자 HTML <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> </head> <h1>롤링 슬라이드 배너 만들기</h1> <div id="banner_wrap"> <div id="frame"> <ul id="banner"> <li> <a href="#"><img src="roll/1.png" alt="사진1" /></a> </li> <li> <a href="#"><img src="roll/2.png" alt="사진1" /></a> </li> <li> <a href="#"><img src="roll/3.png" alt="사진1" /></a> </li> <li> <a href="#"><img src="roll/4.png" alt="사진1" /></a> </li> <li> <a href="#"><img src="roll/5.png" alt="사진1" /></a> … 더 읽기

미리보기 HTML “`html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2단계 메가메뉴</title> <link rel="stylesheet" href="menu.css"> </head> <body> <nav class="nav"> <ul class="menu"> <li class="item"> <a href="#" class="link">카테고리1</a> <div class="mega"> <div class="row"> <div class="col"> <h3>서브1-1</h3> <ul> <li><a href="#">항목1</a></li> <li><a href="#">항목2</a></li> <li><a href="#">항목3</a></li> </ul> </div> <div class="col"> <h3>서브1-2</h3> <ul> <li><a href="#">항목1</a></li> <li><a href="#">항목2</a></li> <li><a … 더 읽기

stickyMenu

6월 26, 2026 작성자:

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:' + win.scrollTop()); }); Vanilla “`js const win = window; const secondP = document.getElementsByTagName('p')[1]; function throttle(func, delay) { let timeoutId; return function (…args) { if (!timeoutId) { timeoutId = setTimeout(() … 더 읽기