A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안... - 인프런

이곳저곳 실수가 너무 많은데 처음 연습하는거다보니까 어디서부터 잘못된건지 혼자 알기가 너무 어려워 질문글 올립니다. ㅜㅜ 어디가 잘못된건지 지적 꼭 좀 부탁드립니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Just 쇼핑몰</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>탑
                        <div class="sub-menu">
                            <a href="#none">블라우스</a>
                            <a href="#none">티</a>
                            <a href="#none">셔츠</a>
                            <a href="#none">니트</a>
                        </div>
                    </li>
                    <li>아우터
                        <div class="sub-menu">
                            <a href="#none">자켓</a>
                            <a href="#none">코트</a>
                            <a href="#none">가디건</a>
                            <a href="#none">머플러</a>
                        </div>
                    </li>
                    <li>팬츠
                        <div class="sub-menu">
                            <a href="#none">청바지</a>
                            <a href="#none">짧은바지</a>
                            <a href="#none">긴바지</a>
                            <a href="#none">레깅스</a>
                        </div>
                    </li>
                    <li>악세서리
                        <div class="sub-menu">
                            <a href="#none">귀고리</a>
                            <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" class="slide-item"><img src="images/slide-1.jpg" alt="슬라이드1"></a>
                <a href="#none" class="slide-item"><img src="images/slide-2.jpg" alt="슬라이드2"></a>
                <a href="#none" class="slide-item"><img src="images/slide-3.jpg" alt="슬라이드3"></a>

            </div>

        </div>  
        
        <div class="items">

            <div class="news">
            
            <div class="tab-inner"></div>
              
              <div class="btn">
                <a href="#none" class="btn1">공지사항</a>
                <a href="#none" class="btn2">갤러리</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/pic.jpg" alt="이미지1"></a>
                    <a href="#none"><img src="images/pic1.jpg" alt="이미지2"></a>
                    <a href="#none"><img src="images/pic2.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">
                
                <a href="#none">법적고지
개인정보취급방침 개인정보처리방침<br>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장
<br>사업장주소 : 서울특별시 강남구 테헤란로 123-56</a>

            </div>

            <div class="SNS">
                <a href="#none"><img src="images/sns-01.png" alt=""></a>                
                <a href="#none"><img src="images/sns-02.png" alt=""></a>                
                <a href="#none"><img src="images/sns-03.png" alt=""></a>                
            </div>

        </footer>

    </div>

<script src="script/jquery-1.12.4.js"></script>    
<script src="script/custum.js"></script>
</body>
</html>

@charset "utf-8";

body{
    margin: 0;
    background-color: #fff;
    color: #333333;
    font-size: 15px;
}

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

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

