팁·활용

• 목록
• 스크랩

수정 전 백업 안내

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

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

그누보드 기본 메인 메뉴는 기본적으로 왼쪽 정렬로 설정되어 있습니다. 사이트 디자인 스타일에 맞춰 메뉴를 가운데로 정렬하려면 css/default.css 파일(테마 사용 시 theme/basic/css/default.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;
}

메인 메뉴 배경색 가로 100% 채우기

메인 메뉴 배경색을 화면 가로 전체로 확장하고 싶다면 #gnb 영역에 배경색을 지정할 수 있습니다. 다만 배경색 추가 시 오른쪽 영역 끝에 그림자 효과가 어색하게 남을 수 있으므로 필요한 경우 그림자 속성을 조정하거나 삭제해야 합니다.

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

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

수정 후 확인 및 주의사항

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