• 카테고리

    질문 & 답변
  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    미해결

.btn a{에 border-bottom: none; margin-bottom: -1px; background-color: #fff; 해도 밑 줄이 보입니다.

22.11.08 20:19 작성 조회수 127

1

.btn a{ }에 border-bottom: none; margin-bottom: -1px; background-color: #fff; 해도 공지사항, 갤러리 밑 줄이 보입니다. 무엇이 틀렸습니까?

☞ index.html

<!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/logo-header.png" alt="header-logo"></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> <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> <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> <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> <a href="#none">팔찌</a> </div> </li> </ul> </div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <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/gallery-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-02.jpg" alt="shortcut"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer-logo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"> <img src="images/sns-01.png" alt="sns1"> <img src="images/sns-02.png" alt="sns2"> <img src="images/sns-03.png" alt="sns3"> </a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>

 

☞ style.css

@charset 'utf-8';

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

a{ color: #222828; text-decoration: none; }

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

header{ height: 100px; position: relative; z-index: 10; }

header>div{ height: 100px; }

.header-logo{ width: 200px; float: left; }

.navi{ width: 600px; float: right; }

.slide{ margin-bottom: 20px; }

.slide>div{ height: 300px; }

.items{ overflow: hidden; }

.items>div{ height: 200px; float: left; box-sizing: border-box; }

.news{ width: 500px; }

.banner{ width: 350px; }

.shortcut{ width: 350px; }

footer{ overflow: hidden; }

footer>div{ height: 100px; float: left; box-sizing: border-box; }

.footer-logo{ width: 200px; }

.copyright{ width: 800px; }

.sns{ width: 200px; }

/* img & text */

.header-logo, .footer-logo{ line-height: 130px; }

.copyright{ padding-top: 30px; text-align: center; }

.sns{ line-height: 130px; text-align: center; }

/* slide */

.slide{ position: relative; width: 1200px; height: 300px; overflow: hidden; margin-bottom: 20px; }

.slide>div{ position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; font-size: 0; }

@keyframes slide{ 0%{top: 0;} 30%{top: 0;} 35%{top: -300px;} 65%{top: -300px;} 70%{top: -600px;} 95%{top: -600px;} 100%{top: 0;} }

/* 네비게이션 */

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

.menu li{ float: left; width: 25%; box-sizing: border-box; text-align: center; }

.menu li>a{ border: 1px solid black; display: block; padding: 5px; transition: 0.5s; }

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

.sub-menu{ background-color: #fff; border: 1px solid black; display: none; }

.sub-menu a{ display: block; padding: 5px; transition: 0.5s; }

.sub-menu a:hover{ background-color: #000; columns: #fff; }

/* tab menu */

.tab-inner{ width: 95%; margin: auto; }

.btn{}

.btn a{ border: 1px solid #000; display:inline-block; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; margin-right: -5px; border-bottom: none; margin-bottom: -1px; background-color: #fff; }

.tabs{}

.tab1{ border: 1px solid black; padding: 0 15px; }

.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{ display: none; }

무엇이 틀렸습니까?

답변 1

답변을 작성해보세요.

1

올리신 코드로 테스트 했는데 공지사항 갤러리에 아래 밑줄이 안보이게 잘 하셨는데요.
image