Cộng đồng Hỏi & Đáp của Inflearn
Không có người viết
Bài viết có thông tin người viết đã bị xóa.
D유형 중입니다 모달 닫기를 실행하면 오류가 나고 탭만 작동하고 마우스는 페이지에서 반응 안합니다 슬라이드 이미지도 유동적이지 않습니다
Viết
·
13
0
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>조이 컨트리클럽</title>
</head>
<body>
<div class="container">
<div class="main">
<div class="left">
<header>
<div class="header-logo">
<a href="none"><img src="images/logo-a1-header.png" alt="헤더로고"></a>
</div>
<div class="navi">
<ul class="menu">
<li><a href="none">CLUB</a>
<div class="sub-menu">
<a href="none">클럽소개</a>
<a href="none">시설안내</a>
</div></li>
<li><a href="none">BOOKING</a>
<div class="sub-menu">
<a href="none">요금안내</a>
<a href="none">예약안내</a>
<a href="none">위약안내</a>
</div></li>
<li><a href="none">INFORMATION</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">COMMUNITY</a>
<div class="sub-menu">
<a href="none">공지사항</a>
<a href="none">Q&A</a>
</div></li>
</ul>
</div>
<div class="spot-menu">
<a href="#none">로그인</a>
<a href="#none">회원가입</a>
</div>
</header>
</div>
<div class="right">
<div class="slide-inner">
<div class="slide">
<div class="slide-items">
<a href="#none"><img src="images/slide-01.jpg" alt="이미지1"></a>
<a href="#none"><img src="images/slide-02.jpg" alt="이미지2"></a>
<a href="#none"><img src="images/slide-03.jpg" alt="이미지3"></a>
</div>
</div>
<div class="slide-banner">
<a href="none"><img src="images/site-01.png" alt="사이트1"></a>
<a href="none"><img src="images/site-02.png" alt="사이트2"></a>
<a href="none"><img src="images/site-03.png" alt="사이트3"></a>
</div>
</div>
<div class="shortcut">
<div class="shortcut-inner">
<div class="banner">
<img src="images/banner-a1-01.jpg" alt="배너이미지">
</div>
<div class="short-txt">
<p>12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br>
12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.
<br>더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^
<br>기간: 2022년 12월 18일~ 12월 25일</p>
</div>
<div class="shortcut-img">
<a href="#none"><img src="images/sns-01.png" alt="이미지"></a>
</div>
</div>
</div>
<div class="news">
<div class="tab-inner">
<div class="btns">
<a href="#none">공지사항</a>
<a href="#none">갤러리</a>
</div>
<div class="tabs">
<div class="notice">
<a href="#none" class="modal-open"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2022.12.20</b></a>
<a href="#none"><em>얼리버드 선착순 할인 이벤트 최대 50% 할인</em><b>2022.10.13</b></a>
<a href="#none"><em>내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법</em><b>2022.11.31</b></a>
<a href="#none"><em>외국인과 영어로 네이티브처럼 대화하는 노하우! </em><b>2022.08.09</b></a>
<a href="#none"><em>월 500만원 매출을 내는 블로그 운영하는 노하우</em><b>2022.07.07</b></a>
</div>
<div class="gallery">
<a href="#none"><img src="images/gallery-a1-01.jpg" alt="갤러리1"><br><span>퍼블리셔 취업 진짜 가이드</span></a>
<a href="#none"><img src="images/gallery-a1-02.jpg" alt="갤러리2"><br><span>초보자가 전문가가 되는 사진촬영</span></a>
<a href="#none"><img src="images/gallery-a1-03.jpg" alt="갤러리3"><br><span>탄탄한 라인을 만드는 필라테스</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-logo">
<a href="none"><img src="images/logo-b4-header.png" alt=""></a>
</div>
<div class="copyright">
상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장
사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스
</div>
<div class="sns">
<a href="none"><img src="images/sns-01.png" alt="에스엔에스1"></a>
<a href="none"><img src="images/sns-02.png" alt="에스엔에스2"></a>
<a href="none"><img src="images/sns-03.png" alt="에스엔에스3"></a>
</div>
</footer>
</div>
<div class="modal">
<div class="modal-contents">
<h3>스트리밍 서버 이전으로 서비스 장애</h3>
스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다.<br>
1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체<br>
2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치<br>
3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공<br>
위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br>
<br>서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다.<br>
<a href="none#" class="close-modal">닫기X</a>
</div>
</div>
<script src="script/jquery-1.12.4.js"></script>
<script src="script/custom.js"></script>
</body>
</html>
// 탭메뉴
$('.btns a:first-child').click(function(){
$(this).addClass('active');
$(this).siblings().removeClass('active')
$('.notice').show();
$('.gallery').hide();
})
$('.btns a:last-child').click(function(){
$(this).addClass('active');
$(this).siblings().removeClass('active')
$('.gallery').show();
$('.notice').hide();
})
// 모달
$('.modal-open').click(function(){
$('.modal').show()
})
$('.close-modal').click(function(){
$('.modal').hide()
})
// 슬라이드
setInterval(function(){
$('.slide-items').animate({left:'100%'},function(){
$('.slide-items').css({left:'0'});
$('.slide-items a:first-child').appendTo('.slide-items')
})
},3000)
// 메뉴
$('menu li').mouseenter(function(){
$(this).children('.sub-menu').stop().fadeIn()
})
$('menu li').mouseleave(function(){
$(this).children('.sub-menu').stop().fadeOut()
})
본문이 만자 이상 입력이 안돼서 css는 부득이하게 댓글에 달았습니다 ㅜㅜ 도움 부탁드려요 선생님
Câu trả lời 1
0
@charset"UTF-8";
.body{
color: #333333;
background-color: #ffffff;
position: relative;
font-size: 15px;
}
a{
color: #333333;
text-decoration: none;
}
.container{
margin: 0;
}
.main{
display: flex;
}
.left{
width: 200px;
}
.right{
width: calc(100%-200px);
}
.header-logo{
width: 200px;
padding-top: 50px;
padding-bottom: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.header-logoa{
text-align: center;
}
.header-logoaimg{
object-fit: cover;
width: 90%;
height: 90%;
}
.spot-menu {
text-align: center;
}
.spot-menua:first-child::after{
content: "1";
}
.slide-inner{
width: 100%;
height: 400px;
border: 1px#333333solid;
position: relative;
}
.slide{
width: inherit;
height: inherit;
position: relative;
overflow: hidden;
}
.slide-items{
width: 300%;
height: inherit;
position: absolute;
font-size: 0;
display: inline-block;
}
.slide-itemsaimg{
width: inherit;
height: inherit;
object-fit: fill;
}
.slide-banner{
width: 200px;
position: absolute;
top: 0;
right: 0;
}
.shortcut{
height: 200px;
width: inherit;
}
.news{
height: 250px;
}
footer{
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-logo{
width: 200px;
}
.copyright{
flex: 1;
}
.sns{
width: 200px;
}
/* 메뉴 */
.menu{
padding: 0%;
}
.menuli{
list-style: none;
}
.menulia{
display: block;
text-align: center;
}
.menuli:hover>a{
background: #6b535373;
color: #ffffff;
}
.sub-menu{
display: none;
}
.sub-menua{
display: block;
text-align: center;
}
.sub-menua{
background: #6b535373;
color: #ffffff;
}
.shortcut-inner{
display: flex;
gap: 0100px;
}
.short-txt{
border: 1px#333333solid;
width: 60%;
height: inherit;
}
.banner{
width: 30%;
height: inherit;
}
.bannerimg{
object-fit: cover;
}
.shortcut-img{
height: inherit;
width: 10%;
}
/* 탭메뉴 */
.news{
padding-left: 20px;
}
.btns{
margin-left: 10px;
}
.btnsa{
display: inline-block;
border: 1px#333333solid;
padding: 4px7px;
border-bottom: #ffffff1pxsolid;
margin-bottom: -1px;
background-color: #bbb;
}
.btnsa:first-child{
margin-right: -6px;
}
.tabs{
border: 1px#333333solid;
width: 40%;
padding: 5px10px;
}
a.active{
background-color: #ffffff;
}
/* 공지사항 */
.notice{
display: none;
}
.noticea{
display: flex;
justify-content: space-between;
}
/* 갤러리 */
.gallery{
display: flex;
gap: 010px;
align-items: center;
justify-content:stretch;
}
.gallerya{
display: inline-block;
text-align: center;
}
.galleryaimg{
object-fit: cover;
width: inherit
}
/* 팝업창 */
.modal{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.modal-contents{
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%,-50%);
width: 500px;
height: 500px;
padding: auto;
border: 1px#333333solid;
display: none;
}