그누보드 메인 및 서브 페이지 CSS 분리 적용 방법

• 목록
• 스크랩

그누보드 메인 및 서브 페이지 CSS 분리 적용 방법

그누보드에서 메인 페이지와 서브 페이지의 디자인을 다르게 구성하고 싶을 때, CSS 파일을 분리하여 동적으로 로드하는 방법을 안내합니다.

메인 페이지와 서브 페이지 CSS 분리 적용 방법

그누보드에서 메인 페이지와 서브 페이지에 서로 다른 CSS 파일을 적용하려면, 페이지의 성격을 판별하는 _INDEX_ 상수를 활용하여 head.sub.php 파일에서 조건부로 스타일 시트를 로드해야 합니다.

1. 사전 확인 사항

메인 페이지(index.php)에 아래 코드가 포함되어 있는지 확인하십시오. 이 상수가 정의되어 있어야 메인 페이지를 판별할 수 있습니다.

define('_INDEX_', true);

2. head.sub.php 수정

테마를 사용하는 경우 theme/basic/head.sub.php 파일을 열어 기존 CSS 로드 코드 하단에 아래 코드를 추가합니다. 수정 전 반드시 해당 파일을 백업하십시오.

<?php if(defined('_INDEX_')) {?>
 <link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL;?>/mainstyle.css?ver=<?php echo G5_CSS_VER;?>">
<?php } else {?>
 <link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL;?>/substyle.css?ver=<?php echo G5_CSS_VER;?>">
<?php }?>

• 테마를 사용하지 않는 경우: G5_THEME_CSS_URL 대신 G5_CSS_URL 상수를 사용해야 합니다.

3. 모바일 환경 고려

모바일 환경에서도 메인과 서브의 디자인을 분리하려면 각각 전용 CSS 파일을 생성한 후 아래와 같이 분기 처리합니다.

<?php if (G5_IS_MOBILE) {?>
 <link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL;?>/<?php echo defined('_INDEX_')? 'mainstyle_mobile': 'substyle_mobile';?>.css?ver=<?php echo G5_CSS_VER;?>">
<?php } else {?>
 <link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL;?>/<?php echo defined('_INDEX_')? 'mainstyle': 'substyle';?>.css?ver=<?php echo G5_CSS_VER;?>">
<?php }?>

4. 적용 확인

코드 적용 후 브라우저에서 메인 페이지와 서브 페이지에 접속하여 소스 보기(Ctrl+U)를 통해 의도한 CSS 파일이 정상적으로 호출되는지 확인하십시오. 변경 사항이 즉시 반영되지 않는다면 브라우저 캐시 문제일 수 있으므로 Ctrl+F5를 눌러 강제 새로고침 후 확인하시기 바랍니다.

index.php 파일 내 필수 확인 코드

그누보드에서 메인 페이지와 서브 페이지를 구분하여 CSS를 분리 적용하려면, 메인 페이지를 판별하는 상수인 _INDEX_가 정의되어 있어야 합니다. index.php 파일 상단에 아래 코드가 반드시 포함되어 있는지 확인하십시오.

define('_INDEX_', true);

확인 및 조치 방법

1. 코드 존재 여부 확인: index.php 파일을 열어 define('_INDEX_', true); 코드가 있는지 확인합니다.
2. 누락 시 추가: 만약 코드가 없다면, 메인 페이지를 정상적으로 인식하지 못해 CSS 분리 기능이 작동하지 않습니다. 해당 코드를 파일 상단에 추가하십시오.
3. 주의 사항: 이 상수는 그누보드에서 메인 페이지를 판별하는 핵심 기준입니다. 작업 중 실수로 삭제하지 않도록 주의해야 하며, 삭제된 경우 반드시 다시 추가해야 합니다.

이 상수가 정의되어 있어야 head.sub.php 파일에서 defined('_INDEX_') 조건을 통해 메인 페이지와 서브 페이지를 구분하여 서로 다른 CSS 파일을 로드할 수 있습니다.

테마를 사용하지 않는 환경에서는 G5_THEME_CSS_URL 대신 G5_CSS_URL 상수를 사용하여 CSS 파일 경로를 지정해야 합니다.

적용 방법

테마를 사용하지 않는 기본 설치 환경의 head.sub.php 파일에서, 메인 페이지와 서브 페이지를 구분하여 CSS를 로드하는 코드는 다음과 같이 작성합니다.

<?php if(defined('_INDEX_')) {?>
 <link rel="stylesheet" href="<?php echo G5_CSS_URL;?>/mainstyle.css?ver=<?php echo G5_CSS_VER;?>">
<?php } else {?>
 <link rel="stylesheet" href="<?php echo G5_CSS_URL;?>/substyle.css?ver=<?php echo G5_CSS_VER;?>">
<?php }?>

주의사항

