웹솔루션개발 25년 노하우! 해피CGI의 모든것

#카드 슬라이더 #회전형 카드 목록 #카드형 이미지 롤링 #카드 회전 뷰어카드 형식의 콘텐츠를 좌우로 부드럽게 넘길 수 있도록 구성된 이 캐러셀은, 반응형 디자인과 터치/마우스 인터랙션을 지원하여 다양한 환경에서 시각적으로 깔끔한 콘텐츠 탐색을 제공합니다.HTML 구조OUR TEAM ‹ https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=3687&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Team Member 1" /> https://images.unsplash.com/photo-156860247..

Alpine.js를 사용하여 html 블록을 반복 생성하게 만든 디자인 입니다.스크롤 시 설정한 개수 만큼 이미지가 자동으로 출력되게 되어있습니다.자세한 내용은 데모를 확인해 주시기 바랍니다.HTML CSS* { margin: 0; padding: 0; box-sizing: border-box;} .wrapper { background-color: black; padding: 0.5rem;} .gallery { column-count: 1; column-gap: 0.5rem; list-style-type: none; & li { break-inside: avoid; min-height: 30vmin; margin..

안녕하세요 해피CGI 입니다.해피 숙박 실시간예약 웹솔루션 Ver3.8 [입점형]으로 업그레이드 되었습니다.자세한 사항은 아래의 내용을 참고하시기 바랍니다.

마우스를 올리면 디자인이 변경되는 깔끔하고 심플한 느낌의 버튼 효과입니다.응용하여 다양하게 활용 가능합니다.HTML 구조 Hover Swipe CSS 소스* { margin: 0; padding: 0; border-sizing: border-box;} html, body { width: 100%; height: 100%; border: none; outline: none;} body { display: flex; align-items: center; justify-content: center; background-color: #d2f7d3;} #cursor { position: fixed; z-index: 100; left: 0; top: 0; ..

마우스 효과가 들어간 네비게이션 커서 이펙트입니다.응용하여 다양하게 활용 가능합니다.HTML 구조 Home Our Story Studio Contact CSS 소스@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,750,700,800,900&display=swap'); body { margin: 0; padding: 0; cursor: none; font-family: 'Poppins', sans-serif;} .nav-wrapper { width: 100%; height: 100vh; background..

Alpine.js를 사용한 메뉴판 입니다.각 항목을 누르면 숨겨진 메뉴가 출력되는 형식입니다.자세한 내용은 데모를 확인해 주시기 바랍니다. HTMLhttps://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"> CSS* { margin: 0; padding: 0; box-sizing: border-box;} body { height: 100vh..

CSS만으로 콘텐츠 영역에 매끄러운 스크롤바 디자인을 입히고, 라이트/다크 테마와 다양한 사용자 인터랙션에 대응하는 고급 스크롤 UI입니다. HTML 구조 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis culpa repudiandae mollitia praesentium molestiae cupiditate, et labore porro minima placeat cumque debitis sit quidem, dignissimos rerum, quo ex eos laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut facilis perspic..

- 소개동기화된 입력 필드로 듀얼 핸들 범위 선택을 지원하는 가벼운 jQuery 범위 슬라이더 플러그인입니다. 1.34KB에 불과한 이 플러그인은 웹 애플리케이션의 정밀한 범위 제어를 구현합니다.범위 슬라이더를 사용하면 핸들을 드래그하거나 입력 필드를 통해 값 범위를 선택할 수 있습니다. 핸들은 동적 으로 업데이트되고 , 범위 막대는 선택한 값을 반영합니다. 입력 필드는 슬라이더 이동과 동기화되는 동시에 수동 입력도 가능합니다.- 라이센스MIT- 사용 방법1. 트랙, 범위 막대, 핸들을 사용하여 범위 슬라이더 컨테이너를 만듭니다.2. 수동 조정을 위한 입력 필드를 만듭니다.3. 문서에 필요한 jQuery JavaScript 라이브러리를 로드합니다.4. jQuery 다음에 범위 슬라이더의 메인 스크립트를 ..

- 소개onScreen은 요소가 뷰포트에 완전히 또는 부분적으로 들어올 때 CSS3 애니메이션이나 다른 상호작용과 같은 사용자 정의 기능을 트리거할 수 있는 가벼운 jQuery 플러그인입니다.예: 화면에 나타나는 이미지에 애니메이션을 적용하고 싶습니다. 스크롤 위치를 직접 계산하는 대신, 각 이미지에 onScreen 함수를 추가하세요. 이 플러그인은 이미지가 충분히 보일 때만 애니메이션 기능을 실행합니다.- 라이센스MIT- 사용 방법1. jQuery 라이브러리와 onScreen 플러그인 스크립트를 모두 웹 페이지에 포함합니다.2. 추적하려는 요소에서 플러그인을 초기화합니다. 요소가 뷰포트에 진입할 때 실행될 콜백 함수를 정의합니다.3. 다음 옵션을 사용하여 화면의 동작을 사용자 정의하세요.- 작동 화면

로그인, 대시보드, 프로필, 결제 등 다양한 화면 유형을 기준으로 디자인 사례를 제공합니다.버튼, 카드, 네비게이션 등 UI 구성 요소별로 디자인 패턴을 탐색할 수 있습니다.실제 디지털 제품에서 사용된 디자인 솔루션을 분석하여, 실무에 적용 가능한 인사이트를 제공합니다.특히 모바일 화면에 맞춘 UI 패턴과 구성 사례도 많아, 앱 디자이너들이 실무에 바로 적용할 수 있는 인사이트를 얻기 좋습니다.