테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

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

Masterhwan마스터환 9개월 전 조회 1,325
답변 1
목록

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

 

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

#그누보드5
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
glitter0gim
glitter0gim
9개월 전

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

</p>

<p>.gnb_wrap {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}</p>

<p>#gnb_1dul {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

}</p>

<p>.gnb_1dli {

    text-align: center;

    padding: 5px 15px; /* 좌우 간격 조정 */

}</p>

<p>#gnb_all {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}</p>

<p>.gnb_al_ul {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

}</p>

<p>.gnb_al_li {

    padding: 5px 10px;

    text-align: center;

}</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 32개

M
Masterhwan마스터환
9개월 전
위 코드는 전혀 작동을 안하는거 같아요 ㅠ 변화 되게 없네요ㅠ
g
glitter0gim
9개월 전
위 코드를 참고하여, 적용하시려는 클래스를 커스텀하셔야겠죠?~
＊버튼 좌로 보내는 스타일[code]
#gnb_all {
position: relative;
}

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

＊벽돌 한 장까지 요구하시려면, https://sir.kr/request
M
Masterhwan마스터환
9개월 전
감사합니다!
덕분에 해결 했습니다...

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

그리고 마지막으로 버튼 클릭했을때 나오는 메뉴를 한줄에 하나씩 나오게 할 수 있을까요?
g
glitter0gim
9개월 전
모바일에서 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]
g
glitter0gim
9개월 전
한 줄에 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]
M
Masterhwan마스터환
9개월 전
감사합니다!
정말 마지막으로 세로 간격과 가로 길이를 줄일 수 있을까요....?
g
glitter0gim
9개월 전
님의 프로젝트에 세로나 가로의 간극들이 많은데,
어디를 긁어 드릴까요?
M
Masterhwan마스터환
9개월 전
세로 가로 모두 간극을 줄이고 싶습니다..
g
glitter0gim
9개월 전
님의 링크 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]
M
Masterhwan마스터환
9개월 전
위코드 적용 했더니 메뉴만 2줄로 되고 3줄 클릭 했을때 나오는 흰 배경에 전체메뉴 창 크기는 그대로네요...
세로 간격도 동일하구욤...
M
Masterhwan마스터환
9개월 전
3줄 클릭 했을때 흰 배경의 전체메뉴 창(?)도 메뉴 길이에 맞춰 작게 나오게 가능 할까요?
g
glitter0gim
9개월 전
ㅠㅠ
저의 구조물이 아니니, 세세한 꾸밈을 제가 할 수는 없지 않나 싶습니다.
M
Masterhwan마스터환
9개월 전
네 알겠습니다. 좋은 하루 되세요
g
glitter0gim
9개월 전
행복하세요~
M
Masterhwan마스터환
9개월 전
혹시 3줄 클릭 했을 때 나오는 메뉴 부분 정식 명칭 알 수 있을까요? 찾아 보려구요
g
glitter0gim
9개월 전
쪽지 드렸습니다.
M
Masterhwan마스터환
9개월 전
감사합니다
M
Masterhwan마스터환
9개월 전
업로드 했는데 업로드 안되었을까요?
g
glitter0gim
9개월 전
저녁 약속으로 외출 중입니다.
쪽지 드린대로 진행하세요.
M
Masterhwan마스터환
9개월 전
알겠습니다 감사합니다!
M
Masterhwan마스터환
9개월 전
알려주신대로 했는데 제가 이해를 못 한걸까요?
변경된게 없네요...
M
Masterhwan마스터환
9개월 전
재가 아무래도 이해를 못한거 같습니다...
g
glitter0gim
9개월 전
제가 부여한 호스팅에 올려 보세요.
M
Masterhwan마스터환
9개월 전
오후에 www 폴더에 올려 놓았습니다 감사합니다
g
glitter0gim
9개월 전
따로 하위 폴더(www)를 추가하실 필요없으며,
Nginx이니 .htaccesss는 사용할 수 없음을 염두에 두세요.
최상위 root가 'DocumentRoot'입니다.
M
Masterhwan마스터환
9개월 전
그게 무슨 말씀이신지.. 그럼 어떻게 하면 되나요?
g
glitter0gim
9개월 전
이번은 제가 해드릴게요.
. . .
그리고 이후의 개인 대화는 쪽지로~
M
Masterhwan마스터환
9개월 전
감사합니다!
M
Masterhwan마스터환
9개월 전
웹사이트를 어제 생성했고 내용은 입력을 안해서 db가 없는거 같습니다
M
Masterhwan마스터환
9개월 전
포인트가....... ㅠ
M
Masterhwan마스터환
9개월 전
정말 감사합니다. 작업 완료 되시면 다운 받아 업로드 하겠습니다!
M
Masterhwan마스터환
9개월 전
작업 완료 되시면 ftp에서 다운 받아 업로드 하겠습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인