jQuery(11)
-
jQuery 최신 버전 cdn
위 코드를 사용하면 최신버전의 jQuery를 사용할 수 있다고 한다.
2022.08.29 -
jQuery)쿠키를 사용하여 하루만 뜨는 모달창 만들기 + 로딩 시 첫 화면 스크롤 막기
HTML jQuery Cookie라는 기능을 이용하여 하루만 혹은 기간을 정하여 모달창을 띄울 수 있다. jQuery기능을 기본적으로 사용하기에 jQuery도 로드해야 한다. 오늘 그만 보기 원하는 모달을 마크업 한다. 구현하고자 하는 기능은 화면이 처음 로딩됐을 때 모달이 뜨며 스크롤이 안돼게 고정시키는 것(클릭 등은 모달의 반투명 배경으로 자연스럽게 막힘) body영역에 스크롤을 막을 함수를 onload를 사용하여 불러와준다. 클릭(a링크)했을 때 상단으로 올라가지 않도록 javascript:; 입력 onload 참고페이지 https://itworldyo.tistory.com/101 href="" 참고 페이지 https://minimal-dev.tistory.com/28 a href="#", void..
2022.05.23 -
반응형 동영상 + 동영상의 높이 값에 따라 바뀌는 header css
*HTML 메뉴1 메뉴2 메뉴3 video, iframe 등 동영상을 링크하는 태그를 부모요소로 감싸준 마크업을 준비 *CSS /* 헤더 기본 css */ header { height: 90px; width: 100%; position: fixed; top: 0; background-color: #fff; opacity: .8; transition: all .3s; z-index: 100; /* 반응형 동영상 */ #video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } #video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 헤더메뉴..
2022.05.03 -
클릭한 요소만 css 요소를 추가하는 방법 (.find()) + 클릭했을 때 특정 요소만 보여지기
HTML 라디오광고·방송광고 광고음악·로고송 교가·시가 성우녹음·더빙 사운드디자인·음향 CSS #portfolio ul.title li.hover { background-color: #ccc; transition: all .2s; } jQuery $('.title li').on('click', function(){ $('.title').find(".hover").removeClass('hover'); $(this).addClass('hover'); }); .find()는 하위 요소를 찾으므로 li의 '.hover'을 찾기 위해서는 그의 부모요소인 '.title'에 적용해야 한다. 적용예시 +)클릭한 요소에 관련된 요소만 보여지게 하는 방법 (2개) HTML 추천인 아이디 참여 이벤트명 확인 참여 이벤트 ..
2022.04.20 -
slideToggle 중복실행 시
Blog Facebook Instagram Youtube English $('.hamMenu').off('click').click(function(e){ e.preventDefault(); $('header nav').slideToggle(300); }); slideToggle 적용 시 display:none에서 block이 된 후 다시 none이 되는 문제 발생 .off()만으로는 해결되지 않았으나 일단 넣어둠 e.preventDefault(); 혹은 return false; 로 중복실행문제 해결 하지만 span으로 만들어둔 햄버거 메뉴의 transform으로 만들어둔 애니메이션이 꺼짐 참고사이트 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=tru..
2022.04.07