레이어 창까지 완성해 보았는데요~

/*Navigation*/ $('.menu li').mouseenter(function(){ $('.sub-menu, .sub-back').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu, .sub-back').stop().slideUp() }) /*Modal*/ $(".open-modal").click(function(){ $(".modal").fadeIn() }) $(".close-modal").click(function(){ $(".modal").fadeOut() })

레이어 창까지 완성해 보았는데요~

@charset "utf-8"; body{ margin:0; font-size: 15px; background-color: #fff; color:#333333; } a{ text-decoration: none; color:#333333; } .container{} .header-inner{ /* border: 1px solid red;*/ } header{ width: 1200px; margin: auto; height: 100px; position: relative; z-index: 10; } header > div{ /* border: 1px solid #000;*/ height: 100px; z-index: 10; } .header-logo{ width: 200px; float: left; line-height: 120px; } /*Navigation*/ .navi{ width: 600px; float: right; } .menu{ list-style: none; margin-top: 70px; } .menu li{ /* border: 1px solid #000;*/ float: left; width: 25%; box-sizing: border-box; text-align: center; background-color: #fff; } .menu li > a{ display: block; /* border: 1px solid #000;*/ padding: 5px; background-color:blue; transition: 0.5s; color:#000; } .sub-menu{ /* border: 1px solid #000;*/ height: 130px; display: none; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: skyblue; color:#fff; } .menu li:hover >a{ background-color: skyblue; color:#fff; } .sub-back{ position: absolute; background-color: #000; width: 100%; height: 170px; top:100%; right:0; display: none; z-index: -1; } .content-inner{} /*Slide Animation*/ .slide{ width: 1200px; margin: auto; position: relative; height: 300px; overflow: hidden; } .slide div{ /* border: 1px solid blue;*/ height: 300px; 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; } } .items{ width: 1200px; margin: auto; overflow: hidden; margin-top: 20px; } .items > div{ /* border: 1px solid green;*/ height: 200px; float: left; box-sizing: border-box; } .news{ width: 450px; } .tab-inner, .gallery-inner{ width: 97%; margin: auto; } .tab-inner .btn{} .tab-inner .btn span, .gallery-inner .btn span{ border: 1px solid #000; display: inline-block; width: 100px; padding: 5px; text-align: center; break-after: 5px 5px 0 0; background-color: #fff; border-bottom: none; margin-bottom: -1px; } .tab-inner .tab, .gallery .tab{ border: 1px solid #000; padding: 0 10px; height: 155px; } .tab-inner .tab a{ display: block; padding: 5px; overflow: hidden; border-bottom: 1px solid #000; } .tab-inner .tab a:last-child{ border-bottom:none; } .tab-inner .tab em{ font-style: normal; width: 60%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab-inner .tab b{ font-weight: normal; width: 30%; float: right; text-align: right; } .gallery{ width: 400px; } .gallery-inner img{ width: 110px; padding-top: 20px; } .gallery .tab{ text-align: center; } .banner{ width: 350px; text-align: center; } .banner img{ width: 93%; } .footer-inner{ /* border: 1px solid red;*/ } footer{ width: 1200px; margin: auto; overflow: hidden; } footer > div{ /* border: 1px solid #000;*/ height: 100px; float: left; box-sizing: border-box; text-align: center; background-color: blue; } .footer-menu{ width: 1000px; color:#fff; font-size: 12px; } .footer-menu a{ color:#fff; } .footer-menu div{ /* border: 1px solid #000;*/ height: 50px; box-sizing: border-box; } .footer-menu div:first-child{ padding-top: 20px; } .footer-menu div:last-child{ padding-top: 5px; } .family-site{ width: 200px; line-height: 100px; } /*Modal*/ .modal{ background-color: rgba(0, 0, 0, 0.2); position: absolute; width: 100%; height: 100%; top:0; left:0; z-index: 20; display: none; } .modal-content{ background-color: #fff; width: 400px; padding: 20px; border-radius: 10px;position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); } h2{} p{} .close-modal{ border: 1px solid #000; padding: 3px 7px; float: right; }

레이어 창까지 완성해 보았는데요~

산업대학교 (사진) 대학 소개 총장 인사말 학교 소개 홍보관 캠퍼스 안내 입학 안내 수시 모집 정시 모집 편입학 재외국민 정보 서비스 대학 정보 알림 정보 소개 정보 서비스 안내 커뮤니티 공지사항 참여 게시판 자료실 (사진) (사진) (사진) 공지사항 산업대학교 동문회장배 자선골프대회2016-09-12 개교 100주년 기념 야외 오페라 초청2016-09-10동문회장 및 운영위원장 후보자 추천2016-09-09 진행위원회(정회원) 선발 결과2016-09-07 산업대학교 동문회 개최일 변경2016-08-30 갤러리 (사진) (사진) (사진) (사진) 법적고지 개인정보취급방침 개인정보처리방침 상호명 : 산업대학교 대표자 : 송성훈 개인정보관리책임자 : 김보미 대리 사업장주소 : 서울특별시 중구 개항로 49 family-site 산업대학교 정보통신부 과학기술연구원 2020년도 장기인턴십 참가학생 모집 산업대학교 2020년도 장기인턴십 참가학생 모집에 참가할 학생을 모집하오니 많은 관심있는 학생들의 지원 부탁드립니다. 재학생 최종선발학생은 2020학년도 1학기 코업, 코업프로젝트 교과목을 반드시 수강해야 합니다. 졸업학점 6학점 인정되며 매칭기간으로 전화문의가 많아 통화가 어려우니 문의는 가급적 이메일로 부탁드립니다. 참고사항으로 2020학년도 1학기 교과목 수강신청이 불가한 졸업자, 2020년 2월 졸업 예정자 및 수료자는 지원 불가합니다. 착오 없으시길 바랍니다. 자세한 문의사항은 현장실습지원센터 홈페이지를 참고해주세요. 닫기

세로 레이아웃의 슬라이드에 대한 질문입니다.

/*Navigation*/ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) /*Slide Animation*/ $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })

