GnuBoard Guide

그누보드는 PHP 기반의 오픈소스 게시판 및 커뮤니티 빌더로, 다양한 커스터마이징 옵션을 제공합니다. 이 가이드는 그누보드에 Tailwind CSS를 추가하고 Startupful에서 제공된 HTML 리소스를 통합하는 방법을 설명합니다.

Step 1: Tailwind CSS 통합

그누보드에서 Tailwind CSS를 사용하려면 관리자 페이지의 환경 설정에서 Tailwind CSS 스크립트를 추가할 수 있습니다. 아래 단계를 따라 설정합니다.

1. 관리자 페이지에서 Tailwind CSS 추가

그누보드 관리자 페이지에 로그인합니다.
상단 메뉴에서 환경 설정 > 기본 환경 설정으로 이동합니다.
설정 페이지를 아래로 스크롤하여 레이아웃 추가 설정 섹션을 찾습니다.
추가 script, css 입력폼에 아래의 코드를 추가합니다.
```
<script src="https://cdn.tailwindcss.com"></script>
```
입력을 완료한 후, 페이지 상단의 확인 버튼을 클릭하여 설정을 저장합니다.

이제 Tailwind CSS가 그누보드 사이트 전역에 적용되어 Tailwind 클래스를 사용할 수 있습니다.

Step 2: Startupful 리소스 적용

Tailwind CSS 스크립트를 추가한 후, Startupful에서 제공된 HTML 리소스를 그누보드 페이지에 삽입하여 디자인을 적용할 수 있습니다.

리소스 적용 방법

Startupful에서 제공된 HTML 리소스를 적용하려면, 파일질라(FTP 클라이언트) 또는 SSH로 서버에 접속하여 직접 코드를 수정해야 합니다.

**파일질라(FTP 클라이언트)**를 사용하여 서버에 접속하거나, VS Code의 SSH 기능을 사용하여 서버에 연결합니다.
원하는 페이지 파일을 찾아 열고, HTML 코드를 수정합니다.
- 예를 들어, /bbs/board.php 파일을 수정하여 게시판 페이지에 Startupful 리소스를 삽입할 수 있습니다.
- <div id="bo_list"> 이전 또는 이후에 Startupful HTML 코드를 삽입하면 게시판 상단 또는 하단에 리소스를 추가할 수 있습니다.

HTML 리소스 삽입 예시

아래는 게시판 상단에 Startupful 리소스를 추가하는 예시입니다.

<!-- Startupful HTML Code Example -->
<div class="custom-startupful-component">
  <h2 class="text-2xl font-bold">Startupful Component</h2>
  <p class="text-gray-700">이곳에 HTML 리소스를 적용합니다.</p>
</div>

이 코드를 적절한 위치에 삽입한 후, 페이지를 새로고침하여 적용 결과를 확인합니다.

Step 3: 전체 넓이 적용 문제 해결

그누보드의 기본 레이아웃 설정으로 인해 Tailwind CSS를 적용한 HTML 리소스가 전체 넓이로 표시되지 않을 수 있습니다. 이 경우, 컨테이너 스타일을 조정하여 전체 넓이를 적용할 수 있습니다.

CSS 파일 수정: /theme/basic/style.css 또는 사용자 정의 CSS 파일에 아래와 같은 코드를 추가하여 Tailwind CSS 레이아웃이 전체 넓이로 표시되도록 설정합니다.
```
.custom-startupful-component {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
```
Tailwind 클래스 사용: HTML 코드 내에서 w-full, max-w-full 클래스를 사용하여 전체 넓이로 설정할 수도 있습니다.
```
<div class="custom-startupful-component w-full max-w-full">
    
</div>
```

이렇게 하면, Startupful 리소스가 그누보드 페이지에서 전체 넓이로 표시됩니다.

추가 팁: 그누보드에서의 Tailwind CSS 커스터마이징

그누보드에서 Tailwind CSS의 기본 설정을 커스터마이징하여 맞춤형 스타일을 적용할 수 있습니다. Tailwind 설정을 수정하려면 아래와 같이 <script> 태그 내에서 tailwind.config를 추가할 수 있습니다.

<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          primary: '#1a202c',
          secondary: '#2d3748',
        }
      }
    }
  }
</script>
<script src="https://cdn.tailwindcss.com"></script>

이렇게 하면, Tailwind CSS의 기본 색상이나 스타일을 수정하여 그누보드 사이트에 적용할 수 있습니다.

주의사항

그누보드의 일부 기본 CSS와 Tailwind CSS가 충돌할 수 있으므로, 필요한 클래스만 사용하여 스타일을 조정하는 것이 좋습니다.
중요한 변경 사항은 서버에 저장하거나 별도로 백업해두어야, 그누보드 업데이트 시 초기화되는 것을 방지할 수 있습니다.

이 가이드를 통해 그누보드에서 Tailwind CSS와 Startupful 리소스를 통합하여 웹사이트의 디자인을 효과적으로 커스터마이징할 수 있습니다. Tailwind CSS 설정과 HTML 리소스를 활용해 유연하게 스타일을 조정해 보세요.