배너이미지가 밑으로 내려갔습니다.
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
탭메뉴 열심히 만들고 있었는데 갑자기 배너 이미지가 갤러리 탭 밑으로 가버렸습니다. 원인을 찾다가 도저히 모르겠어서 질문 드립니다. 감사합니다. <! DOCTYPE html > < html lang = "ko" > < head > < meta charset = "UTF-8" > < title > 산업대학교 </ title > < link rel = "stylesheet" href = "css/style.css" > </ head > < body > < div class = "container" > < div class = "header-inner" > < header > < div class = "header-logo" > < a href = "#none" >< img src = "images/logo-b4-header.png" alt = "headerlogo" ></ a > </ div > < div class = "navi" ></ div > </ header > </ div > < div class = "content-inner" > < div class = "slide" > < div > < a href = "#none" >< img src = "images/slide-b4-01.jpg" alt = "slide1" ></ a > < a href = "#none" >< img src = "images/slide-b4-02.jpg" alt = "slide2" ></ a > < a href = "#none" >< img src = "images/slide-b4-03.jpg" alt = "slide3" ></ a > </ div > </ div > < div class = "items" > < div class = "news" > < div class = "tab-inner" > < div class = "btn" > < span > 공지사항 </ span > </ div > < div class = "tab1" > < a href = "#none" > 산업대학교 동문회장배 자선골프대회 < b > 2016-09-12 </ b ></ a > < a href = "#none" > 개교 100주년 기념 야외 오페라 초청 < b > 2016-09-10 </ b ></ a > < a href = "#none" > 동문회장 및 운영위원장 후보자 추천 < b > 2016-09-09 </ b ></ a > < a href = "#none" > 진행위원회(정회원) 선발 결과 < b > 2016-09-07 </ b ></ a > < a href = "#none" > 산업대학교 동문회 개최일 변경 < b > 2016-08-30 </ b ></ a > </ div > </ div > </ div > < div class = "gallery" > < div class = "tab-inner" > < div class = "btn" > < span > 갤러리 </ span > </ div > < div class = "tab2" > < a href = "#none" >< img src = "images/gallery-b4-01.jpg" alt = "gallery1" ></ a > < a href = "#none" >< img src = "images/gallery-b4-02.jpg" alt = "gallery2" ></ a > < a href = "#none" >< img src = "images/gallery-b4-03.jpg" alt = "gallery3" ></ a > </ div > </ div > < div class = "banner" > < a href = "#none" >< img src = "images/banner-b4-01.jpg" alt = "banner" ></ a > </ div > </ div > </ div > < div class = "footer-inner" > < footer > < div class = "copyright" > < div ></ div > < div ></ div > </ div > < div class = "family-site" > <!-- <select> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> --> </ div > </ footer > </ div > </ div > < script src = "script/jquery-1.12.4.js" ></ script > < script src = "script/custom.js" ></ script > </ body > </ html > @charset "utf-8" ; body { margin : 0 ; background-color : #fff ; color : #333333 ; font-size : 15px ; } a { color : #333333 ; text-decoration : none ; } .container {} .header-inner { border : 1px solid red ; } header { width : 1200px ; margin : auto ; height : 100px ; } header div { border : 1px solid yellowgreen ; height : 100px ; } .header-logo { width : 200px ; float : left ; line-height : 130px ; } .navi { width : 600px ; float : right ; } .content-inner {} .slide { border : 1px solid green ; width : 1200px ; margin : auto ; } .slide > div { height : 300px ; } .items { /* border: 1px solid red; */ width : 1200px ; margin : auto ; overflow : hidden ; } .items > div { /* border: 1px solid pink; */ height : 200px ; float : left ; box-sizing : border-box ; } .news { width : 425px ; } .gallery { width : 425px ; } .banner { width : 350px ; } .footer-inner { border : 1px solid red ; } footer { width : 1200px ; margin : auto ; overflow : hidden ; } footer > div { border : 1px solid blue ; height : 100px ; float : left ; box-sizing : border-box ; } .copyright { width : 1000px ; } .copyright div { border : 1px solid green ; height : 50px ; } .family-site { width : 200px ; height : 100px ; } /* slide */ .slide { width : 1200px ; height : 300px ; position : relative ; overflow : hidden ; } .slide > div { width : 3600px ; font-size : 0 ; position : absolute ; top : 0 ; left : 0 ; animation : slide 10s linear infinite ; } @keyframes slide { 0% { left : 0 ; } 30% { left : 0 ; } 35% { left : -1200px ; } 65% { left : -1200px ; } 70% { left : -2400px ; } 95% { left : -2400px ; } 100% { left : 0 ; } } /* news & gallery */ .tab-inner { width : 95% ; margin : auto ; } .btn {} .btn span { border : 1px solid #000 ; width : 100px ; display : inline-block ; padding : 5px ; background-color : #fff ; text-align : center ; border-radius : 5px 5px 0 0 ; border-bottom : none ; margin-bottom : -2px ; } .tab1 , .tab2 { border : 1px solid #000 ; padding : 0 15px ; height : 160px ; } .tab1 a { display : block ; padding : 5px ; border-bottom : 1px solid #000 ; } .tab1 a:last-child { border-bottom : none ; } .tab1 a b { float : right ; font-weight : normal ; } .tab2 { text-align : center ; } .tab2 img { width : 120px ; padding-top : 25px ; } .banner img { width : 95% ; }
- 탭메뉴
- 오류
- 웹 디자인
- float
- HTML/CSS
- jquery