🎨 Pleeup Games UI 컴포넌트 테스트
모든 CSS 컴포넌트를 한 페이지에서 확인할 수 있습니다.
📋 카드 (Cards)
다양한 카드 구조를 테스트합니다.
기본 카드 제목
이것은 카드 내용입니다. 여러 줄의 텍스트가 들어갈 수 있습니다.
또 다른 문단 텍스트입니다.
카드 헤더
헤더가 있는 카드
헤더와 바디가 분리된 카드 구조입니다.
완전한 카드 구조
제목
헤더, 바디, 푸터가 모두 있는 완전한 카드입니다.
📝 텍스트 (Typography)
제목 1 (H1)
제목 2 (H2)
제목 3 (H3)
기본 문단 텍스트입니다. Lorem ipsum dolor sit amet consectetur.
음소거된 텍스트 스타일입니다.
중앙 정렬된 텍스트입니다.
📏 간격 (Spacing)
여백 하단 1 (mb-1)
여백 하단 2 (mb-2)
여백 하단 3 (mb-3)
여백 상단 1 (mt-1)
여백 상단 2 (mt-2)
여백 상단 3 (mt-3)
🎮 게임 컴포넌트
🪜 사다리 게임
경로 1
경로 2
경로 3
경로 4
🎯 룰렛 게임
룰렛 휠
� 카드 뽑기 게임
🎁
🎁
🎁
6장의 카드 중 선택!
📝 폼 요소 (Form Elements)
💬 상태 메시지 (Status Messages)
성공 메시지입니다!
경고 메시지입니다!
오류 메시지입니다!
정보 메시지입니다!
🏆 게임 결과 (Game Results)
🎉 당첨!
축하합니다! 치킨 1000원 할인권에 당첨되셨습니다!
😢 아쉬워요!
다음 기회에 도전해보세요!
📊 데이터 테이블 (Data Tables)
| 게임 | 플레이 수 | 당첨 수 | 당첨률 | 액션 |
|---|---|---|---|---|
| 사다리 게임 | 150 | 45 | 30% | |
| 룰렛 게임 | 89 | 22 | 25% |
📱 반응형 테스트 (Responsive Test)
브라우저 창 크기를 조절해서 반응형 동작을 확인해보세요.
아이템 1
아이템 2
아이템 3
아이템 4
🔧 CSS 개발 가이드
이 페이지에서 모든 컴포넌트를 확인하고 /web/css/common.css를 수정하세요.
CSS 수정 후 새로고침하면 모든 변경사항을 바로 확인할 수 있습니다.
메인으로 돌아가기