그누보드 메뉴 활성화 상태 표시 및 마우스 오버 효과 구현

• 목록
• 스크랩

그누보드 메뉴 활성화 상태 표시 및 마우스 오버 효과 구현

그누보드 환경에서 PHP 서버 변수와 조건문을 활용해 현재 페이지 및 게시판별 메뉴 활성화 상태를 시각적으로 표시하고, CSS :hover를 통해 마우스 오버 효과를 안정적으로 적용하는 방법을 알아봅니다.

현재 페이지 감지 및 조건부 스타일 적용 방법

그누보드 환경에서 PHP의 $_SERVER['PHP_SELF'] 변수를 사용하면 현재 실행 중인 파일의 경로를 가져올 수 있습니다. 이를 활용하여 특정 페이지일 때와 아닐 때의 스타일을 조건문(if-else)으로 분기 처리하여 메뉴 활성화 상태를 표시할 수 있습니다.

코드 예시

<?php if ($_SERVER['PHP_SELF'] == '/greet.php') { ?>
<!-- 현재 페이지일 때 -->
<div class="menu_active">메뉴명</div>
<?php } else { ?>
<!-- 다른 페이지일 때 -->
<div class="menu_default">메뉴명</div>
<?php } ?>

적용 및 확인 절차

1. 적용 전: 수정할 파일을 반드시 백업합니다.
2. 코드 삽입: 위 예시 코드를 메뉴 출력 영역에 맞게 적용합니다.
3. 검증: 적용 후 브라우저에서 각 메뉴를 클릭하여 스타일 변경을 확인합니다. 문제가 발생하면 백업본으로 즉시 복구하십시오.

그누보드 게시판 환경에서 $bo_table을 이용한 메뉴 활성화 방법

그누보드 게시판 환경에서는 $bo_table 변수를 사용하여 현재 사용자가 특정 게시판에 접속 중인지 확인할 수 있습니다. 이를 통해 게시판별로 메뉴의 활성 상태를 동적으로 제어할 수 있습니다.

조건문 적용 예시

특정 게시판(예: 공지사항 게시판, notice)에 접속했을 때와 아닐 때의 스타일을 다르게 지정하려면 아래와 같은 PHP 조건문 코드를 메뉴 영역에 적용합니다.

<?php if ($bo_table == 'notice') { ?>
<div class="active">공지사항</div>
<?php } else { ?>
<div>공지사항</div>
<?php } ?>

적용 및 복구 방법

• 적용 전: 코드를 수정하기 전에 대상 파일을 반드시 백업해야 합니다.
• 적용 후: 브라우저에서 각 메뉴를 클릭하여 현재 페이지에 해당하는 메뉴의 스타일이 의도한 대로 변경되는지 확인합니다.
• 복구 방법: 문제가 발생하면 백업해둔 원본 파일을 복구하여 즉시 정상 상태로 되돌립니다.

마우스 오버 효과 구현 시 CSS :hover 가상 클래스를 사용하는 이유

과거에 사용되던 onMouseOver와 같은 자바스크립트 이벤트 핸들러 방식은 최신 웹 표준과 호환되지 않습니다. 따라서 가급적 CSS의 :hover 가상 클래스를 사용하여 스타일을 정의하는 것이 성능과 유지보수 면에서 권장됩니다.

적용 전 주의사항 및 확인 방법

• 적용 전: 수정할 파일을 반드시 백업해야 합니다.
• 적용 후: 브라우저에서 각 메뉴를 클릭하여, 현재 페이지에 해당하는 메뉴의 스타일이 의도한 대로 변경되는지 확인합니다. 문제가 발생하면 백업해둔 원본 파일을 복구하여 즉시 정상 상태로 되돌릴 수 있습니다.

상황별 판단 및 다음 행동

내 상황	선택 기준	다음 행동
일반 페이지 메뉴 활성화	$_SERVER['PHP_SELF'] 경로 확인	조건문으로 현재 경로와 일치 시 CSS 클래스 적용
게시판 메뉴 활성화	$bo_table 변수 값 확인	게시판 ID와 일치 시 CSS 클래스 적용
마우스 오버 효과 구현	웹 표준 준수	자바스크립트 대신 CSS :hover 사용

자주 묻는 질문

Q. 코드를 수정했는데 메뉴 활성화 상태가 변하지 않습니다.

A. $_SERVER['PHP_SELF'] 값이 실제 경로와 일치하는지 확인하십시오. 경로 앞의 슬래시(/)나 서브 디렉토리 포함 여부에 따라 조건문이 작동하지 않을 수 있습니다.

Q. 수정 후 화면이 깨지거나 오류가 발생합니다.

A. 즉시 백업해둔 원본 파일을 복구하십시오. 이후 PHP 문법(괄호 { } 등)이 올바르게 닫혔는지 확인하십시오.

참고자료

기타 참고자료

• mercury-seed.com — 그누보드 메뉴 활성화 상태 표시 및 마우스 오버 효과 구현