오늘하루 열지않기 팝업

HTML 오늘하루 보지않음 닫기 CSS #popup{position:relative; display: none;} #popup::after{content:''; display:block; width:100%; height: 100%; position:fixed; left:0; top:0; background:rgba(0,0,0,0.7); z-index:998;} #popup .popup_wrap{position:fixed; left:50%; top:50%; z-index:999; transform:translate(-50%, -50%);} #popup .popup_btn{display:flex; align-items:center; justify-content: space-between; gap:1rem;..

2022.06.02

스크롤시 엘리먼트에 애니메이션 추가하기

HTML 스크롤 시 애니메이션 추가 CSS @keyframes animation-active { 0%{opacity: 0; position:relative; top:50px;} 100%{opacity: 1; position:relative; top:0;} } .animation{opacity: 0;} .animation-active{animation: animation-active 1 .5s; animation-fill-mode:forwards;} JS $( function(){ const Elements = $('.animation'); function scrollSize(){ const scrollTop = $(document).scrollTop(); // 스크롤TOP 값 const windowH =..

2022.05.20

input[type="number"] 화살표 및 키보드 막기

CSS input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } JS // input[type="number"] 키보드 막기 $( function(){ $("input[type='number']").on('keydown', function(e){ if(!((e.keyCode > 95 && e.keyCode 47 && e.keyCode < 58) || e.keyCode == 8)) { return false; } }); });

2022.05.18

input replace 유효성 체크

Javascript를 이용한 input value 유효성 검사. value 입력 시 다음 칸으로 focus() 된다. HTML 인증번호 4자리 입력 잘못된 인증번호 입니다! JS /* signup */ $(function(){ $(document).on('keypress keyup keydown', 'input[onlyNumber]', function(e){ console.log(e.which); if(/[a-z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g.test(this.value)){ //한글 막기 e.preventDefault(); this.value = ''; }else if (e.which != 8 && e.which != 0 //영문 e막기 && e.which 57 //숫자키만..

2022.05.03

반응형 풀스크린 영상

반응형 사이트에서 많이 볼 수 있는 풀스크린 영상 띄우기 CSS의 position과 transform, Javascript의 window width, height 를 이용해 표현할 수 있다. 풀스크린~태블릿 사이즈 까지는 영상을 띄우고, 그 이하 디바이스에서는 배경이미지로 교체하여 용량을 최적화한다. SCROLL DOWN 로고 menu01 menu02 menu03 menu04 내용 콘텐츠

2022.01.12

jQuery 셀렉터, 요소 복사 및 잘라내기

아이템 순서대로 찾기 jQuery 셀렉터에 의해 리턴되는 각각의 아이템에는 인덱스 번호가 할당되며, 이 번호는 객체집합을 필터링할 때 사용할 수 있다. 인덱스 번호를 이용하여 요소 찾기 메소드, 셀렉터 설명 .eq() 인덱스 번호에 해당하는 요소를 리턴한다. :lt() 지정된 숫자보다 인덱스 번호가 작은 요소들을 리턴한다. :gt() 지정된 숫자보다 인덱스 번호가 큰 요소드를 리턴한다. 요소를 잘라내거나 복사하기 jQuery 객체집합을 얻게되면 이 페이지의 메소드들을 이용하여 해당 요소들을 제거하거나 복사할 수 있다. 잘라내기 메소드 설명 .remove() DOM 트리에서 조건에 일치하는 요소들을 제거한다. (하위요소 및 텍스트 노드들도 모두 제거) .detach() .remove() 메서드와 동일하지만..

2022.01.11