header{
    height: 100px;
    border: red solid 1px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

.slide{
    height: 300px;   
    width: 1200px;
    border: red solid 1px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.items{
    height: 200px;
    border: red solid 1px;
    box-sizing: border-box;
    overflow: hidden;
}

footer{
    height: 100px;
    border: red solid 1px;
    box-sizing: border-box;
    overflow: hidden;
}

.items > div{
    height: 200px;
    float: left;
}

.footer>div{
    float: left;
    height: 100px;}

.header-logo{
    width: 200px;
    border: red solid 1px;
    box-sizing: border-box;
    float: left;
    margin-top: 25px;
}

.navi{
    width: 500px;
    border: red solid 1px;
    box-sizing: border-box;
    float: right;
    text-align: center;
}

.slide-items{
    border: red solid 1px;
    box-sizing: border-box;
    position: absolute;
    height: 300px;
    font-size: 0;
    left: 0;
    top: 0;
}

 
.news{
    width: 400px;
    border: red solid 1px;
    box-sizing: border-box;
    font-size: smaller;
}

.banner{
    width: 400px;
    border: red solid 1px;
    box-sizing: border-box;
    font-size: 0;
}

.shortcut{
    width: 390px;
    border: red solid 1px;
    box-sizing: border-box;
    font-size: 0;
}



.footer-logo{
    width: 250px;
    height: 100px;
    border: red solid 1px;
    box-sizing: border-box;
    float: left;
    margin: 20px;

}

.copyright{
    width: 700px;
    border: red solid 1px;
    box-sizing: border-box;
    text-align: center;
       height: 100px;
    padding-top: 10px;
    color: darkgray;
    float: left;
}

.sns{
    width: 250px;
    height: 100px;
    border: red solid 1px;
    box-sizing: border-box;
    float: left;
}

.sns a img{margin: 20px;}


/* 네이게이션 */

ul.menu{padding: 0px;
        list-style: none;}

.menu li{
    float: left;
    background: #fff;
    width: 25%;
    font-weight:bolder;
}

.sub-menu{
 display: none;
 background: #fff;
}

.sub-menu a {
    display: block;
    background: #fff;
}

.menu>li>a {display: block;
padding: 5px;}

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

ul.menu li .sub-menu a:hover{
    color: #fff;
    background-color: black;
}




/* 탭메뉴 */

.btn{margin-left: 4px;}

.btn a{
    display: inline-block;
    border: #333333 1px solid;
    border-radius: 5px 5px 0 0;
    width: 100px;
    text-align: center;
    margin-right: -6px;
    background-color: #ddd;
    margin-bottom: -3px;
    border-bottom: none;
}


.tab-inner{width: 80%;
margin: auto;
border: 1px solid #000;
box-sizing: border-box;}

.tab1{border: 1px solid #000;
padding: 0 10px;}

.tab1 a{
    display: block;
    padding: 5px;
    border-bottom: #333333 1px solid;
}

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

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

.tab2{
    border: 1px solid #000;
    display: none;
    height: 165px;
    text-align: center;
    padding-top: 20px;
    box-sizing: border-box;
}

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

$(".menu li").mouseenter(function(){
    $('.sub-menu').stop().slideDown()
})

$(".menu li").mouseleave(function(){
    $('.sub-menu').stop().slideUp()
})

$('.slide-item:gt(0)').hide()

setInterval(function(){
    $('.slide-item:first-child').fadeOut(500).next().fadeIn(500)
    $('.slide-item:first-child').appendTo('.slide-items')
},3500)



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

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

$(this).addClass('active')
$(this).siblings().removeClass('active')

안녕하세요, 인프런 AI 인턴입니다. 박지원님께서 직면하신 문제에 대해 몇 가지 도움말과 해결책을 안내드리겠습니다.

문제 해결 안내

와이어프레임 구조 문제:
- HTML 및 CSS 구조 확인: HTML의 div 및 CSS의 float 관련 특성에서 문제가 발생할 수 있습니다. CSS 스타일에서 float을 사용하면 레이아웃이 깨질 수 있습니다. 이때, float을 사용한 요소 이후에 clearfix를 추가하거나 flexbox나 grid를 사용하여 레이아웃을 다시 구성하는 것을 추천드립니다.
메뉴바가 슬라이드를 밀어내는 문제:
- z-index 속성: 슬라이드 이미지보다 메뉴바가 위에 있도록 z-index 속성을 조정하세요. 예를 들어, 메뉴바에 z-index: 1000; 같은 값을 적용해 보십시오.
- 또한, position: relative;를 설정하여 메뉴바의 위치를 명확히 지정할 수 있습니다.
Hover 효과 미적용 문제:
- CSS 셀렉터 확인: .menu> 및 .sub-menu에서 정확한 셀렉터 사용 여부를 확인하세요. 예를 들어 .menu li:hover > a처럼 부모-자식 관계를 명확히 하여 스타일을 적용하세요.
- 스타일이 충돌하는 부분이 없는지 전체 CSS를 검토해 보세요.
탭 메뉴 작동 문제:
- JavaScript 코드 점검: siblings() 메소드를 사용할 때 철자 오류를 확인하고, 타이핑 실수가 없도록 점검하세요. JavaScript 관련 오타가 없는지 확인해 보세요. 예를 들어, .sibligs() 대신 .siblings()로 변경해야 합니다.
- jQuery의 click 이벤트가 정확히 작동하는지 확인하세요. ready 함수 안에 이벤트 초기화를 배치해 하나씩 디버깅해 보세요.

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

A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..

문제 해결 안내

관련 질문 URL