Library6 [Tabulator] 배경색(background) / 테두리(border) / 마우스오버(mouseover) 변경 테이블 라이브러리(table library)인 타뷸레이터(Tabulator) 배경색(background) 및 테두리(boder), 마우스오버(hover) 효과 변경 방법 [html] [css] html, body { font-family: 'Roboto', sans-serif; color: #333; } .tabulator { margin: 2rem; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .tabulator .tabulator-header { border-bottom: none; /* header 하단 구분선 삭제 */ } .tabulator .tabulator-header .tabulator-col { background: #4.. 2023. 9. 17. [DataTables] 배경색(background) / 테두리 (border) 변경 테이블 라이브러리(table library)인 데이터테이블(DataTables) 배경색(background) 및 테두리(boder) 변경 방법 [html] Column 1 Column 2 Row 1 Data 1 Row 1 Data 2 Row 2 Data 1 Row 2 Data 2 Row 3 Data 1 Row 3 Data 2 Row 4 Data 1 Row 4 Data 2 [css] html, body { background: #ddd; color: #333; } #myTable_wrapper .dataTables_length, #myTable_wrapper .dataTables_filter { padding-bottom: 1rem; } #myTable { border: none; /* 테이블 최하단 테두.. 2023. 9. 14. [slick] slider 실행 시 콜백(callback) 이벤트 슬릭(slick) 슬라이더(slider) 실행 전/후 콜백(callback) 이벤트 [html] item01 item02 item03 item04 item05 [css] .my-slider { position: relative; } .my-slider .slick-slide { height: 100px; border: 1px solid blue; box-sizing: border-box; text-align: center; } .slick-arrow { position: absolute; bottom: -30px; left: 0; } .slick-arrow.slick-next { left: 80px; } p { font-size: 30px; text-align: center; } [js] $('.my-s.. 2023. 7. 26. [swiper] slide 실행 시 콜백(callback) 이벤트 스와이퍼 슬라이드 실행 시 이벤트 설정 [html] Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 [css] .swiper { width: 300px; height: 200px; } .swiper-slide { background: skyblue; text-align: center; } .text{ width: 300px; height: 100px; margin: 0 auto; } [js] var swiper = new Swiper(".mySwiper", { navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, speed: 1000, loop: true, on: { slideChange: fu.. 2023. 7. 19. [slick] slider에서 재생 / 정지 버튼 추가 slick slider(슬릭 슬라이더)에서 오토 슬라이드 재생 / 정지 버튼 추가하기 [html] 재생 정지 [css] .slick-test{ width: 600px; overflow: hidden; outline: 1px solid blue; } .slick-test .slick-list{ margin: 0 -10px; } .slick-test .slick-slide{ height: 200px; margin: 0 10px; background: skyblue; } [js] $(document).ready(function(){ $('.slick-test').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, autoplay: true, autoplay.. 2023. 6. 22. [slick] slider에서 margin(여백) 만드는 법 slick slider(슬릭 슬라이더)에서 width 1200px 슬라이더에 margin(여백) 30px 만들기 [html] [css] .slick-margin{ width: 1200px; overflow: hidden; outline: 1px solid red; } .slick-margin .slick-list{ margin: 0 -15px; } .slick-margin .slick-slide{ height: 200px; margin: 0 15px; background: pink; } [js] $('.slick-margin').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, }); See the Pen slick slider margin _ 슬릭.. 2023. 5. 31. 이전 1 다음 728x90
