그누보드 게시판 상/하단 내용 이미지 반응형 CSS 스타일 적용 방법

• 목록
• 스크랩

그누보드 게시판 상/하단 내용 이미지 반응형 CSS 스타일 적용 방법

그누보드 게시판 상/하단 설정에 큰 이미지를 넣었을 때 화면을 벗어나는 문제를 PHP 파일 수정과 CSS 스타일 추가로 해결하는 방법을 안내합니다.

그누보드 게시판 상/하단 이미지 영역 이탈 원인 및 수정 파일

그누보드 게시판 설정 항목에서 상단 내용이나 하단 내용에 큰 사이즈의 이미지를 첨부하면 화면 해상도에 맞게 리사이즈되지 않고 원본 크기 그대로 출력되어 영역을 벗어나는 문제가 발생합니다. 이는 상/하단 내용 출력 부분에 별도의 컨테이너 영역이 지정되어 있지 않기 때문입니다.

1. 수정해야 할 파일 위치

• 상단 내용 수정 파일: bbs/board_head.php
• 하단 내용 수정 파일: bbs/board_tail.php

2. 소스 코드 수정 방법

해당 파일들에서 상/하단 내용 출력 코드를 board_hd_con 클래스를 가진 div 태그로 감싸도록 수정합니다.

상단 내용 수정 예시 (bbs/board_head.php)

기존 코드:

echo html_purifier(stripslashes($board['bo_mobile_content_head']));
echo html_purifier(stripslashes($board['bo_content_head']));

변경 코드:

echo "<div class='board_hd_con'>".html_purifier(stripslashes($board['bo_mobile_content_head']))."</div>";
echo "<div class='board_hd_con'>".html_purifier(stripslashes($board['bo_content_head']))."</div>";

하단 내용 역시 bbs/board_tail.php 파일에서 동일한 방식으로 div 태그 영역을 지정하여 수정합니다.

3. CSS 스타일 추가 및 다음 행동

• CSS 추가: 사용 중인 테마의 default.css 또는 mobile.css 파일에 아래 스타일을 추가하여 이미지의 가로폭을 제한합니다.

  .board_hd_con img {max-width:100%;height:auto}

  * **확인 사항**: 파일을 수정한 후 브라우저에서 게시판 상/하단 이미지가 화면 크기에 맞춰 반응형으로 축소되는지 확인합니다. 만약 테마의 기존 CSS 우선순위 충돌로 스타일이 적용되지 않는지 점검합니다.
  
  ## 그누보드 게시판 상/하단 이미지 반응형 CSS 스타일 적용 방법
  
  그누보드 게시판 설정 항목에서 상단 또는 하단 내용에 큰 사이즈의 이미지를 첨부하면 별도의 영역이 지정되어 있지 않아 원본 크기대로 출력되면서 영역을 벗어나는 문제가 발생합니다. 이를 해결하려면 PHP 파일을 수정해 이미지 주변을 특정 태그로 감싸고, CSS 스타일을 추가해야 합니다.
  
  ### 1. 상단/하단 내용 출력 파일 수정
  
  `bbs/board_head.php` 및 `bbs/board_tail.php` 파일에서 내용을 출력하는 코드를 찾아 `board_hd_con` 클래스를 가진 `div` 태그로 감싸도록 수정합니다.
  
  * **수정 파일:** `bbs/board_head.php` (하단 내용은 `bbs/board_tail.php`를 동일한 방식으로 수정)
  * **수정 전 예시:**
   

   echo html_purifier(stripslashes($board['bo_content_head']));

  • 수정 후 예시:

     echo "<div class='board_hd_con'>".html_purifier(stripslashes($board['bo_content_head']))."</div>";

    모바일 상단 내용(bo_mobile_content_head) 역시 동일한 형식으로 감싸줍니다.

  2. CSS 스타일 추가

  사용 중인 테마의 CSS 파일에 방금 지정한 영역 안의 이미지 가로폭을 제한하는 스타일을 추가합니다.

  • 적용 위치: 사용 중인 default.css, mobile.css 파일
  • 추가할 CSS 코드:

    .board_hd_con img { max-width: 100%; height: auto; }

    
    ### 주의사항 및 다음 행동
    * 사용 중인 테마의 기존 CSS 우선순위 충돌로 인해 스타일이 정상적으로 적용되지 않을 가능성이 있습니다. 적용 후 게시판 화면에서 이미지가 화면 크기에 맞게 정상적으로 조절되는지 확인하세요.
    
    ## 그누보드 CSS 우선순위 충돌 시 대응 방법
    
    사용 중인 테마의 기존 CSS 규칙이나 상위 제어 스타일로 인해 이미지 반응형 스타일이 정상적으로 적용되지 않을 수 있습니다. 이 경우 다음 순서대로 확인하고 조치할 수 있습니다.
    
    ### 1. F12 개발자 도구로 충돌 여부 확인
    브라우저의 F12 개발자 도구를 사용하여 해당 이미지 영역(`board_hd_con` 클래스 등)이 어떻게 표현되고 있는지 확인합니다. 원하는 스타일이 적용되지 않는 원인은 대부분 CSS가 상위에서 제어되거나 다른 규칙과 충돌하기 때문입니다.
    
    ### 2. 스타일 우선순위 조정
    기존 테마의 CSS 우선순위 충돌로 인해 스타일이 덮어씌워지지 않는 경우, CSS 규칙에 `!important` 속성을 추가하여 우선순위를 높일 수 있습니다.
    
    * **적용 예시 (CSS 파일 수정):**
     

    .board_hd_con img {max-width:100%!important; height:auto!important;}

    주의사항: !important 속성은 다른 스타일 규칙보다 우선 적용되므로, 레이아웃 유지보수 시 과도한 사용을 피하고 충돌하는 기존 CSS 선언 위치를 함께 점검하는 것이 좋습니다.

    내 상황

    • 게시판 상·하단 내용에 삽입한 이미지가 화면 해상도에 맞춰 리사이즈되지 않고 영역을 벗어남

    선택 기준

    • 별도의 컨테이너 영역이 지정되지 않은 상태이므로, PHP 파일 수정을 통해 영역을 정의하고 CSS로 가로폭을 제한해야 함

    다음 행동

    1. PHP 수정: bbs/board_head.php 및 bbs/board_tail.php 파일 내 출력 코드를 <div class='board_hd_con'> 태그로 감싸기
    2. CSS 적용: 사용 중인 테마의 default.css 또는 mobile.css 파일에 .board_hd_con img {max-width:100%;height:auto} 스타일 추가

    Q. CSS를 추가해도 이미지가 여전히 화면을 벗어납니다.

    • 원인: 테마의 기존 CSS 규칙이 우선 적용되어 스타일이 덮어씌워질 수 있습니다.
    • 대안: 브라우저 개발자 도구(F12)로 해당 요소의 스타일 적용 상태를 확인한 후, CSS에 !important를 추가하여 우선순위를 높여보세요. (예: max-width:100%!important; height:auto!important;)

    참고자료

    기타 참고자료

    • sir.kr — 게시판 상단내용에 이미지는 반응형이 안되나요? - SIR - 개발자 커뮤니티
    • sir.kr — 게시판 모바일 상단 이미지 반응형 문의 - SIR - 개발자 커뮤니티
    • gnustudy.com — 게시판 상단 내용에 추가한 이미지 가로 100% 설정하기 - 게시판스킨강좌, 그누보드5강좌