GNUboard5 TailwindCSS 테마
GNUboard5의 기본 테마를 Tailwind를 기반으로 현대적이고 반응형 디자인으로 개선한 테마입니다.
주요 특징
- Tailwind CSS 4.0 기반의 현대적 디자인
- 완전 반응형 레이아웃 (모바일/태블릿/데스크톱)
- 깔끔하고 미니멀한 UI/UX
- 접근성 고려한 디자인
- 빠른 로딩 속도
- 커스터마이징 용이
파일 구조
tailwind-theme/
├── css/
│ ├── default.css # 커스터마이징 추가 CSS
│ └── tailwind.css # 빌드된 Tailwind CSS
├── skin/ # 스킨 파일들
│ ├── board/basic/ # 게시판 스킨
│ ├── latest/basic/ # 최신글 스킨
│ ├── outlogin/basic/ # 외부 로그인 스킨
│ ├── poll/basic/ # 설문조사 스킨
│ ├── visit/basic/ # 방문자 통계 스킨
│ └── popular/basic/ # 인기검색어 스킨
│ └── .... # ...
├── node_modules/ # Tailwind 관련 모듈
├── src/ #
├── head.php # 메인 헤더
├── tail.php # 메인 푸터
├── index.php # 메인 페이지
└── head.sub.php # 공통 헤더 (Tailwind CSS 포함)
설치 방법
-
테마 파일 복사
cp -r tailwind-theme /path/to/gnuboard5/theme/
-
관리자 설정
- 관리자 페이지 접속
- 환경설정 > 테마설정
- 테마를 "tailwind-theme"로 선택
-
캐시 클리어
- 브라우저 캐시 삭제
- GNUboard5 캐시 삭제 (필요시)
주요 변경사항
1. CSS 정리
- 기존 CSS 파일들을 최소화하여 Tailwind CSS와의 충돌 방지
- 필수적인 스타일만 유지
- 모든 스타일링을 Tailwind CSS 클래스로 대체
- 별도 모바일 CSS 파일 제거 (Tailwind CSS가 통합 반응형 처리)
2. 레이아웃 개선
- Flexbox와 Grid를 활용한 현대적 레이아웃
- 반응형 사이드바 구현
- 모바일 우선 디자인
3. 컴포넌트 현대화
- 카드 기반 디자인
- 그림자와 둥근 모서리 적용
- 호버 효과와 트랜지션 추가
반응형 디자인
브레이크포인트
- 모바일: `< 576px` (`xs` - extra small)
- 태블릿: `576px - 768px` (`sm` - small), `768px - 992px` (`md` - medium)
- 데스크톱: `992px - 1200px` (`lg` - large), `> 1200px` (`xl` - extra large), `> 1400px` (`xxl` - extra extra large)
주요 반응형 기능
- 모바일: 세로 레이아웃, 햄버거 메뉴
- 태블릿: 2-3열 그리드 레이아웃
- 데스크톱: 사이드바 포함 전체 레이아웃
반응형 클래스 사용법
<!-- 기본 모바일, md에서 변경, lg에서 다시 변경 -->
<div class="fs-6 fs-md-5 fs-lg-4">반응형 텍스트</div>
<!-- 모바일에서는 숨김, md부터 표시 -->
<div class="d-none d-md-block">태블릿 이상에서만 표시</div>
<!-- lg에서만 숨김 -->
<div class="d-lg-none">모바일/태블릿에서만 표시</div>
브라우저 지원
- Chrome: 90+
- Firefox: 88+
- Safari: 14+
- Edge: 90+
- 모바일 브라우저: iOS Safari 14+, Chrome Mobile 90+
라이선스
이 테마는 1Domain 1Copy의 라이선스를 따릅니다.
지원
문제가 발생하거나 개선사항이 있으시면 https://365ok.co.kr 1:1문의를 이용해 주세요.
참고: 이 테마는 GNUboard5의 기본 기능을 모두 유지하면서 디자인만 개선한 것입니다. 모든 기존 기능이 정상적으로 작동하며, Tailwind CSS의 통합 반응형 시스템으로 모든 디바이스에서 최적화된 경험을 제공합니다.
배송
배송 안내 입력전입니다.
교환
교환/반품 안내 입력전입니다.
