A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
이곳저곳 실수가 너무 많은데 처음 연습하는거다보니까 어디서부터 잘못된건지 혼자 알기가 너무 어려워 질문글 올립니다. ㅜㅜ 어디가 잘못된건지 지적 꼭 좀 부탁드립니다. <!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')
- HTML/CSS
- jquery
- 웹-디자인