그누보드 기본 메뉴 GNB 가운데 정렬 및 배경색 설정 방법

• 목록
• 스크랩

그누보드 기본 메뉴 GNB 가운데 정렬 및 배경색 설정 방법

그누보드 기본 메인 메뉴(GNB)의 위치를 가운데로 정렬하고 화면 가로 전체로 배경색을 확장하는 CSS 수정 방법을 안내합니다.

그누보드 GNB 메뉴 가운데 정렬 설정 방법

그누보드 기본 메인 메뉴는 왼쪽 정렬로 설정되어 있습니다. 사용 중인 테마나 환경에 따라 다르지만, 일반적으로 아래 CSS 수정을 통해 가운데 정렬을 적용할 수 있습니다.

1. 수정 전 백업

문제가 발생할 경우를 대비해 CSS 파일을 수정하기 전에 원본 css/default.css 파일을 반드시 백업해야 합니다. 원상복구가 필요할 때는 백업한 파일로 덮어쓰면 원래 상태로 되돌릴 수 있습니다.

2. 수정 파일 경로

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

3. CSS 속성 변경 내용

• #gnb_1dul 선택자에 margin:0 auto !important;와 text-align:center;를 추가합니다.
• .gnb_1dli 선택자의 float:left; 속성을 display:inline-block;으로 변경합니다.

수정할 코드 예시는 다음과 같습니다.

#gnb_1dul {
    margin: 0 auto !important;
    padding: 0;
    width: 970px;
    text-align: center;
    zoom: 1;
}

.gnb_1dli {
    z-index: 10;
    position: relative;
    display: inline-block;
}

4. 수정 후 확인

코드를 수정한 뒤 웹사이트에 변경 사항이 즉시 반영되지 않는다면 브라우저 캐시로 인한 것일 수 있습니다. 브라우저 캐시를 삭제하거나 강력 새로고침(Ctrl + F5)을 진행한 후 메뉴 정렬 상태가 올바르게 적용되었는지 확인합니다.

메인 메뉴 배경색 화면 가로 전체(100%) 설정 방법

메인 메뉴 배경색을 화면 가로 전체로 확장하려면 #gnb 영역에 배경색을 지정합니다. 다만, 이는 테마의 기본 CSS 구조에 따라 적용 방식이 다를 수 있습니다.

수정 대상 선택자 및 코드 예시

css/default.css 파일(테마 사용 시 theme/basic/css/default.css)에서 #gnb 및 #gnb #gnb_1dul 선택자의 스타일을 아래와 같이 설정합니다.

#gnb {
    position: relative;
    background: #253dbe;
}

#gnb #gnb_1dul {
    font-size: 1.083em;
    padding: 0;
    background: #253dbe;
    zoom: 1;
}

주의 사항

배경색을 추가할 때 오른쪽 영역 끝에 그림자 효과가 어색하게 남을 수 있습니다. 이 경우 필요한 경우에 따라 그림자 속성을 조정하거나 삭제해야 합니다.

CSS 수정 후 변경 사항이 반영되지 않을 때 조치 방법

CSS 파일을 수정한 뒤 웹사이트에 변경 사항이 즉시 반영되지 않는다면 브라우저 캐시로 인한 것일 수 있습니다. 이 경우 아래의 방법을 순서대로 진행하여 문제를 해결할 수 있습니다.

1. 조치 방법

• 브라우저 캐시를 삭제합니다.
• 또는 강력 새로고침(Ctrl + F5)을 진행합니다.

2. 다음 확인 사항

• 강력 새로고침이나 캐시 삭제를 진행한 후, 메뉴 정렬 상태와 배경색이 올바르게 적용되었는지 다시 확인합니다.

함께 보면 좋은 글

• 그누보드 전체 게시판 틀(레이아웃) 가운데 정렬 방법

참고자료

기타 참고자료

• mercury-seed.com — 그누보드 기본 메뉴 GNB 가운데 정렬 및 배경색 설정 방법