전체 글28 [jQuery] 아이폰(iOS) 사파리 바운스 스크롤(bounce scroll) 대응 헤더 제이쿼리(jQuery)를 이용하여 아이폰(iOS) 사파리 바운스 스크롤(bounce scroll) 감지 대응하기 스크롤 방향에 따라 헤더(header) 숨김/표시 처리를 하여도 아이폰(iOS)의 사파리에서 상단으로 이동할때 바운스 스크롤 이펙트가 작동하면 스크롤 위치가 마이너스로 인식되어 헤더가 표시되지 않는다. 문제는 상단에서 바운스 스크롤 이펙트가 작동하고 있을때와 이펙트가 종료되었을 때 모두 헤더가 표시되지 않는다. 해결 방법은 기존 방향 감지 이벤트에서 스크롤 위치가 마이너스라도 헤더가 표시될 수 있게만 추가하면 된다. [js] let lastScroll = 0; $(window).scroll(function(){ let nowScroll = $(this).scrollTop(); if (lastS.. 2023. 6. 16. [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. [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. [CSS] 텍스트 말 줄임표(...) 사용법 1. 한 줄에 말 줄임표 사용법 .ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 2. 여러 줄에 말 줄임표 사용법 .line{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } See the Pen Untitled by Jinsik Son (@Jinsik-Son) on CodePen. 2023. 4. 26. GitHub 저장소 생성부터 푸시까지 1. GitHub 저장소 만들기 New respository (새 저장소) 선택 2. Repository name, Description만 입력 3. VS Code 터미널에서 Git 초기화 및 설정 git init : Git 초기화, 로컬 Git 저장소로 변경 git config user.name abc : GitHub 가입 시 유저 네임 abc 인증 git config user.email abc@abc.co.kr : GitHub 가입 시 이메일 abc@abc.co.kr 인증 git branch -m main : GitHub 기본 브랜치 main 로 변경 git remote rm origin : 기존 origin 삭제 git remote add origin https://github.com/abc/abc.. 2023. 3. 3. 이전 1 2 3 4 다음 728x90
