DEVINFO 데빈포 그누보드 포럼 쉽게 찾는 그누보드 실전 정보
BOARD

팁·활용

BOARD 팁·활용

그누보드 기본 테마 레이아웃 전체 가로 폭 변경 방법

페이지 정보

profile_image
작성자 최고관리자
댓글 0건 조회 17회 작성일 26-10-03 16:11

본문

그누보드 기본 테마 레이아웃 전체 가로 폭 변경 방법

그누보드 기본 테마의 고정된 전체 가로 레이아웃 사이즈를 원하는 너비로 수정하려는 운영자와 개발자를 위한 가이드입니다. 파일 경로와 버전에 따른 CSS 수정 방법을 확인하여 레이아웃 폭을 조절할 수 있습니다.

그누보드 기본 테마 레이아웃 전체 가로 폭 변경 방법

그누보드 5.3 및 5.4 버전의 기본 레이아웃 전체 가로 폭은 기본적으로 1200px로 고정되어 있습니다. 이를 사용자가 원하는 너비로 변경하려면 CSS 파일을 수정해야 합니다.

수정 파일 경로

  • 기본 경로: css/default.css
  • 테마 사용 시: theme/basic/css/default.css

수정 절차

  1. 전체 최소 폭 및 푸터 래퍼 너비 변경해당 파일에서 1200px를 검색한 후 아래 코드를 찾아 원하는 사이즈로 모두 변경합니다.
    #hd, #wrapper, #ft{min-width:1200px}
#ft_wr{width:1200px}
  2. 컨테이너 영역 너비 가감 수정버전에 맞는 #container 코드를 찾아 1번에서 변경한 전체 사이즈 크기만큼 width 값을 증감하여 수정합니다.
    • 그누보드 5.3 버전 기준
    #container {z-index:4;position:relative;float:left;min-height:500px;height:auto!important;margin:20px 0;height:500px;font-size:1em;width:875px;zoom:1}
    • 그누보드 5.4 버전 기준
    #container {position:relative;float:left;min-height:500px;height:auto!important;margin:20px 0;height:500px;font-size:1em;width:930px;zoom:1}
    (예: 1200px에서 1000px로 줄일 경우, 1번 항목은 1000px로 수정하고 2번 항목에서는 200px를 빼서 675px(5.3 기준) 등으로 조정합니다.)

주의사항

사용 중인 커스텀 테마나 반응형 미디어쿼리 설정에 따라 추가적인 CSS 수정이 필요할 수 있습니다.

그누보드 5.3 및 5.4 버전 #container width 값 계산 및 수정 방법

그누보드 기본 테마에서 전체 가로 폭(기본 1200px)을 변경할 때는 전체 레이아웃 폭(min-width 및 #ft_wr 등)을 원하는 사이즈로 수정한 뒤, 내부 영역인 #container의 width 값을 전체 사이즈 증감에 맞춰 비례해서 계산하여 수정해야 합니다.

버전별 #container 기본 width 값

  • 그누보드 5.3 버전: 기본 #container width는 875px입니다.
  • 그누보드 5.4 버전: 기본 #container width는 930px입니다.

사이즈 변경 및 계산 예시

전체 가로 폭을 1200px에서 다른 크기로 조절할 때, 전체 폭이 늘어나거나 줄어든 만큼 #container의 width 값도 동일한 크기만큼 가감합니다.

  1. 전체 폭을 줄이는 경우 (예: 1200px → 1000px, 200px 감소)
    • 전체 레이아웃 폭(min-width, #ft_wr 등)을 1000px로 수정합니다.
    • #container width에서 전체 줄어든 수치(200px)를 빼줍니다.
    • 5.3 버전: 875px - 200px = 675px로 수정
  2. 전체 폭을 늘리는 경우 (예: 1200px → 1300px, 100px 증가)
    • 전체 레이아웃 폭을 1300px로 수정합니다.
    • #container width에 전체 늘어난 수치(100px)를 더해줍니다.
    • 5.3 버전: 875px + 100px = 975px로 수정

수정 시 주의사항

  • 수정 파일은 css/default.css (테마 사용 시 theme/basic/css/default.css)입니다.
  • 사용 중인 커스텀 테마나 반응형 미디어쿼리 설정에 따라 추가적인 CSS 수정이 필요할 수 있습니다.

그누보드 기본 테마 레이아웃 전체 가로 폭 변경

내 상황

  • 그누보드 5.3 또는 5.4 버전의 기본 레이아웃 가로 폭(기본 1200px)을 원하는 너비로 조절하고자 함

선택 기준

  • css/default.css (테마 사용 시 theme/basic/css/default.css) 파일 내 고정된 1200px 값과 버전별 #container 너비 값을 수정해야 함

다음 행동

  1. #hd, #wrapper, #ft의 min-width와 #ft_wr의 width 값을 원하는 사이즈로 변경
  2. #container의 width 값을 1번에서 변경한 전체 사이즈 크기만큼 5.3 버전(기본 875px) 또는 5.4 버전(기본 930px) 기준에서 비례하여 증감 수정

실전 FAQ

Q. 커스텀 테마나 반응형 미디어쿼리 설정이 되어 있는 경우 주의할 점은 무엇인가요?

  • A. 사용 중인 커스텀 테마나 반응형 미디어쿼리 설정에 따라 추가적인 CSS 수정이 필요할 수 있습니다. 레이아웃 폭 변경 후 화면이 어긋난다면 테마 내 CSS 파일의 미디어쿼리 영역을 검토하세요.

함께 보면 좋은 글

참고자료

기타 참고자료

댓글목록

등록된 댓글이 없습니다.