CSS20 [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. [jQuery] 스크롤(scroll) 방향 감지 이벤트 제이쿼리(jQuery)를 이용하여 스크롤(scroll) 감지 이벤트 만들기 스크롤 방향에 따라 헤더(header) 숨김/표시 예시 [html] header [css] header{ position: fixed; width: 100%; height: 100px; background: pink; } main{ width: 100%; height: 1000px; background: skyblue; } [js] let lastScroll = 0; // 초기 스크롤 위치 $(window).scroll(function(){ let nowScroll = $(this).scrollTop(); // 현재 스크롤 위치 if (nowScroll > lastScroll) { // 스크롤 위치 증가 $('header').st.. 2023. 6. 14. [CSS] 흐르는 텍스트 배너 애니메이션 (scrolling text animation) css에서 keyframes와 animation을 사용하여 흐르는 텍스트 배너 애니메이션 만들기 [html] SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT SCROLL TEXT [css] @keyframes scroll-animation{ 0%{ left: 0; } 100%{ left: -400px; /* 텍스트 width와 동일 */ } } .scroll-text{ width: 100%; overflow: hidden; } .track{ display: flex; position: relative; width: 2800px; animation: scroll-animation 5s linear infinite; } .tra.. 2023. 6. 12. [jQuery] img 태그 경로(src) 변경 제이쿼리(jQuery)를 이용하여 버튼 클릭 시 img 태그 경로(src) 변경하기 [html] change [js] $(document).ready(function(){ $('#btn').click(function(){ $('img').attr('src', '교체 이미지 주소'); }) }); See the Pen [jQuery] attr img src _ 이미지 경로 변경 by Jinsik Son (@Jinsik-Son) on CodePen. 2023. 6. 7. [jQuery] 마우스 오버(hover) 내려오는 드롭 메뉴 제이쿼리(jQuery)를 이용하여 마우스 오버(hover) 내려오는 slide down 드롭 메뉴 만들기 [html] menu1 drop menu2 drop menu3 drop [css] ul{ display: flex; gap: 10px; } li{ position: relative; width: 100px; list-style: none; background: yellowgreen; } .drop-menu-wrap{ display: none; position: absolute; width: 100%; height: 60px; background: skyblue; } [js] $(document).ready(function(){ $('nav > ul > li').mouseover(function(){ .. 2023. 6. 6. [jQuery] 스크롤(scroll) 위치 감지 이벤트 제이쿼리(jQuery)를 이용하여 스크롤(scroll) 감지 이벤트 만들기 스크롤 시 배경색 변경 예시 [html] main menu [css] .menu{ position: fixed; top: 0; width: 100%; height: 40px; background: pink; } .menu.active{ background: blue; color: #fff; } .container{ width: 100%; height: 800px; } [js] $(document).on('scroll', function(){ if($(window).scrollTop() > 100){ $('.menu').addClass('active'); }else{ $('.menu').removeClass('active'); } .. 2023. 6. 2. 이전 1 2 3 다음 728x90