세로 레이아웃의 슬라이드에 대한 질문입니다.

@charset "utf-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color:#333333; } a{ text-decoration: none; color:#333333; } .container{ width: 1000px; border: 1px solid #000; overflow: hidden; } .container > div{ /* border: 1px solid red;*/ height: 800px; float: left; box-sizing: border-box; } .left{ width: 200px; } .right{ width: 800px; overflow: hidden; } header{ position: relative; z-index: 10; } header > div{ /* border: 1px solid #000;*/ } .header-logo{ height: 100px; } .header-logo img{ margin-top: 30px; } /*Navigation*/ .navi{ /* height: 400px;*/ } .menu{ list-style: none; padding: 0; position: relative; } .menu li{ text-align: center; } .menu li > a{ display: block; padding: 5px; border: 1px solid #000; transition: 0.5s } .sub-menu{ /* border: 1px solid #000;*/ background-color: #000; position: absolute; top:-20px; left:100%; width: 100%; height: 200px; display: none; } .sub-menu > a{ display: block; padding: 5px; color:#fff; transition: 0.5s } .sub-menu a:hover{ background-color: #fff; color:#000; } .menu li:hover > a{ background-color: #000; color:#fff; } /*Slide Anomation*/ .slide{ position: relative; widows: 800px; height: 350px; } .slide div{ border: 1px solid blue; height: 350px; width: 2400px; position: absolute; font-size: 0; top:0; left:0; animation: slide 10s linear infinite; } @keyframes slide { 0%{left:0;} 30%{left:0;} 35%{left:-800px;} 65%{left:-800px;} 70%{left:-1600px;} 95%{left:-1600px;} 100%{left:0;} } .items{ overflow: hidden; margin-top: 20px; } .items > div{ /* border: 1px solid green;*/ height: 200px; float: left; box-sizing: border-box; } /*Tab Menu*/ .news{ width: 350px; } .tab-inner, .gallery-inner{ width: 97%; margin: auto; } .tab-inner .btn{} .tab-inner .btn span, .gallery-inner .btn span{ border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; background-color: #ddd; border-bottom: none; margin-bottom: -1px; } .tab-inner .tab a:last-child{ border-bottom: none; } .tab-inner .tab, .gallery-inner .tab{ border: 1px solid #000; padding: 0 10px; height: 160px; text-align: center; } .tab-inner .tab a{ display: block; overflow: hidden; padding: 5px; border-bottom: 1px solid #000 } .tab-inner .tab a em{ width: 70%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; } .tab-inner .tab a b{ width: 30%; float: right; text-align: right; font-weight: normal; } .gallery{ width: 250px; } .gallery-inner img{ width: 68px; padding-top:40px ; } .shortcut{ width: 200px; text-align: right; } .shortcut img{ width: 97%; } footer{ overflow: hidden; } footer > div{ /* border: 1px solid pink;*/ height: 100px; float: left; box-sizing: border-box; text-align: center; } .copyright{ width: 600px; padding-top: 30px; } .footer-menu{ width: 200px; } .footer-menu div{ border: 1px solid #000; height: 50px; box-sizing: border-box; } .family-site{ padding-top: 10px;; } /*Modal*/ .modal{ background-color: rgba(0, 0, 0, 0.2); position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 20; display: none; } .modal-content{ background-color: #fff; position: absolute; top:50%; left:50%; width: 400px; padding: 20px; border-radius: 10px; transform: translate(-50%, -50%); } h2{} p{} .close-modal{ border: 1px solid #000; padding: 3px 7px; float: right; } .open-modal{}

