Bulma + Alpine.js
현대적인 웹 개발을 위한 완벽한 조합
CSS 프레임워크 Bulma와 JavaScript 프레임워크 Alpine.js를 활용한 다양한 예제들을 살펴보세요
주요 특징
Bulma CSS
현대적이고 반응형인 CSS 프레임워크로 아름다운 UI를 빠르게 구축할 수 있습니다.
Alpine.js
가벼우면서도 강력한 JavaScript 프레임워크로 인터랙티브한 기능을 쉽게 추가할 수 있습니다.
실용적 예제
실제 프로젝트에서 바로 사용할 수 있는 다양한 컴포넌트와 패턴들을 제공합니다.
샘플 페이지
다양한 웹 애플리케이션 패턴을 살펴보세요
컴포넌트
UI 컴포넌트 모음
모달, 드롭다운, 탭, 알림 등 다양한 Bulma 컴포넌트들을 Alpine.js로 제어하는 방법을 배워보세요.
폼 예제
동적 폼 처리
유효성 검사, 동적 필드 추가, 실시간 미리보기 등 고급 폼 기능들을 구현해보세요.
대시보드
데이터 시각화
실시간 통계, 차트, 활동 피드 등을 포함한 관리자 대시보드를 만들어보세요.
쇼핑몰
전자상거래
상품 목록, 필터링, 장바구니, 위시리스트 등 쇼핑몰의 핵심 기능들을 구현해보세요.
할일 관리
생산성 도구
CRUD 기능, 필터링, 정렬, 로컬 스토리지 등을 활용한 완전한 할일 관리 앱입니다.
더 많은 예제
추가 샘플들
그리드 레이아웃, 기타 샘플 페이지들도 확인해보세요.
시작하기
개발 환경 실행
# 의존성 설치
yarn install
# 개발 서버 시작
yarn dev
# 프로덕션 빌드
yarn build
기술 스택
- Bulma CSS - 현대적인 CSS 프레임워크
- Alpine.js - 가벼운 JavaScript 프레임워크
- Pug - HTML 템플릿 엔진
- SCSS - CSS 전처리기
- Node.js - 빌드 시스템