• 경로 확인: G5_CSS_URL은 그누보드 설치 경로의 css 폴더를 가리킵니다. 생성한 mainstyle.css와 substyle.css 파일이 해당 경로에 위치해 있는지 확인하십시오.
• 상수 정의: 메인 페이지 판별을 위해 index.php 파일에 define('_INDEX_', true); 코드가 반드시 포함되어 있어야 합니다.
• 백업: 파일을 수정하기 전 반드시 원본 head.sub.php 파일을 백업하시기 바랍니다.

모바일 환경을 고려한 메인/서브 CSS 분리 적용 방법

그누보드에서 메인 페이지와 서브 페이지의 디자인을 분리하고, 모바일 환경까지 고려하여 각각 다른 CSS 파일을 적용하려면 head.sub.php 파일에서 defined('_INDEX_') 상수와 G5_IS_MOBILE 변수를 활용해 조건부로 로드해야 합니다.

1. 사전 확인 사항

• 상수 정의 확인: 메인 페이지를 판별하기 위해 index.php 파일에 define('_INDEX_', true); 코드가 반드시 포함되어 있어야 합니다. 삭제되었다면 다시 추가하십시오.
• 파일 백업: 수정 전 theme/basic/head.sub.php 파일을 반드시 백업하시기 바랍니다.

2. CSS 파일 준비

테마 폴더 내 css 디렉토리에 다음 4개의 파일을 생성합니다.

• PC용: mainstyle.css (메인), substyle.css (서브)
• 모바일용: mainstyle_mobile.css (메인), substyle_mobile.css (서브)

3. head.sub.php 수정

theme/basic/head.sub.php 파일에서 기존 CSS 로드 코드 하단에 아래 코드를 추가합니다. 테마를 사용하지 않는 환경이라면 G5_THEME_CSS_URL 대신 G5_CSS_URL을 사용하십시오.

<?php if (G5_IS_MOBILE) {?>
 <link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL;?>/<?php echo defined('_INDEX_')? 'mainstyle_mobile': 'substyle_mobile';?>.css?ver=<?php echo G5_CSS_VER;?>">
<?php } else {?>
 <link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL;?>/<?php echo defined('_INDEX_')? 'mainstyle': 'substyle';?>.css?ver=<?php echo G5_CSS_VER;?>">
<?php }?>

4. 적용 확인

• 수정 후 메인 페이지와 서브 페이지에 접속하여 브라우저의 '소스 보기'를 통해 의도한 CSS 파일이 호출되는지 확인합니다.
• 변경 사항이 즉시 반영되지 않는다면 브라우저 캐시 문제일 수 있으므로 Ctrl + F5를 눌러 강제 새로고침 후 확인하십시오.

내 상황	선택 기준	다음 행동
테마 사용 중	G5_THEME_CSS_URL 상수	theme/basic/head.sub.php 수정
테마 미사용	G5_CSS_URL 상수	루트 head.sub.php 수정
모바일 환경 포함	G5_IS_MOBILE 변수	모바일 전용 CSS 생성 및 분기 처리

적용 절차

1. 상수 확인: index.php 상단에 define('_INDEX_', true);가 있는지 확인합니다. 없으면 메인 페이지 판별이 불가능합니다.
2. 파일 백업: 수정 전 head.sub.php를 반드시 백업합니다.
3. 코드 분기: 기존 CSS 로드 코드 하단에 아래와 같이 조건문을 추가합니다.

<?php if(defined('_INDEX_')) {?>
 <link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL;?>/mainstyle.css?ver=<?php echo G5_CSS_VER;?>">
<?php } else {?>
 <link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL;?>/substyle.css?ver=<?php echo G5_CSS_VER;?>">
<?php }?>

(테마 미사용 시 G5_THEME_CSS_URL을 G5_CSS_URL로 변경)

Q: 코드를 적용했는데 디자인이 바뀌지 않습니다.

• 브라우저 캐시 문제일 가능성이 높습니다. Ctrl + F5를 눌러 강제 새로고침을 수행하세요. 또한 index.php에 define('_INDEX_', true);가 정상적으로 선언되어 있는지 다시 확인하십시오.

Q: 모바일과 PC를 모두 분리하려면 어떻게 하나요?

• G5_IS_MOBILE 변수를 활용해 4개의 파일(PC메인, PC서브, 모바일메인, 모바일서브)을 각각 분기 처리해야 합니다. head.sub.php에서 if (G5_IS_MOBILE) {... } else {... } 구조를 사용하여 경로를 지정하십시오.

Q: 테마를 사용하지 않는 환경에서 CSS 파일은 어디에 두어야 하나요?

• G5_CSS_URL 상수는 그누보드 설치 경로의 /css 폴더를 가리킵니다. 해당 폴더에 파일을 생성하고 경로를 지정하면 됩니다.

참고자료

기타 참고자료

• gnustudy.com — 메인페이지와 서브페이지 CSS를 다르게 적용하기 - 그누보드팁
• lpla.tistory.com — 그누보드 특정 페이지에서 코드 실행하는 방법
• zzaps.tistory.com — 그누보드에 부트스트랩 적용 - (1)