그누보드 메인메뉴를 중앙 정렬하고 싶습니다.

Masterhwan마스터환

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2025-02-07 (금) 00:58:14 1,953

위 사이트의 메인메뉴를 가운데 정렬 하고 싶습니다.

그리고 오른쪽 줄 3개 전체메뉴 버튼을 왼쪽으로 옮기고 버튼 클릭시 나오는 메뉴를 창 가장자리 왼쪽애 뜨게 할 수 있나요?

그누보드5

답변 1개 / 댓글 32개

채택된 답변

+20 포인트

Glitter Gim

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2025-02-07 (금) 01:33:40

css/default.css 또는 theme/basic/css/default.css에 추가하거나 기존 스타일을 수정

Copy

.gnb_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#gnb_1dul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.gnb_1dli {
    text-align: center;
    padding: 5px 15px; /* 좌우 간격 조정 */
}

#gnb_all {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gnb_al_ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.gnb_al_li {
    padding: 5px 10px;
    text-align: center;
}

답변에 대한 댓글 32개

Masterhwan마스터환

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2025-02-07 (금) 01:41:06

위 코드는 전혀 작동을 안하는거 같아요 ㅠ 변화 되게 없네요ㅠ

glitter0gim

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2025-02-07 (금) 01:53:50

위 코드를 참고하여, 적용하시려는 클래스를 커스텀하셔야겠죠?~
＊버튼 좌로 보내는 스타일[code]
#gnb_all {
position: relative;
}

.gnb_close_btn {
position: absolute;
left: 10px; /* 좌측 여백 조정 */
top: 50%;
transform: translateY(-50%);
}
[/code]

＊벽돌 한 장까지 요구하시려면, https://sir.kr/request

Masterhwan마스터환

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2025-02-07 (금) 01:57:42

감사합니다!
덕분에 해결 했습니다...

다만 이렇게 하니 모바일에도 pc 화면으로 보이네요

그리고 마지막으로 버튼 클릭했을때 나오는 메뉴를 한줄에 하나씩 나오게 할 수 있을까요?

glitter0gim

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2025-02-07 (금) 02:01:57

모바일에서 PC 화면처럼 보이는 문제
미디어 쿼리 추가[code]
@media screen and (max-width: 768px) {
#gnb_1dul {
flex-direction: column; /* 모바일에서는 세로 배치 */
align-items: center; /* 중앙 정렬 */
}

.gnb_1dli {
width: 100%; /* 전체 너비 사용 */
text-align: center;
}
}
[/code]

＊ 한 줄씩 ~ 스타일 수정[code]
#gnb_all {
display: none; /* 기본적으로 숨김 */
flex-direction: column; /* 한 줄에 하나씩 표시 */
}

#gnb_all.show {
display: flex; /* 버튼 클릭 시 표시 */
}

.gnb_al_li {
width: 100%;
text-align: center;
padding: 10px 0;
}
[/code]

js/common.js 파일의 맨 아래에 다음 JavaScript 코드를 추가.[code]
document.addEventListener("DOMContentLoaded", function() {
var closeBtn = document.querySelector(".gnb_close_btn");
var gnbAll = document.getElementById("gnb_all");

if (closeBtn && gnbAll) {
closeBtn.addEventListener("click", function() {
gnbAll.classList.toggle("show");
});
}
});
[/code]

glitter0gim

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2025-02-07 (금) 02:35:22

한 줄에 5개씩 가로로 나오는 문제면, .gnb_al_ul 내부의 li 요소를 세로 정렬하면 됩니다.[code]
#gnb_all {
display: none; /* 기본적으로 숨김 */
flex-direction: column; /* 한 줄씩 세로 정렬 */
}

#gnb_all.show {
display: flex; /* 버튼 클릭 시 표시 */
flex-direction: column; /* 한 줄씩 정렬 */
align-items: center; /* 중앙 정렬 */
}

.gnb_al_ul {
display: flex;
flex-direction: column; /* 세로 정렬 */
align-items: center; /* 중앙 정렬 */
width: 100%;
}

.gnb_al_li {
width: 100%; /* 전체 너비 사용 */
text-align: center;
padding: 10px 0; /* 위아래 간격 조정 */
}
[/code]

Masterhwan마스터환

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2025-02-07 (금) 02:44:33

감사합니다!
정말 마지막으로 세로 간격과 가로 길이를 줄일 수 있을까요....?

glitter0gim

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2025-02-07 (금) 02:47:29

님의 프로젝트에 세로나 가로의 간극들이 많은데,
어디를 긁어 드릴까요?

Masterhwan마스터환

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2025-02-07 (금) 02:49:45

세로 가로 모두 간극을 줄이고 싶습니다..

glitter0gim

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2025-02-07 (금) 02:57:40

님의 링크 URL 코드 기준,
메뉴 간의 세로 간격을 줄이고, 가로 너비를 조정하는 방안입니다.

＊각 항목 간격 조정하시려면 padding 값을 사용하세요.[code]
.gnb_al_li {
width: 90%; /* 가로 길이 조정 (100% → 90%) */
text-align: center;
padding: 5px 0; /* 위아래 간격 축소 (기존 10px → 5px) */
}
[/code]
＊가로 크기를 더 줄이고 싶다면, max-width를 설정하세요.[code]
.gnb_al_ul {
max-width: 300px; /* 최대 너비 제한 */
}
[/code]