인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요. 탭 부분 보더가 이상합니다.
작성
·
444
1
선생님 안녕하세요.
탭 메뉴를 만들고 있는데
공지사항에서는 보더가 없어지는데
갤러리는 보더가 안없어집니다ㅠㅠ
왜이러는걸까요?
알려주시면 감사하겠습니다.
html 입니다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>D-1 실전연습</title>
</head>
<body>
<div class="container">
<div class="container-inner">
<div class="left">
<div class="header">
<div class="logo"><img src="images/header-logo.png"></div>
<div class="navi">
<ul class="menu">
<li>
<a href="#none">메뉴</a>
<div class="sub-menu">
<a href="#none">서브메뉴-1</a>
<a href="#none">서브메뉴-2</a>
<a href="#none">서브메뉴-3</a>
<a href="#none">서브메뉴-4</a>
</div>
</li>
<li>
<a href="#none">메뉴</a>
<div class="sub-menu">
<a href="#none">서브메뉴-1</a>
<a href="#none">서브메뉴-2</a>
<a href="#none">서브메뉴-3</a>
<a href="#none">서브메뉴-4</a>
</div>
</li>
<li>
<a href="#none">메뉴</a>
<div class="sub-menu">
<a href="#none">서브메뉴-1</a>
<a href="#none">서브메뉴-2</a>
<a href="#none">서브메뉴-3</a>
<a href="#none">서브메뉴-4</a>
</div>
</li>
<li>
<a href="#none">메뉴</a>
<div class="sub-menu">
<a href="#none">서브메뉴-1</a>
<a href="#none">서브메뉴-2</a>
<a href="#none">서브메뉴-3</a>
<a href="#none">서브메뉴-4</a>
</div>
</li>
<li>
<a href="#none">메뉴</a>
<div class="sub-menu">
<a href="#none">서브메뉴-1</a>
<a href="#none">서브메뉴-2</a>
<a href="#none">서브메뉴-3</a>
<a href="#none">서브메뉴-4</a>
</div>
</li>
</ul>
</div>
<div class="login">
<a href="#none">Login</a>
<b>l</b>
<a href="#none">Logout</a>
</div>
</div>
</div>
<div class="right">
<div class="banner">
<div class="image-slide">
<a href="#none"><img src="images/slide-d-01.jpg" alt="slide 1"></a>
<a href="#none"><img src="images/slide-d-02.jpg" alt="slide 2"></a>
<a href="#none"><img src="images/slide-d-03.jpg" alt="slide 3"></a>
</div>
<div class="image-banner">
<a href="#none"><img src="images/banner-01.png"></a>
<a href="#none"><img src="images/banner-02.png"></a>
<a href="#none"><img src="images/banner-03.png"></a>
</div>
</div>
<div class="shortcut">
<div class="shortcut-inner">
<a href="#none" class="shortcut-left"><img src="images/shortcut-01.png" alt="shortcut"></a>
<div class="shortcut-center">
<h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2>
<p>12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~
12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^</p>
<em>기간: 2022년 12월 18일 ~ 12월 25일</em>
</div>
<div class="shortcut-right">
<a href="#none"><img src="images/shortcut-02.png" alt="shortcut arrow"></a>
</div>
</div>
</div>
<div class="items">
<div class="items-inner">
<div class="tab">
<a href="#none">공지사항</a>
<a href="#none">갤러리</a>
</div>
<div class="content1">
<a href="#none" class="open-modal"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a>
<a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a>
<a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a>
<a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a>
<a href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2012.12.20</b></a>
</div>
<div class="content2">
<a href="#none"><img src="images/gallery-01.png" alt="gallery"><span>안녕하세요</span></a>
<a href="#none"><img src="images/gallery-02.png" alt="gallery"><span>안녕하세요</span></a>
<a href="#none"><img src="images/gallery-03.png" alt="gallery"><span>안녕하세요</span></a>
<a href="#none"><img src="images/gallery-04.png" alt="gallery"><span>안녕하세요</span></a>
<a href="#none"><img src="images/gallery-05.png" alt="gallery"><span>안녕하세요</span></a>
<a href="#none"><img src="images/gallery-06.png" alt="gallery"><span>안녕하세요</span></a>
<a href="#none"><img src="images/gallery-07.png" alt="gallery"><span>안녕하세요</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="logo"><a href="#none"><img src="images/footer-logo.png" alt="footer-logo"></a></div>
<div class="copy">
<b><a href="#none">기업소개 제휴 및 입점 문의, </a>
<a href="#none">이용약관, </a>
<a href="#none">개인정보처리방침, </a>
<a href="#none">이메일무단수집거부, </a>
<a href="#none">사이트맵, </a>
<a href="#none">인재채용, </a>
</b>
<p>상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장
사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스</p>
</div>
<div class="sns">
<a href="#none"><img src="images/sns-01.png" alt="twitter"></a>
<a href="#none"><img src="images/sns-02.png" alt="facebook"></a>
<a href="#none"><img src="images/sns-03.png" alt="kakaostory"></a>
</div>
</div>
<div class="modal">
<div class="modal-content">
<h2>스트리밍 서버 이전으로 서비스 장애</h2>
<p>스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <br>
<br>
1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체<br>
2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치<br>
3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공<br>
<br>
위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.
서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다.</p>
<a href="#none" class="close-modal">X 닫기</a>
</div>
</div>
</div>
<script src="script/jquery-1.12.4.js"></script>
<script src="script/custom.js"></script>
</body>
</html>
css 입니다.
@charset "utf-8"; * {margin: 0; padding: 0;} a {text-decoration: none; color: #333;} li,ul {list-style: none;} .container .container-inner {width: 100%; display: flex;} .left { width: 200px; flex: 1;} .right {width: calc(100vw - 200px); padding-right: 20px;} .header .logo {width: 200px; height: 100px;} .header .navi {width: 90%; margin: auto; } .menu {position: relative; z-index: 1000;} .menu > li > a { padding: 10px; display: block; text-align: center; border: 1px solid #000; transition: 0.5s;} .menu > li:hover > a { background-color: rgba(0, 0, 0, 0.5);} .sub-menu {display: none; border: 1px solid #000;} .sub-menu > a { padding: 5px; display: block; text-align: center; transition: 0.5s;} .sub-menu > a:hover { background-color: rgba(0, 0, 0, 0.5);} .login {text-align: center; margin-top: 20px;} .login a:hover {text-decoration: underline;} .login b {color: #ddd;} /* 슬라이드 배너 */ .banner { width: inherit; height: 400px; overflow: hidden; } .banner .image-slide {width: inherit; height: 3600px; font-size: 0; animation: slide 10s linear infinite; } .banner .image-slide a:nth-child(1) {animation-delay: 0s;} .banner .image-slide a:nth-child(2) {animation-delay: 3.5s;} .banner .image-slide a:nth-child(3) {animation-delay: 0s;} @keyframes slide { 0% {top: 0px;} 5% {top: -1200px;} 35% {top: -1200px;} 40% {top: -2400px} 70% {top: -2400px;} 100% {top: 0px;} } .image-banner {position: absolute; right: 0; top: 0; width: 200px} .image-banner a img { width: 180px; margin-top: 7px;} /* 바로가기 */ .shortcut {width: inherit; height: 200px; margin-top: 13px; margin-left: 20px;} .shortcut-inner { border: 1px solid #000; display: flex; height:calc(100% - 20px);} .shortcut-left {float: left; width:400px; padding-top: 10px; text-align: center;} .shortcut-center {float: left; margin-left: 20px;} .shortcut-center h2 {margin-top: 40px} .shortcut-center p {margin-top: 10px; margin-bottom: 5px;} .shortcut-center em { font-style: normal; color: #bbb;} .shortcut-right { margin-top: 75px; margin-right: 50px; padding-left: 30px; } /* 아이템 */ .items {width: inherit; height: 250px; margin-left: 20px;} .itmes-inner {} .tab {} .tab a { display: inline-block; margin-right: -5px; width: 180px; border: 1px solid #000; text-align: center; padding: 10px; border-radius: 10px 10px 0 0; background-color: #ddd; border-bottom: none; margin-bottom: -1px;} .tab a:active {background-color: #fff;} .content1 {border: 1px solid #000; box-sizing: border-box;} .content1 a {display: block; padding: 10px; border-bottom: 1px solid #000; } .content1 a:last-child {border-bottom: none;} .content1 em {overflow: hidden; text-overflow: ellipsis; font-style: normal; } .content1 b {float: right; margin-right: 20px;} .content2 {height: 200px; border: 1px solid #000; position: relative; text-align: center; display: none; z-index: 0; box-sizing: border-box; background-color: #fff;} .content2 a {display: inline-block;} .content2 a > img {width: 200px; margin-top: 20px; padding: 5px;} .content2 a > span {display: block; margin-top: -5px;} /* 푸터 */ .footer {width: 100%; height: 100px;display: flex;} .footer .logo {width: 200px;} .footer .logo a img{margin-top: 10px;} .footer .copy {width: calc(100vw - 400px); text-align: left; padding: 30px;} .footer .copy p {margin-top: 5px;} .footer .sns {width: 200px;} .footer .sns a img {width: 50px; border-radius: 5px; margin-top: 20px;} .modal { display: none; position: absolute; top: 0; left: 0; background-color:rgba(0, 0, 0, 0.5); width: 100%; height: 100%; text-align: left;} .modal-content {border-radius: 20px; margin-top: -350px; margin-left: -300px; position: absolute; top: 50%; left: 50%; width: 600px; height: 320px; background-color: #fff; padding: 40px;} .modal-content h2 {padding-bottom: 20px;} .modal-content a {border: 1px solid #000; padding: 5px 10px; float: right; margin-top: 20px;}
답변 5
0
0
$('.menu li').mouseenter(function(){
$(this).children('.sub-menu').stop().slideDown()
})
$('.menu li').mouseleave(function(){
$('.sub-menu').stop().slideUp()
})
$('.open-modal').click(function(){
$('.modal').show()
})
$('.close-modal').click(function(){
$('.modal').hide()
})0
0
/* 메뉴 */
$('.menu li').mouseenter(function(){
$(this).children('.sub-menu').stop().slideDown()
})
$('.menu li').mouseleave(function(){
$(this).children('.sub-menu').stop().slideUp()
})
/* 모달 */
$('.open-modal').click(function(){
$('.modal').show()
})
$('.close-modal').click(function(){
$('.modal').hide()
})
/* 탭 */
$('.tab a:first-child').click(function(){
$('.content1').show()
$('.content2').hide()
$(this).addClass('active')
$(this).siblings().removeClass('active')
})
$('.tab a:last-child').click(function(){
$('.content1').hide()
$('.content2').show()
$(this).addClass('active')
$(this).siblings().removeClass('active')
})
0
relative를 다른 곳에 주셔서 그렇습니다.
html에서 코드 오류 수정해주세요. 마감 div가 하나 더 있습니다.
그리고 footer가 .container 밖에 있는데 .container 안으로 넣어주세요.
만드는데 문제는 없지만 .footer 말고 가급적이면 시멘틱 태그인 footer를 사용하세요.