iBoard Core Layout Settings

iBoard Core Layout Settings는 iBoard 게시판 페이지에서 공통으로 사용하는 레이아웃 영역, 스크립트, 스타일을 관리하는 기능입니다. 이 Core는 일반 페이지에서 사용하는 Page Core와 다릅니다.

이 기능은 게시판 기준의 공통 영역을 관리합니다. 예를 들어 모든 게시판 상단에 같은 배너, 광고, 안내문을 넣거나, 모든 게시판에 공통 JavaScript 또는 CSS를 적용하고 싶을 때 사용합니다.

화면 개요

iBoard Core는 게시판에서 사용하는 공통 레이아웃 영역을 제어합니다. 게시판 목록, 게시글 보기, 글쓰기 화면, 공지 영역, 추천/투표 영역, 게시판 메뉴 영역 등 게시판 관련 화면 주변에 공통 콘텐츠를 넣을 수 있습니다.

게시판 스킨이나 각 게시판 페이지를 하나씩 수정하지 않고, 이 화면에서 게시판 공통 영역을 한 번에 관리할 수 있습니다.

언제 사용하는가

게시판 관련 페이지 전체에 같은 콘텐츠나 동작을 적용하고 싶을 때 iBoard Core Layout Settings를 사용합니다.

• 모든 게시판 상단에 공통 배너를 표시할 때
• 게시판 콘텐츠 아래에 광고를 표시할 때
• 모든 게시판에 공통 JavaScript 동작을 적용할 때
• 게시판 레이아웃에 공통 CSS 스타일을 적용할 때
• 공지 영역 위나 아래에 공통 안내문을 넣을 때
• 게시판 스킨에서 사용하는 메뉴 영역을 공통으로 꾸밀 때
• 추천 또는 투표 영역 주변에 재사용 가능한 HTML을 넣을 때

변경 내용이 게시판 페이지에만 적용되어야 한다면 iBoard Core를 사용하세요. 일반 웹페이지 전체 레이아웃에 적용해야 한다면 Page Core를 사용해야 합니다.

화면 구성

Core Layout Settings 화면은 왼쪽 가이드 메뉴와 오른쪽 메인 편집 영역으로 구성됩니다. 메인 편집 영역에는 게시판 레이아웃의 각 공통 영역을 수정할 수 있는 탭이 있습니다.

Core Layout Sections

각 탭은 iBoard 게시판 페이지에서 사용하는 공통 영역을 의미합니다. 각 영역에 입력한 내용은 관련 게시판 레이아웃 위치에 출력됩니다.

예시: 모든 게시판 상단에 배너 넣기

모든 게시판 페이지 상단에 같은 배너를 표시하려면 Top Area에 배너 HTML을 입력합니다.

<div class="iboard-common-banner">
    <strong>Announcement</strong>
    <p>Please review the latest updates before posting.</p>
</div>

필요한 경우 Style Sheet 영역에 스타일을 추가합니다.

.iboard-common-banner {
    padding: 18px 20px;
    margin-bottom: 20px;
    border: 1px solid #dbe7f5;
    background: #f3f8ff;
    border-radius: 12px;
}

.iboard-common-banner strong {
    display: block;
    margin-bottom: 6px;
}

예시: 모든 게시판에 JavaScript 적용하기

게시판 페이지에 공통 JavaScript 동작을 넣고 싶다면 Script 영역에 코드를 입력합니다.

document.addEventListener("DOMContentLoaded", function () {
    console.log("iBoard common script loaded.");

    document.querySelectorAll(".iboard-common-banner").forEach(function (banner) {
        banner.setAttribute("data-loaded", "true");
    });
});

Script 영역에 입력한 JavaScript는 이 iBoard Core를 사용하는 게시판 페이지 전체에 영향을 줄 수 있습니다. 운영에 적용하기 전 반드시 테스트하세요.

예시: 게시판 하단에 광고 넣기

모든 게시판 콘텐츠 아래에 광고를 표시하려면 원하는 위치에 따라 Bottom Area 또는 Main Bottom Area를 사용합니다.

<div class="iboard-bottom-ad">
    <a href="/promotion">
        <img src="/iBoard/Media/banner/board-ad.jpg" alt="Promotion">
    </a>
</div>

Save Settings

섹션을 수정한 후에는 Save Settings 버튼을 클릭하여 iBoard Core Layout 설정을 저장합니다.

권장 작업 순서

1. 적용하려는 내용이 게시판 페이지에만 해당하는지 먼저 확인합니다.
2. Admin > iBoard > Setting Core 메뉴로 이동합니다.
3. 적용할 위치에 맞는 레이아웃 섹션을 선택합니다.
4. Top Area, Bottom Area, Main Top Area 같은 HTML 영역에 필요한 코드를 입력합니다.
5. 게시판 공통 동작이 필요한 경우에만 Script 영역에 JavaScript를 입력합니다.
6. 게시판 전용 스타일은 Style Sheet 영역에 입력합니다.
7. Save Settings를 클릭합니다.
8. 여러 게시판 페이지를 열어 콘텐츠가 정상 출력되는지 확인합니다.
9. 운영 게시판에 영향을 주는 변경이라면 여러 스킨과 게시판 타입에서 테스트합니다.

자주 사용하는 예시

주의사항

• 이 Core는 일반 페이지용이 아니라 iBoard 게시판 레이아웃용입니다.
• 변경 내용은 여러 게시판에 동시에 영향을 줄 수 있습니다.
• Script에 입력한 코드는 이 Core를 사용하는 모든 게시판에서 실행될 수 있습니다.
• Style Sheet에 입력한 CSS는 게시판 스킨 스타일을 덮어쓸 수 있습니다.
• 배너나 이미지 경로는 저장 전에 반드시 확인해야 합니다.
• 일부 게시판 스킨은 레이아웃 섹션을 다르게 출력할 수 있습니다.
• 실제 웹사이트에서 사용하는 게시판 스킨으로 반드시 테스트하세요.

문제 해결

관리 권장 사항

• 게시판 전체에 공통으로 필요한 콘텐츠만 이 화면에서 관리하세요.
• 특정 페이지에만 필요한 내용은 이곳에 넣지 않는 것이 좋습니다.
• iboard-common-banner처럼 명확한 CSS 클래스명을 사용하세요.
• JavaScript는 짧고 게시판 목적에 맞게 작성하세요.
• 큰 변경 전에는 기존 코드를 백업하세요.
• 여러 게시판 타입과 스킨에서 테스트하세요.
• 배포나 이전이 필요하면 Create SQL 기능을 사용해 백업하세요.

iBoard Core Layout Settings는 게시판 수준의 공통 콘텐츠와 동작을 관리할 때 유용합니다. 공통 게시판 배너, 광고, 안내문, 스크립트, 스타일을 넣는 용도로 사용하고, 일반 페이지 레이아웃 편집 용도로 사용하지 마세요.