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

위 코드를 참고하여, 적용하시려는 클래스를 커스텀하셔야겠죠?~
＊버튼 좌로 보내는 스타일

#gnb_all {
    position: relative;
}

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

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

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

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

모바일에서 PC 화면처럼 보이는 문제
미디어 쿼리 추가

@media screen and (max-width: 768px) {
    #gnb_1dul {
        flex-direction: column; /* 모바일에서는 세로 배치 */
        align-items: center; /* 중앙 정렬 */
    }

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

#gnb_all {
    display: none; /* 기본적으로 숨김 */
    flex-direction: column; /* 한 줄에 하나씩 표시 */
}

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

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

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");
        });
    }
});

한 줄에 5개씩 가로로 나오는 문제면, .gnb_al_ul 내부의 li 요소를 세로 정렬하면 됩니다.

#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; /* 위아래 간격 조정 */
}

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

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

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

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

＊각 항목 간격 조정하시려면 padding 값을 사용하세요.

.gnb_al_li {
    width: 90%; /* 가로 길이 조정 (100% → 90%) */
    text-align: center;
    padding: 5px 0; /* 위아래 간격 축소 (기존 10px → 5px) */
}

.gnb_al_ul {
    max-width: 300px; /* 최대 너비 제한 */
}

위코드 적용 했더니 메뉴만 2줄로 되고 3줄 클릭 했을때 나오는 흰 배경에 전체메뉴 창 크기는 그대로네요...
세로 간격도 동일하구욤...

3줄 클릭 했을때 흰 배경의 전체메뉴 창(?)도 메뉴 길이에 맞춰 작게 나오게 가능 할까요?

ㅠㅠ
저의 구조물이 아니니, 세세한 꾸밈을 제가 할 수는 없지 않나 싶습니다.

네 알겠습니다. 좋은 하루 되세요

행복하세요~

혹시 3줄 클릭 했을 때 나오는 메뉴 부분 정식 명칭 알 수 있을까요? 찾아 보려구요

쪽지 드렸습니다.

감사합니다

업로드 했는데 업로드 안되었을까요?

저녁 약속으로 외출 중입니다.
쪽지 드린대로 진행하세요.

알겠습니다 감사합니다!

알려주신대로 했는데 제가 이해를 못 한걸까요?
변경된게 없네요...

재가 아무래도 이해를 못한거 같습니다...

제가 부여한 호스팅에 올려 보세요.

오후에 www 폴더에 올려 놓았습니다 감사합니다

따로 하위 폴더(www)를 추가하실 필요없으며,
Nginx이니 .htaccesss는 사용할 수 없음을 염두에 두세요.
최상위 root가 'DocumentRoot'입니다.

그게 무슨 말씀이신지.. 그럼 어떻게 하면 되나요?

이번은 제가 해드릴게요.
. . .
그리고 이후의 개인 대화는 쪽지로~

감사합니다!

웹사이트를 어제 생성했고 내용은 입력을 안해서 db가 없는거 같습니다

포인트가....... ㅠ

정말 감사합니다. 작업 완료 되시면 다운 받아 업로드 하겠습니다!

작업 완료 되시면 ftp에서 다운 받아 업로드 하겠습니다