반응형 Vuejs_JS_CSS(3)11 자바스크립트 관련 - javascript로 fadein / fadeout 효과 javascript로 fadein, fadeout 투명하고 살짝 커진 상태에서 원래 상태로 보여지는 효과 html css .bgwrap{ position:relative; width:100%; height:100%; } .bgwrap .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; transform:scale(1.05) rotate(0.01deg); opacity:0; transition:opacity 0.8s ease, transform 4s ease; } .bgwrap .bg.on{ z-inde.. 2022. 9. 1. 자바스크립트 관련 - 약관 스크롤 해서 끝까지 내려갔을 때 체크박스 선택되게 약관 영역 맨 아래로 내렸을 때 그 아래 있는 체크박스가 선택 가능하게 html ... 동의 javascript fc=()=>{ if( (document.querySelector(".ag").scrollHeight - document.querySelector(".ag").scrollTop) === document.querySelector(".ag").clientHeight ){ // 스크롤 영역의 높이 - 현재 스크롤 위치 = div의 높이 // 약관을 맨 아래까지 내렸다.. 라고 인정 // checkbox에 있는 disabled 제거 document.getElementById("ag").disabled=false; } } 2022. 8. 31. css - print 관련 기본 세팅 프린트를 할 때 CSS에서 하는 설정 @media print{ nav,aside{display:none;}/* 불필요한거 안보이게 */ body,section{padding:0;margin:0;width:100%;} p{page-break-after:avoid;}/* 텍스트가 잘리지 않도록 */ img{max-width:100%!important;}/* 이미지가 잘리지 않도록 */ /* 어떤 부분부터는 새로운 페이지에서 출력(예: article은 새로운 페이지에서 시작) */ article{page-break-before:always;} /* 목록이나 이미지 묶음이 페이지가 넘어가면서 중간에 잘리지 않게 */ ul,img{page-break-inside:avoid;} @page{margin:2cm;}/*.. 2022. 8. 21. js/css - 아이폰 사파리&크롬에서 100vh가 하단 툴바랑 주소창때문에 제대로 적용 안되는 현상 안드로이드는 잘 됨 아이폰에서 사파리, 크롬 100vh가 제대로 적용 안될 때 css에서 .somediv{height:calc(var(--vh, 1vh) * 100);} /* 100이면 100vh */ js에서 let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', vh+"px"); // resize window.addEventListener("resize", ()=>{ let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', vh+"px"); }) 모바일웹 전체 메뉴일 때. 참고 : 아이폰 브라우저(사파리,.. 2022. 8. 8. 이전 1 2 3 다음 반응형