1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <script> window.addEventListener("load",function(){ var visual = document.querySelector("visual"); var banner = document.querySelector(".banner"); var prevButton = document.querySelector(".move-button .prev-button"); var nextButton = document.querySelector(".move-button .next-button"); banner.style.left="0%"; prevButton.onclick = function(){ }; nextButton.onclick = function(){ var left = parseInt(banner.style.left)-100+"%"; /* transition은 요소의 위치 초기 값을 꼭 설정해줘야함. */ banner.style.left = left; }; }); </script> </head> <body> <div id="header"> <div><img src="/MavenPrj/resource/images/ic_menu_black_24dp_1x.png" /></div> <div class="content-container"> <h1><a><img src="/MavenPrj/resource/images/logo-sm.png" /></a></h1> <section> <nav id="main-menu"> <h1 class="hidden">메인메뉴</h1> <ul> <li><a href="">학습가이드</a></li> <li><a href="">뉴렉과정</a></li> <li><a href="">강좌선택</a></li> </ul> </nav> </section> </div> <div class=""><img src="/MavenPrj/resource/images/ic_search_black_24dp_1x.png" /></div> <div class="more-vert-button"><img src="/MavenPrj/resource/images/ic_more_vert_black_24dp_1x.png" /></div> </div> <div id="visual"> <h2 class="hidden">신규 강좌목록</h2> <ul class="banner"> <li style='background:url("/MavenPrj/resource/images/lecture/banner-javascript180.png") no-repeat center; background-size: cover;'> <a href=""></a> </li> <li style='background:url("/MavenPrj/resource/images/lecture/banner-oracle180.png") no-repeat center; background-size: cover;'> <a href=""></a> </li> <li style='background:url("/MavenPrj/resource/images/lecture/banner-spring180.png") no-repeat center; background-size: cover;'> <a href=""></a> </li> </ul> <ul class="move-button"> <li class="prev-button">이전</li> <li class="next-button">다음</li> </ul> </div> | cs |
resopnseWeb,html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | /*--- visual-------------------------------------------------------------------*/ #visual{ height: 100px; background: rgb(49, 49, 49); padding-top : 50px; overflow: hidden; z-index: 10; } #visual .banner{ height : inherit; /* 100%; inherit은 상속이 안되는 태그가 있음. block은 상속이 됨 */ display : flex; width : 300%; position : absolute; /* transition은 초기 위치가 꼭 0으로 지정이 되어야한다. */ left : 0px; /* 움직일 때, 이동 시간 */ transition-duration:1s; /* margin-left : -50%; */ } #visual .banner li{ height: inherit; width : 100%; } /* 기존의 요소가 앱솔루트가 되면서 static의 무브버튼이 뒤로 넘어가게됨. 앱솔루트로 바꿔주자. */ #visual .move-button{ position: absolute; display:flex; /* 배너의 크기에 맞춰 가로를 확장해준다. */ width:100%; height : 100px; /* 아이템들을 양 중앙 옆 배치 */ justify-content: space-between; /* 아이템을 중앙에 배치 */ align-items: center; } .prev-button{ /* 백그라운드 이미지를 움직여야하므로 x축으로 -33px만큼 움직인다. */ background: url("../images/icon-banner-nav.png") no-repeat -35px center; /* absolute는 부모의 영역이 없기 때문에 content크기에 맞춰지므로 가로 세로를 지정해준다. */ width :35px; height:52px; /* 글자 숨기기 */ text-indent:-999px; overflow:hidden; } /* absoult가 되면서 block의 기본사이즈가 파괴되고 content에 맞춰 줄어들게됨.(따라갈 부모가 없어져서) */ .next-button{ width :35px; height:52px; background: url("../images/icon-banner-nav.png") no-repeat -105px center; justify-content:flex-end; text-indent:-999px; overflow:hidden; } #notice{ height: 30px; background: #8cba35; } | cs |
'공부 > css' 카테고리의 다른 글
| Padding 줄 때, 지정한 높이가 깨지는 것 해결하기 (2) | 2017.05.29 |
|---|---|
| Transition, setTimeout 이용하여 메뉴 바 확대시키기 (1) | 2017.05.22 |
| Background 이미지 크기 설정하기 / 2중 큰 따옴표 처리하기 (0) | 2017.05.15 |
| 태그의 기본 속성 지우기(ul태그) (0) | 2017.05.15 |
| Html5 Section 나누기 (0) | 2017.05.15 |