기본 소스 : happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기본 소스

현재접속자 명

it 서비스 사업 및 프로그램등 다양한 분야의 정보 happycgi에서 공유하세요

실제 사용후 테스트한 믿을만한 자료입니다.

빈영역에 세로 및 가운데 정렬 tip

조회수 : 3,389건

빈영역에 div를 위치시킬때 컨텐츠를 세로 및 중앙 정렬을 할 수 있는 팁입니다.

검색 애니메이션

조회수 : 1,804건

검색필드 애니메이션 효과

글자 자르기css (ellipsis,white-space:nowrap)

홈페이지내 제목이 길경우 ... 으로 표시하는 유용한 글자자르기...

단순함을 벗어난 입체감의 폼디자인 CSS

아주 간단한 CSS이지만 초급자를 위한 팁정보! 단순함을 벗어나...

GIF 없이 구현하는 동적 애니메이션 버튼

별도의 GIF 이미지 제작 없이 HTML과 CSS만으로 움직임을 구현한...

Transition API를 활용한 대시보드 화면 전환

Dashboard Transition API를 활용해 그리드 항목과 콘텐츠가 자...

미리보기

내용

평점

[기본 소스] GIF 없이 구현하는 동적 애니메이션 버튼

별도의 GIF 이미지 제작 없이 HTML과 CSS만으로 움직임을 구현한 동적 버튼 예제입니다. 마우스 반응에 따라 버튼 내부 요소가 자연스럽게 움직여 시...

해피팀

네티즌

조회수

15 건

[기본 소스] Transition API를 활용한 대시보드 화면 전환

Dashboard Transition API를 활용해 그리드 항목과 콘텐츠가 자연스럽게 전환되는 인터랙션 예제입니다. 화면 구성 변경 시 요소의 위치와 크기가 부...

해피팀

네티즌

조회수

18 건

[기본 소스] 그리드 재배치 애니메이션CSS

CSS만으로 그리드 요소가 자연스럽게 이동하는 애니메이션 예제입니다.

해피팀

네티즌

조회수

129 건

[기본 소스] GSAP 탭 콘텐츠 애니메이션(Tab content toggle)

GSAP과 SplitText를 활용해 탭 콘텐츠가 부드럽게 전환되는 인터랙션 예제입니다. 탭 클릭 시 문장이 줄 단위로 움직이며 자연스럽게 교체되는 효과...

해피팀

네티즌

조회수

294 건

[기본 소스] 반응형 확장 이미지 카드

마우스를 올리면 선택한 이미지 카드가 부드럽게 확장되는 반응형 카드 UI입니다. 자바스크립트 없이 CSS만으로 이미지 강조 효과와 설명 노출 효과...

해피팀

네티즌

조회수

286 건

[기본 소스] 3D 입체 이미지 슬라이드

이미지가 입체적으로 기울어지며 전환되는 3D 이미지 슬라이드입니다. 포트폴리오, 갤러리, 상품 이미지 영역 등에 활용하기 좋습니다.

해피팀

네티즌

조회수

278 건

[기본 소스] 스크롤 상태 기반 Sticky 네비게이션 UI

스크롤 위치에 따라 네비게이션 상태와 스타일이 동적으로 변화하는 인터랙션 UI. @container scroll-state와 scroll-timeline을 활용한 최신 CSS 구...

해피팀

네티즌

조회수

377 건

[기본 소스] 스크롤 인터랙션 확장형 이미지 갤러리 UI

스크롤 및 hover 인터랙션에 반응하여 이미지 영역이 확장되는 갤러리 UI. CSS Grid와 :has() 선택자를 활용한 현대적인 인터랙션 구현.

해피팀

네티즌

조회수

805 건

[기본 소스] 3D 이미지 큐브 갤러리 인터랙션 효과

마우스 움직임에 반응하여 이미지 큐브가 입체적으로 움직이는 3D 갤러리 인터랙션 효과

해피팀

네티즌

조회수

578 건

[기본 소스] CSS만으로 구현한 인터랙티브 3D 카드 효과

마우스 움직임에 따라 카드가 기울어지며 입체적으로 반응하는 3D 인터랙션 효과

해피팀

네티즌

조회수

483 건

[기본 소스] 원형 애니메이션 타임라인 스크롤 갤러리

카드를 스크롤하면서 원형 애니메이션 효과로 강조되는 갤러리 UI 구현 예제입니다.

해피팀

네티즌

조회수

651 건

[기본 소스] 텍스트 프레임 테두리 애니메이션 회전 (CSS & SVG 기반)

CSS와 SVG만으로 구현된 회전형 텍스트 프레임 애니메이션 데모. 텍스트가 프레임 가장자리를 따라 움직이며 시각적으로 반복 회전하는 효과를 보여줍...

해피팀

네티즌

조회수

572 건

[기본 소스] :has()로 만드는 커스텀 커서 인터랙션 데모

마우스 오버 대상에 따라 커서 모양/텍스트/아이콘이 바뀌는 CSS+JS 예제

해피팀

네티즌

조회수

888 건

[기본 소스] 육각형(벌집) 그리드 갤러리 CSS 데모

CSS Grid 기반의 육각형 이미지 레이아웃 예제(호버 효과 포함)

해피팀

네티즌

조회수

881 건

[기본 소스] 원형 구조로 배치된 인포그래픽 UI 패턴

여러 개의 정보를 원형 형태로 배치해 시각적으로 정리된 구조를 보여주는 인포그래픽

해피팀

네티즌

조회수

1,214 건

[기본 소스] SVG와 CSS-Doodle을 활용해 만들수 있는 클래식 기하학 패턴

SVG와 CSS-Doodle을 활용해 화면 전체에 반복되는 클래식 기하학 패턴을 구현한 예제입니다. 원형 도형을 기반으로 규칙적인 타일 형태의 패턴을 HTML...

해피팀

네티즌

조회수

1,144 건

[기타효과] 인터랙티브 탄성(Elastic) 호버 메뉴 애니메이션

마우스 호버 시 부드럽게 늘어나는 탄성 효과가 적용된 CSS + JS 기반 메뉴 인터랙션입니다. 감각적인 네비게이션 UI 구성에 적합합니다.

해피팀

네티즌

조회수

1,761 건

[기본 소스] CSS 기반 3D 페이지 플립 인터랙션

마우스 호버 또는 클릭으로 책장을 넘기는 듯한 자연스러운 3D 효과를 구현한 UI 예제입니다. 순수 HTML/CSS로 구성되어 가벼우며, 웹진·포트폴리오...

해피팀

네티즌

조회수

3,388 건

[기본 소스] https://codepen.io/argyleink/pen/ZYQbroz

그리드 안의 박스 개수 변화에 따라 레이아웃이 유연하게 재배치되는 기능

해피팀

네티즌

조회수

518 건

[기본 소스] Vue.js 반응형 셔플 이미지 갤러리

Vue.js를 활용해 반응형으로 동작하며, 이미지 배열을 셔플(Shuffle)하는 갤러리

해피팀

네티즌

조회수

1,564 건

12 3 4