바보상자의 코딩박스

00: 00: 00

나는 mouseenter를 사용했는데 click을 사용해도 좋다. 등기구 등주 경관조명 태양광 실내조명 개인적으로 스크립트 부분이 해석이 되지 않는데 swiper.on('slideChange', function () { var i = swiper.activeIndex; $('.nav ul li').removeClass('on'); // $('.nav ul li').eq(i).addClass('on'); // }); $('.nav ul li').mouseenter(function(){ var idx = $(this).index() // swiper.slideTo(idx,1000,false); // }); 이부분을 해석하는 것을 조금 더 공부해야 겠다.

https://swiperjs.com/ Swiper Demos swiperjs.com 1. 위 주소로 들어가 가장 최신의 파일을 다운로드 하고 swiper.js / swiper.min / swiper.css / swiper.min.css를 가져왔다. 2. Default Setup > source code에서 스타일을 복사해왔다. Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10

https://swiperjs.com Swiper - Most Modern Mobile Touch Slider Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 다운로드 받은 후 데모를 활용하여 작업합니다.

DOCTYPE html> Document *{box-sizing: border-box;} body{height:100vh; background: url('img/main_bg.jpg'); background-size: cover; overflow: hidden;} .section1{width: 740px; height:325px; position: relative; left: 50%; top:50%; transform: translate(-50%,-50%);} .section1 img{width: 100%; display:none;} .section1 p{position: absolute; background: #000;} p.top{width: 0; height: 1px; left:0; top:0; }..

DOCTYPE html> Document *{box-sizing: border-box;} body{height:100vh;} .section1{width: 740px; position: relative; left: 50%; top:50%; transform: translate(-50%,-50%);} .section1 img{width: 100%; opacity:0;} .section1 p{position: absolute; background: #000;} p.top{width: ; height: 1px; left:0; top:0; } p.right{width: 1px; height: ; right:0; top:0;} p.bottom{width: ; height: 1px; right:0; bottom: ..

left: 50%; top:50%; transform: translate(-50%,-50%);

참고사이트호텔농심https://www.hotelnongshim.com/kr/?ref=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS8%3D DOCTYPE html> Document *{box-sizing: border-box;} .wrap{height: 540px;margin: auto; display: flex;} ul.time{width: 220px; height: 100%; font-size: 30px;} ul.time li{cursor:pointer;} ul.time li.on{color:red;} ul.content{width: 630px; height: 100%; position: relative;} ul.content li{position: absolute; display:none;}..

수업들은지 3일째너무 졸리고 피곤하다.. $()$(function({}))$('셀렉터').action()$(this)attr('속성') + get = attr('href')attr('속성:값') + set = attr('src':'a.jpg')attr('text':'사람')hide(), show(), toggle()index()eq(index번째)addClass('.클래스명')removeClass('.클래스명')

쿠팡을 참고하여 제작함. DOCTYPE html> Document *{box-sizing: border-box;} .slidewrap{width: 1920px; margin: auto; position: relative;} .nav{position:absolute; left:50%; margin-left: 300px; top:50%;transform: translateY(-50%); width: 180px; } .nav li{height:60px; box-shadow: 0 0 5px #333; background: #fff; display: flex;} .nav li a{margin: auto; display: block;} .nav li a.on{border: 1px solid blue;} $(func..