본문 바로가기

전체 글28

[jQuery] data-tab 활용 탭 메뉴(tabs menu) data-tab 을 활용한 탭 메뉴(tabs menu) 구현 [html] menu1 menu2 menu3 menu 1 menu 2 menu 3 [css] *{ margin: 0; padding: 0; } ul{ display: flex; gap: 20px; position: relative; } li{ list-style: none; } li.on a{ font-weight: bold; color: red; } .content{ display: none; width: 300px; height: 300px; padding: 10px; margin-top: 10px; border: 1px solid black; } .content.on{ display: block; } [js] $('li').click(fu.. 2023. 8. 5.
[CSS] 텍스트(text)에 배경색(background) 적용 텍스트에 배경색 클리핑 마스크(clipping mask) 적용 [html] Clipping Mask BACKGROUND BACKGROUND [css] * { margin: 0; padding: 0; } h2 { /* 배경 그라데이션 */ background: rgb(34,193,195); background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%); text-align: center; /* 텍스트에 배경색 적용 */ color: transparent; background-clip: text; -webkit-background-clip: text; } section { display: grid; grid-template-.. 2023. 8. 3.
[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.
[jQuery] 팝업(popup) / 모달(Modal) 시 스크롤 비활성화 (iOS 포함 모든 기기) 팝업(popup)이나 모달(modal) 사용 시 바디의 스크롤(scroll)을 비활성화 하는 방법 iOS(아이폰)를 포함한 모든 기기에 대응 [html] section1 section2 popup popup toggle [css] *{ margin: 0; padding: 0; } body { width: 100%; } section { height: 600px; } .section1 { background: yellowgreen; } .section2 { background: skyblue; } .popup { display: none; position: fixed; left: 0; top: 0; width: 80%; height: 80vh; background: violet; } .popup.activ.. 2023. 7. 25.
[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.
[JavaScript] forEach 활용 탭 메뉴 (Tabs) 구성 자바스크립트의 forEach를 활용하여 탭 메뉴 구성하기 [html] tab1 tab1 content tab2 tab2 content tab3 tab3 content [css] ul { position: relative; padding: 0; } li { list-style: none; } a{ color: inherit; text-decoration: none; } .tab-menu { display: flex; justify-content: space-between; width: 200px; } .tab.active { color: red; text-decoration: underline; } .content { display: none; position: absolute; left: 0; top: .. 2023. 7. 8.
[CSS] 반응형 비율 유지 박스(responsive box) css를 활용하여 반응형에서 가로/세로 2:1 비율을 유지하는 박스 만들기 [html] 2:1 box box1: width 15% box1: width 20% 1. 패딩값(padding) 사용 [css] .box1{ width: 15%; background: yellowgreen; } .box1::after{ content: ""; display: block; padding-top: 50%; /* 예) 1:1 박스의 경우 100% 입력 */ } 2. aspect-ratio 사용 [css] .box2{ width: 20%; aspect-ratio: 2 / 1; background: skyblue; } See the Pen [CSS] responsive box ratio _ 반응형 박스 비율 유지 by Ji.. 2023. 7. 3.
[CSS] scroll bar design _ 스크롤바 디자인 [html] Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem excepturi laborum quidem ullam quae, magni temporibus magnam quasi adipisci laudantium natus voluptatum facere cum. Distinctio corporis porro eos odit sed? [css] div{ width: 200px; height: 200px; outline: 1px solid red; overflow-y: scroll; } div::-webkit-scrollbar{ /* 스크롤바 배경 */ width: 20px; border-radius: 10px; backg.. 2023. 6. 30.
[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.
728x90

티스토리툴바