A2 연습중인데 메뉴 배경색과 서브메뉴 크기, 갤러리 그림 정리에... - 인프런

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Green복지재단</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div class="container">
        <header>
            <div class="header-logo">
                <a href="#none"><img src="images/header-logo.jpg" alt="헤더로고"></a>
            </div>

            <div class="navi">
                <ul class="menu">
                    <li>
                        <a href="#none">재단소개</a>
                        <div class="sub-menu">
                            <a href="#none">설립취지</a>
                            <a href="#none">연혁</a>
                            <a href="#none">찾아오시는길</a>
                        </div>
                    </li>
                    <li>
                        <a href="#none">후원하기</a>
                        <div class="sub-menu">
                            <a href="#none">국내후원</a>
                            <a href="#none">국외후원</a>
                            <a href="#none">맞춤후원</a>
                        </div>
                    </li>
                    <li>
                        <a href="#none">자료실</a>
                        <div class="sub-menu">
                            <a href="#none">서식자료실</a>
                            <a href="#none">사진자료실</a>
                            <a href="#none">후원양식</a>
                        </div>
                    </li>
                    <li>
                        <a href="#none">스토리</a>
                        <div class="sub-menu">
                            <a href="#none">웹진</a>
                            <a href="#none">보고서</a>
                            <a href="#none">나의 후원</a>
                        </div>
                    </li>
                </ul>
            </div>
        </header>
        <div class="slide">
            <div class="slide-items">
                <a href="#none"><img src="images/slide01.jpg" alt="슬라이드"></a>
                <a href="#none"><img src="images/slide02.jpg" alt="슬라이드"></a>
                <a href="#none"><img src="images/slide03.jpg" alt="슬라이드"></a>
            </div>
        </div>
        <div class="contents">
            <div class="news">
                <div class="tab-inner">
                    <div class="btns">
                        <a href="#none">공지사항</a>
                        <a href="#none">갤러리</a>
                    </div>
                    <div class="tabs">
                        <div class="tab1">
                            <a href="#none"> SMS 발송 모바일 서비스 개선작업 안내입니다.<B>2020.01.09</B></a>
                            <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.	<B>2020.01.07</B></a>
                            <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택<B>2019.12.31</B></a>
                            <a href="#none">올앳 시스템 작업 안내<B>2019.12.20</B></a>
                            <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다.<B>2019.12.20</B></a>
                        </div>
                        <div class="tab2">
                             <a href="#none"><img src="images/img1.jpg" alt="이미지1"></a>
                             <a href="#none"><img src="images/img2.jpg" alt="이미지2"></a>
                             <a href="#none"><img src="images/img3.jpg" alt="이미지3"></a>
                        </div>
                    </div>
                </div>
            </div>
                <div class="banner">
                    <a href="#none"><img src="images/banner.jpg" alt="배너"></a>
                </div>
                <div class="shortcut">
                    <a href="#none"><img src="images/shortcut.jpg" alt="쇼컷"></a>
                </div>
            </div>
                    <footer>
            <div class="footer-logo">
                <a href="#none"><img src="images/footer-logo.jpg" alt="푸터로고"></a>
            </div>
            <div class="copyright">
                법적고지 개인정보취급방침 개인정보처리방침

                <br>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장
                <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56
            </div>
            <div class="family-site">
                <select name="" id="">
                    <option value="https://naver.com">네이버</option>
                    <option value="https://daum.net">다음</option>
                </select>
            </div>
        </footer>
        </div>

    </div>
    
    <div class="modal-layer">
        <div class="modal-contents">
            <h1>SNS비회원주문하기 종료 안내</h1>
            <h2>
                안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다.

<br>회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다.</h2>
            <a href="#none" class="close-modal"></a>
        </div> 
    
    <script src="script/jquery-1.12.4.js"></script>
    <script src="script/custom.js"></script>

    </div>
</body>
</html>

@charset "utf-8";


body{
    margin: 0%;
    background-color: #ffffff;
    color: #333333;
}

body a{
    color: #333333;
    text-decoration: none;
}

.container{
    margin: auto;
    width: 1200px;
}

header{

    height: 100px;
}

.header-logo{
    width: 200px;
    float: left;
    padding-top: 20px;
    text-align: center; 
}

.navi{
    border: #333333 1px solid;
    box-sizing: border-box;
    width: 800px;
    float: right;   
}

.contents{
    height: 200px; 
    display: flex;
}

.contents>div{
    width: 400px;
}

footer{
    height: 100px;
    display: flex;
}

.footer-logo{
    width: 200px;
    line-height: 110px;
}

.copyright{
    width: 700px;
    text-align: center;
    padding-top: 10px;    
}

.family-site{
    width: 200px;
    padding-top: 30px;
    padding-left: 60px;
}


.modal-layer{
    display: none;
}

