기본 소스 : happycgi

회원가입

출석체크

마이페이지

CGIMALL

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

홈 > CSS > 기본 소스

현재접속자 명

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

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

소스 의 기초부터 잘 설명이되어 있는 webstoryboy

조회수 : 5,328건

html 소스는 물론이고 css에대한 정보가 가득합니다. 초보들도 알기쉽게 잘 정리 되어 있는 사이트입니다....

Space Facts Card Carousel

조회수 : 1,164건

정보섹션을 카드 형태로 보여주고, 좌우로 넘기며 탐색할 수 있는 인터랙티브한 캐러셀 UI 예제입니다.

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

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

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

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

반응형 확장 이미지 카드

마우스를 올리면 선택한 이미지 카드가 부드럽게 확장되는 반응...

3D 입체 이미지 슬라이드

이미지가 입체적으로 기울어지며 전환되는 3D 이미지 슬라이드입...

미리보기

내용

평점

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

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

해피팀

네티즌

조회수

100 건

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

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

해피팀

네티즌

조회수

101 건

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

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

해피팀

네티즌

조회수

245 건

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

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

해피팀

네티즌

조회수

343 건

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

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

해피팀

네티즌

조회수

429 건

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

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

해피팀

네티즌

조회수

339 건

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

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

해피팀

네티즌

조회수

484 건

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

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

해피팀

네티즌

조회수

420 건

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

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

해피팀

네티즌

조회수

748 건

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

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

해피팀

네티즌

조회수

705 건

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

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

해피팀

네티즌

조회수

1,008 건

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

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

해피팀

네티즌

조회수

963 건

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

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

해피팀

네티즌

조회수

1,374 건

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

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

해피팀

네티즌

조회수

3,136 건

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

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

해피팀

네티즌

조회수

472 건

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

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

해피팀

네티즌

조회수

1,378 건

[기본 소스] 가로 스크롤 갤러리- Horizontal Scrolling Gallery with ScrollTrigger

GSAP ScrollTrigger를 활용해 세로 스크롤을 가로 스크롤 애니메이션으로 변환한 이미지 갤러리

해피팀

네티즌

조회수

1,377 건

[기본 소스] Space Facts Card Carousel

정보섹션을 카드 형태로 보여주고, 좌우로 넘기며 탐색할 수 있는 인터랙티브한 캐러셀 UI 예제입니다.

해피팀

네티즌

조회수

1,164 건

[기본 소스] Flexbox Cheatsheet (플렉스박스 치트시트)

Flexbox를 쉽고 직관적으로 이해할 수 있도록, 각 속성별로 시각적 예제와 결과를 보여주는 가이드

해피팀

네티즌

조회수

1,416 건

[기본 소스] CodePen Home CSS Grid Layout 그리드를 이용한 기본적인 레이아웃 소스

CSS Grid를 이용한 기본적인 웹페이지 레이아웃입니다.

해피팀

네티즌

조회수

472 건

12 3 4