세로 레이아웃의 슬라이드에 대한 질문입니다.

Vallery Festival (사진) 축제소개 Festival 소개 행사장 안내 조직위원회 예약안내 예약하기 예약확인/취소 단체예약문의 아티스트 고릴라즈 메이저 레이저 아우스게인 타임로드 커뮤니티 공지사항 사진갤러리 영상갤러리 (사진) (사진) (사진) 공지사항 운영위원장 후보자 추천을 받고 있습니다. 2020.01.09 홈커밍데이 진행위원회 결과를 다운로드 받으세요.2020.01.07 카드결제 무이자 이벤트 한시적 10월 20일까지2019.12.31 보안강화 시스템 작업 안내 공지2019.12.20 부여 가을연꽃축제 10주년 콘서트 축제2019.12.20 갤러리 (사진) (사진) (사진) (사진) 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 (사진) (사진) (사진) Family-site 여주군청 홈페이지 한국관광공사 여행자보험가입 부여 가을연꽃축제 팸투어 모집 예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. 팸투어는 전액 무료로 진행되며 참가비 없습니다. 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다! 닫기

모달창 modal의 높이값 오류 질문입니다.

/*Navigation*/ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })

모달창 modal의 높이값 오류 질문입니다.

@charset "utf-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color:#999999; } a{ text-decoration: none; color:#999999; } .container{ border: 1px solid red; width: 960px; margin: auto; } header{ height: 150px; position: relative; z-index: 10; } header > div{ /* border: 1px solid #000;*/ height: 150px; float: left; box-sizing: border-box; } .header-logo{ width: 300px; } /*Navigation*/ .navi{ width: 500px; float: right; } .menu{ list-style: none; padding: 0; margin-top: 60px; } .menu li{ /* border: 1px solid #000;*/ float: left; width: calc(100%/3); box-sizing: border-box; } .menu li > a{ display: block; color:#000; padding: 5px; text-align: center; } .sub-menu{ /* border: 1px solid #000;*/ background-color: #893700; display: none; } .sub-menu > a{ display: block; padding: 5px; text-align: center; background-color: rgb(255, 246, 210); color:#000; } .sub-menu a:hover{ background-color: #00ccff; color:#fff; } .menu li:hover > a{ background-color: #4298cc; color:#fff; } /*Slide Animation*/ .slide{ position: relative; width: 960px; height: 400px; overflow: hidden; } .slide div{ /* border: 1px solid blue;*/ height: 400px; width: 2880px; font-size: 0; position: absolute; top:0; left:0; animation: slide 10s linear infinite; } @keyframes slide{ 0%{ left:0; } 20%{ left:0; } 35%{ left:-960px; } 55%{ left:-960px; } 75%{ left:-1920px; } 95%{ left:-1920px; } 100%{ left:0; } } .items{ overflow: hidden; margin-top: 20px; } .items > div{ /* border: 1px solid green;*/ height: 250px; float: left; box-sizing: border-box; } /*Tab Menu*/ .news{ width: 480px; } .tab-inner{ width: 90%; margin: auto; } .tab-inner h2, .banner-inner h2{ text-align: center; margin: 5px; } .tab-inner .tab{ /* border: 1px solid #000;*/ } .tab-inner .tab span em, .tab-inner .tab span b{ display: inline-block; text-align: center; color:#000; } .tab-inner .tab em{ width: 70%; font-style: normal; } .tab-inner .tab b{ width: 30%; font-weight: normal; } .tab-inner .tab-content{ /* border: 1px solid #000;*/ } .tab-inner .tab-content a{ display: block; padding: 5px; overflow: hidden; color:#000; font-size: 14px; } .tab-inner .tab-content a:nth-child(2n-1){ background-color: #888; } .tab-inner .tab-content a em{ width: 70%; display: inline-block; float: left; white-space: nowrap; /* overflow: hidden;*/ } .tab-inner .tab-content a b{ width: 30%; display: inline-block; float: right; text-align: right; } .banner{ width: 480px; } .banner-inner .tab{ margin-top:25px; text-align: center; } .icon-content-inner{} .icon-content{ /* border: 1px solid #000;*/ overflow: hidden; width: 600px; margin: auto; } .icon-content > div{ /* border: 1px solid red;*/ height: 250px; float: left; box-sizing: border-box; text-align: center; } .icon1{ width: 200px; } .icon2{ width: 200px; padding-top: 26px; } .icon3{ width: 200px; padding-top: 26px; } button{ font-size: 18px; color:#fff; padding: 7px 3px; background-color: #777; border-radius: 5px; border: none; } footer{ overflow: hidden; } footer div{ /* border: 1px solid #000;*/ height: 150px; width: 480px; float: left; box-sizing: border-box; background-color: #4298cc; } footer div:first-child{ text-align: center; line-height: 100px; } footer div:first-child a{ margin-right: 10px; color:#fff; } footer div:last-child span{ display: block; padding: 3px 0; color: #fff; font-size: 13px; } /*Modal*/ .modal{ background-color: rgba(0, 0, 0, 0.2); position: absolute; width: 100%; height: 100%; top:0; left:0; } .modal-content{ background-color: #fff; position:absolute; }

모달창 modal의 높이값 오류 질문입니다.

웹사이트제작 (사진) 여행가이드 소개 국내여행지 경기/강원 충청도 전라도 경상도 해외여행지 동남아 남태평양 유럽 미주/중남미 (사진) (사진) (사진) 공지사항 내용날짜 다도해 풍광을 한눈에...해남 땅끝 해안누리길 여행하기2018-01-10 국토순례 기차여행에 참가하는 학교, 청소년단체 등...2017-12-21 설악산 1월초 설경 절정, 기차 여행 상품이 출시되었..2017-12-15 여행가이드가 추천하는 국내 겨울여행지 & 관광열차2017-12-07 신나는 겨울여행 대관령 눈꽃축제, 고니골 빛축제로.. 2017-12-01 정보나눔 (사진) (사진) 새소식 (사진) 여행음악 (사진) 여행매뉴얼 법적고지 개인정보취급방침 개인정보처리방침 상호명:(주)앤윤컴퍼니 대표자:윤정우 개인정보관리책임자:김선정 상담전화:1588-0789 사업장주소:서울특별시 금천구 가산동 가산디지털2로 이름 이메일 보내실 말씀 메세지를 입력해주세요