select{
    text-align: center;
}


/* 메뉴 */

 ul.menu{
    list-style: none;
    position: relative;
    z-index: 10;
    padding: 0;
 }

 ul.menu>li {
    float: left;
    text-align: center;
    width: 25%;
 }

 ul.menu>li>a{
    padding: 2px;
    transition: 0.5s;
 }

 .sub-menu>a{
    display:block;
    text-align: center;
    transition: 0.5s;
 }

 .sub-menu{
    display: none;
 }

 .sub-menu a:hover{
    color: #fff;
    background-color: #333333;
}
 .menu li:hover>a{
    color: #fff;
    background-color: #333333;
}

/* 슬라이드 */
.slide{
    position: relative;
    height: 300px;
    overflow: hidden;
}
.slide-items{
    font-size: 0;
    position: absolute;
    width: 3600px;
    height: 300px;
}

/* 뉴스,갤러리 */
.tab-inner{
    padding-top: 20px;
}
.tab1{width: 95%;
    padding: 7px;
    margin: auto;
    box-sizing: border-box;
    border: #333333 1px solid;
    display: none;}
.tab1 a{
    display: block;
    font-size: smaller;
    box-sizing: border-box;
    border-bottom: #333333 1px solid;
}

.tab1 a:last-child{
    border-bottom: none;
}

.tab1 a b{
    font-weight: normal;
    float: right;
}

.tab2{
    width: 95%;
    margin: auto;
    box-sizing: border-box;
    border: #333333 1px solid;
}

.tab2 a{
    text-align:center;
}

.tab2 a img{
    width: 100px;
}

.btns a{
    display:inline-block;
    border: #333333 1px solid;
    border-radius: 5px 5px 0 0;
    padding: 2px;
    border-bottom: #ffffff;
    background-color: #bbb;
}

.btns{
    margin-left: 15px;
    margin-bottom: -1px;
}

.btns a:last-child{
    margin-left: -4px;
}

a.active{
    background-color: #fff;
}

// 메뉴

$('ul.menu>li').mouseenter(function(){
    $('.sub-menu').stop().slideDown()
})
$('ul.menu>li').mouseleave(function(){
    $('.sub-menu').stop().slideUp()
})

// 슬라이드

setInterval(function(){
    $('.slide-items').animate({left:'-1200px'},function(){
        $('.slide-items').css({left:0})
        $('.slide-items a:first-child').appendTo('.slide-items')
    })
},3500) 

// 탭메뉴

$('.btns a:first-child').click(function(){
    $(this).addClass('active')
    $(this).siblings().removeClass('active')
    $('.tab1').show()
    $('.tab2').hide()
})

$('.btns a:last-child').click(function(){
    $(this).addClass('active')
    $(this).siblings().removeClass('active')
    $('.tab2').show()
    $('.tab1').hide()
})

서브메뉴가 내려올때 엄청 크게 내려오고, 메뉴의 큰 카테고리에 배경색이 끝까지 채워지지 않습니다

안녕하세요, 인프런 AI 인턴입니다.

안단감님께서 직면하신 문제에 대해 이해를 돕기 위한 몇 가지 팁과 관련 자료를 제공해 드리겠습니다.

문제 설명

현재 서브메뉴가 열릴 때, 부자연스럽게 크기가 너무 크게 표시되고, 주요 메뉴 항목의 배경색이 끝까지 채워지지 않는 문제가 발생하고 있습니다.

문제 원인 및 해결책

서브메뉴 크기 문제

서브메뉴가 너무 크게 표시되는 이유는 .sub-menu가 감싸는 모든 항목에 대해 동일한 크기를 기본적으로 설정하고 있기 때문일 가능성이 큽니다. 이를 해결하기 위해서는 서브메뉴 항목에 대한 명시적인 너비 설정을 필요로 할 수 있습니다.

   .sub-menu {
       display: none;
       width: 100%; /* 부모 메뉴와 동일한 너비로 설정 */
   }

메뉴 항목의 배경색 문제

메뉴의 배경색이 끝까지 채워지지 않는 이유는 요소의 padding과 border로 인해 배경색이 전체 영역을 덮지 않기 때문일 수 있습니다. box-sizing: border-box;를 사용하여 패딩과 테두리를 포함한 전체 박스 크기를 제어할 수 있습니다.

   ul.menu>li>a {
       box-sizing: border-box;
       width: 100%;
       padding: 10px;
       transition: 0.5s;
       display: block;
   }

   .menu li:hover>a {
       color: #fff;
       background-color: #333333;
   }

인프런 커뮤니티 질문&답변

A2 연습중인데 메뉴 배경색과 서브메뉴 크기, 갤러리 그림 정리에 문제가 있습니다

문제 설명

문제 원인 및 해결책

관련된 기존 답변