페이드인/페이드아웃 슬라이드가 동작하지 않아요.

$(function(){ var num = 0; $('.slide div a').ep(num).addClass('active'); setInterval(function(){ if(num

페이드인/페이드아웃 슬라이드가 동작하지 않아요.

@charset "utf-8"; body { color: #333333; background-color: #ffffff; margin: 0; padding: 0; } a { text-decoration: none; color: #333333; } .container { width: 1000px; border: 1px solid black; } .container > div { float: left; box-sizing: border-box; } .left { width: 200px; } header { } header div { border: 1px solid black; } .logo { height: 100px; } .navi { width: 180px; height: 400px; } .right { width: 800px; } .slide { border: 1px solid black; position: relative; } .slide > div { height: 350px; } .slide > div a { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transition: 0.5s; } .slide > div a.active { opacity: 1; visibility: visible; } .contents { overflow: hidden; } .contents > div { height: 200px; float: left; border: 1px solid black; box-sizing: border-box; } .notice { width: 300px; } .gallery { width: 300px; } .shortcut { width: 200px; } footer { overflow: hidden; } footer > div { height: 100px; border: 1px solid black; float: left; box-sizing: border-box; } .copyright { width: 600px; } .site { width: 200px; } .sns { height: 50px; } .familysite { height: 50px; }

페이드인/페이드아웃 슬라이드가 동작하지 않아요.

부여 가을연꽃축제 (사진) (사진) (사진) (사진)

갤러리 btn 부분 가운데 정렬되는 이유

@charset "utf-8"; .container { } a { text-decoration: none; color: #000000; } .header-inner { background-color: lightgray; } header { width: 1200px; height: 100px; margin: auto; position:relative; z-index: 1; } header div { height: 100px; } .logo { width: 200px; float: left; line-height: 120px; text-align: center; } .logo img { width: 190px; } .navi { width: 600px; float: right; margin-right: 20px; } .menu { list-style: none; padding: 0; margin-top: 67px; } .menu li { text-align: center; float:left; width: 150px; box-sizing: border-box; } .menu li > a { padding: 5px; display: block; border: 1px solid black; transition: 0.5s; } .menu li:hover > a { background-color: #000000; color: #ffffff; } .submenu { height: 130px; display: none; } .submenu a { display: block; padding: 5px; color: #ffffff; transition: 0.5s; } .submenu a:hover { background-color: #ffffff; color: #000000; } .subbg { width: 1200px; background-color: #000000; position: absolute; top: 100%; left: 0; height: 140px; z-index: -1; display: none; } .contents-inner { } .slide { width: 1200px; margin: auto; position: relative; overflow: hidden; margin-bottom: 5px; } .slide div { height: 300px; } .slide div a { position: absolute; top: 0; left: 0; transform: translateX(300px); opacity: 0; transition: 0.5s; } .slide div a.active { transform: translateX(0); opacity: 1; } .slide div img { width: 1200px; height: 300px; } .contents { width: 1200px; margin: auto; overflow: hidden; } .contents > div { height: 200px; float: left; box-sizing: border-box; } .notice { width: 400px; } .btn span { display: inline-block; border: 1px solid black; width: 100px; padding: 5px; text-align: center; border-radius: 5px 5px 0 0; background-color: #ffffff; border-bottom: none; margin-bottom: -1px; } .tab1, .tab2 { width: 95%; border: 1px solid black; height: 157px; } .tab2 { margin: 0 auto; } .tab1 > a { display: block; padding: 2px; padding-top: 3px; border-bottom: 1px solid black; width: 95%; text-align: center; } .tab1 > a:hover { color: blue; } .tab1 >a:last-child { border-bottom: none; } .tab1 > a b { display: inline-block; width: 70%; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab1 > a span { float: right; } .gallery { width: 400px; text-align: center; } .gallery img { width: 110px; padding-top: 15px; } .gallery img:hover { opacity: 0.5; } .banner { width: 400px; text-align: right; } .banner img { height: 192px; } .footer-inner { background-color: lightgray; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; } .footer-info { width: 1000px; } .footer-info > div { height: 50px; text-align: center; } .footer-menu { line-height: 50px; } .footer-menu a { text-decoration: underline; } .footer-menu a:hover { color: blue; } .copyright { line-height: 40px; } .family-site { width: 200px; height: 100px; text-align: center; line-height: 90px; } .family-site select { width: 160px; height: 30px; }

갤러리 btn 부분 가운데 정렬되는 이유

산업대학교 (사진) Menu-1 Sub-1 Sub-2 Sub-3 Sub-4 Menu-2 Sub-1 Sub-2 Sub-3 Sub-4 Menu-3 Sub-1 Sub-2 Sub-3 Menu-3 Sub-1 Sub-2 Sub-3 (사진) (사진) (사진) 공지사항 맞춤 플랜을 제안하는 웨딩 크리에이티브 그룹2017-12-12 H&S와 함께 하실 가슴 따뜻한 분들을 모십니다.2017-12-12 H&S와 예식을 준비하신 분들께 감사드립니다.2017-12-12 코리아웨딩페어 결혼박람회가 열립니다.2017-12-12 마진없이 아낌없이 드리는 마지막 찬스!2018-03-05 갤러리 (사진) (사진) (사진) (사진) 하단메뉴1 하단메뉴2 하단메뉴3 COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED 패밀리사이트1 패밀리사이트2 패밀리사이트3

공지사항 텍스트 넘침 & items영역 바로가기 줄바뀜

@charset "utf-8"; /* 기본 서식 */ body { margin: 0; padding: 0; background-color: #ffffff; color: #333333 } a { color: #333333; text-decoration: none; } .container { /* border: 1px solid black;*/ width: 1000px; } .container > div { float: left; box-sizing: border-box; } .left { width: 200px; } .right { width: 800px; } /* header */ header { } header > div { } .logo { height: 100px; line-height: 130px; } .navi { } .menu { list-style: none; padding: 0; width: 90%; margin: auto; position: relative; } .menu li { text-align: center; } .menu li > a { border: 1px solid black; display: block; padding: 5px; } .menu li > a { border: 1px solid black; display: block; padding: 5px; } .menu li:hover > a { background-color: #000000; color: #ffffff; } .submenu { border: 1px solid black; display: none; position: absolute; background-color: #000000; width: 100%; top: -25px; left: 100%; height: 200px; z-index: 1; } .submenu > a { display: block; padding: 5px; color: #ffffff; } .submenu > a:hover { background-color: #ffffff; color: #000000; } /* slide */ .slide { position: relative; width: 1200px; height: 350px; margin-bottom: 5px; } .slide > div { } .slide > div a { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transition: 1s; } .slide > div a.active { opacity: 1; visibility: visible; } /* contents */ .contents { overflow: hidden; } .contents > div { height: 200px; float: left; box-sizing: border-box; } .notice { width: 300px; } .btn span { border: 1px solid black; padding: 5px; display: inline-block; width: 100px; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; } .notice a { display: block; overflow: hidden; } .notice a b { width: 70%; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; font-weight: normal; } .notice a span { float: right; } .tab-inner { width: 97%; } .gallery { width: 300px; } .gallery img { width: 85px; padding-top: 35px; } .gallery img:hover { opacity: 0.7; } .tab1, .tab2 { border: 1px solid black; height: 155px; box-sizing: border-box; } .tab1 { padding-top: 10px; } .tab1 a { border-bottom: 1px solid #000; padding: 5px; } .tab1 a:last-child { border-bottom: none; } .tab2 { text-align: center; } .btn { /* padding: 5px;*/ } .shortcut { width: 200px; } .shortcut img { } /* footer */ footer { overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; text-align: center; } .copyright { width: 600px; line-height: 100px; } .site { width: 200px; } .sns { height: 50px; } .sns img { width: 45px; margin: 5px; } .familysite { height: 50px; line-height: 40px; } .familysite select { width: 180px; height: 30px; }

공지사항 텍스트 넘침 & items영역 바로가기 줄바뀜

부여 가을연꽃축제 (사진) 축제소개 초대의 글 축제개요 축제연혁 오시는길 행사안내 셔틀버스안내 행사안내 행사일정 소공연장 홍보마당 축제소식 보도자료 음식레시피 참여마당 참가후기 연꽃갤러리 포토갤러리 (사진) (사진) (사진) 공지사항 연꽃과 음식 이야기2020.03.14 연꽃마을축제에서 즐기는 풍경2020.03.14 연꽃으로 장식품 만들기2020.03.14 건강에 좋은 음식2020.03.14 갤러리 (사진) (사진) (사진) (사진) COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED (사진) (사진) (사진) 패밀리사이트1 패밀리사이트2 패밀리사이트3

사진처럼 되는 이유

@charset "UTF-8" body { margin: 0; padding: 0; background-color: #ffffff; color: #222328; } a { color: #222328; text-decoration: none; } .container { } .header-inner { background-color: lightblue; } header { width: 1200px; margin: auto; height: 100px; position: relative; z-index: 1; } header div { /* border: 1px solid black;*/ height: 100px; } .logo { width: 200px; float: left; text-align: center; line-height: 120px; } .logo img { width: 180px; } .navi { width: 600px; float: right; } .menu { list-style: none; width: 600px; padding-top: 50px; } .menu li { float: left; width: 150px; box-sizing: border-box; text-align: center; } .menu li > a { border: 1px solid black; padding: 5px; display: block; } .submenu { border: 1px solid black; background-color: #ffffff; } .submenu a { padding: 5px; background-color: #ffffff; display: block; } /* .subbg { background-color: #000000; width: 1200px; height: 200px; position: absolute; top: 100%; left: 0; } */ .contents-inner { } .slide { width: 1200px; margin: auto; position: relative; /* height: 300px;*/ overflow: hidden; } .slide > div { height: 300px; } .slide > div a { position: absolute; top: 0; left: 0; transform: translateX(400px); opacity: 0; transition: 0.5s } .slide > div a.active { opacity: 1; transform: translateX(0); } .slide img { width: 1200px; height: 300px; } .contents { width: 1200px; margin: auto; overflow: hidden; margin-top: 10px; } .contents > div { height: 200px; float: left; box-sizing: border-box; } .notice { width: 400px; } .btn span { border: 1px solid black; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; background-color: white; margin-bottom: -1px; } .tab1 { border: 1px solid black; height: 170px; box-sizing: border-box; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid black; margin: 5px; } .tab1 a:first-child { margin-top: 10px; } .tab1 a:last-child { border-bottom: none; } .tab1 a span { float: right; } .tab2 { width: 400px; height: 170px; text-align: center; border: 1px solid black; box-sizing: border-box; } .tab2 img { width: 120px; padding-top: 15px; } .banner { width: 400px; } .footer-inner { background-color: lightblue; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid black; height: 100px; float: left; box-sizing: border-box; } .footer-div { width: 1000px; } .footer-div div { height: 50px; border: 1px solid black; } .footer-menu { } .copyright { } .familysite { width: 200px; }

사진처럼 되는 이유

산업대학교 (사진) 대학소개 총장인사말 학교소개 홍보관 캠퍼스안내 입학안내 수시모집 정시모집 편입학 재외국민 정보서비스 대학정보알림 정보공개 정보서비스안내 커뮤니티 공지사항 참여게시판 자료실 (사진) (사진) (사진) 공지사항 남율건설, 시공평가 순위 상위 5위 달성2020.06.18 건설의 날 기념 행사를 안내해드립니다2020.06.18 대학생 대상 건설현장 탐방기2020.06.18 상반기 신입/경력 사원 채용 공고2020.06.18 갤러리 (사진) (사진) (사진) (사진)

슬라이드 jquery 오류

$(function(){ var num = 0; $('.slide > div a').eq(num).addClass('active'); setInterval(function(){ if(num div a').removeClass('active'); $('.slide > div a').eq(num).addClass('active'); }, 3000); });