코드 저장소, 생활 정보, 공유, 꿀팁

특정 요소가 브라우저에 보여질 때 감지하기 html(sample) ... <div class="box"></div> <div class="box"></div> <div class="box_change bg1"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box_change bg2"></div> <div class="box"></div> <div class="box"></div> <div class="box_change bg3"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box_change bg4"></div> <div class="box"></div> <div class="box"></div...

주간 날짜 구하기 html(template) ... <div class="week_txt_line"> <button class="btn_cal left" @click="currentWeek('prev')"> <img src="@/assets/images/icon_arrow_cal.svg" alt=""> </button> <p class="week_txt">{{ showeek }}</p> <button class="btn_cal right" @click="currentWeek('next')"> <img src="@/assets/images/icon_arrow_cal.svg" alt=""> </button> </div> ... javascript <script setup> import { ref, computed } from 'vue' import dayjs from 'dayjs' import isSameOrBefore from 'dayjs/plugin/isSameOrBefore' import isSameOrAfter from 'dayjs/plugin/isSameOrAfter' dayjs.extend(isSameOrBefore) dayjs.extend(isSameOrAfter) // const info = ref({ weeks: [],// 현재 '주'의 날짜들 moveweekno: 0,// ± 이동한 주 }) // 현재 '주'의 날짜구하기(일0 ~ 토6) const selectWeek = (date) =...

웹페이지에서 화면을 pdf로 다운로드 하거나 바로 출력하기 html 부분 <section ref="pdfRef"> <div class="winpop"> <section id="first-section"> ... </section> ... </div> </section> 스크립트 부분 import { ref } from "vue"; import html2canvas from "html2canvas"; import { jsPDF } from "jspdf"; const pdfRef = ref(null); // pdf 다운로드 const generatePDF = () => { const winpop = document.querySelector(".winpop"); winpop.style.height = "auto"; //loading.value = true; html2canvas(pdfRef.value, { scrollX: 0, scrollY: 0, scale: 3, logging: false, // useCORS:true }).then(canvas => { let image = canvas.toDataURL("image/jpg"); const doc = new jsPDF("p", "mm", "a4", true); winpop.style.scroll = "auto"; const section = document.querySelector("#first-section"); let resolution = ...

스크롤바가 아닌 progress bar 스타일로 현재 컨텐츠의 위치 표시하기 Progress bar로 컨텐츠의 위치 표시 <template> <div class="progress_line"> <input type="range" min="0" step="0.1" max="100" :value="info.val"> </div> </template> <script setup> import { ref } from "vue" // const info = ref({ val: 0,// }) // @input="checkValue" @mousedown="mDown" @mouseup="mUp" // progress bar 에서 클릭드래그 시 컨텐츠 영역이 현재 progress 위치에 맞게 같이 이동되게 할 때 추가 // const mDown = () => { // document.documentElement.classList.add("scrollbehavior_no"); // } // const mUp = () => { // document.documentElement.classList.remove("scrollbehavior_no"); // } // const checkValue = (e) => { // info.value.val = e.target.value; // let scrolheight = document.documentElement.scrollHeight; // let scrolly = Math.floor((scrolheight - window.innerHeight) * info.value.val / 100) // win...

drag해서 가로로 스크롤 이동 .vue <template> ... <div class="pd_img" @pointerenter="pEnter" @pointerdown="pDown" @pointerleave="pLeave" @pointerup="pUp" @pointermove="pMove" @click="pClick" @scroll="pScroll"><!-- @wheel="pWheel" --> <img src="가로로 긴~ 이미지.jpg" alt=""> </div> ... </template> <script setup> import { ref } from "vue" // const info = ref({ is_down: false,// 스크롤/드래그 시작 여부 start_x: null, scroll_left: null, imgdiv: null,// 이미지 imgtxtno: 0,// 이미지의 특정 위치를 지날 때 보여지는 텍스트 번호 }) // const pEnter = () => { if(info.value.imgdiv === null) { info.value.imgdiv = document.querySelector(".pd_img"); } } const pDown = (e) => { // console.log("mDown", e); info.value.is_down = true; info.value.start_x = e.pageX - info.value.imgdiv.offsetLeft; info.va...

오늘 그만 보기 설정하기. setCookie, getCookie javascript // 쿠키 확인 if(!getCookie("onday")) { // oneday 쿠키가 없으면 info.value.show = true; // (레이어)팝업 보이기 } ... // 닫기 const closePop = (n) => { info.value.show = false; // 오늘 그만 보기로 닫을 때 if(n !== undefined) { setCookie("onday", 1, 1); // oneday 쿠키 설정 } } ... // 조건에 맞는 쿠키가 없다면 undefined를 반환 const getCookie = (name) => { const encodeName = encodeURIComponent(name); const matches = document.cookie.match(new RegExp( "(?:^|; )" + encodeName.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" )); return matches ? decodeURIComponent(matches[1]) : undefined; } // const setCookie = (name, value, days) => { let expires = ''; // e.g. 'hello world' -> 'hello%20world', 'test?' -> 'test%3F' const updatedCookie = encodeURIComponent(name) + '=' + encodeURIComponent(value); if(days) { const date = new D...

지연 실행 함수(debounce) 만들기 .vue 파일 <template> ... <input type="text" class="keyword_input" placeholder="키워드를 입력하세요" :value="info.keyword" @input="info.keyword = $event.target.value" @keyup="searchUp"> ... </template> <script setup> import { ref } from "vue" const info = ref({ keyword: "", // 검색어 }) // 입력할 때마다 이벤트 보내지 않게 const debounce = (fn, delay) => { let timer; return (...args) => { if(timer) { clearTimeout(timer); } const context = this; timer = setTimeout(() => { fn.apply(context, args); }, delay); } } const searchUp = debounce(() => { console.log(info.value.keyword);// 타이핑이 0.4초 멈추면 실행 }, 400); </script> debounce 함수 사용하기 끝.

배열 두개 비교해서 배열값 추가, 삭제 script 부분 const inf = ref({ arr1: [1, 2, 3, 4, 5], arr2: [1, 2, 3, 4, 5], val: ["ㄱ", "ㄴ", "ㄷ", "ㄹ", "ㅁ"] }) // arr2에서 특정 값 제거. [1, 2, 4, 5] inf.value.arr2.splice(2, 1); // arr2에서 배열 값이 제거되어서 arr1이 더 많을 때 if(inf.value.arr1.length > inf.value.arr2.length) { // arr1과 비교해서 없는 값의 index를 찾고, 대응하는 val에서 값 제거하기 inf.value.arr1.some((ele, idx) => { // arr1에서 arr2에 없는 값 찾기 = false 인거 if(!inf.value.arr2.includes(ele)) { // arr2에 없는 arr1의 값의 index를 이용해 val의 값 제거하기 inf.value.val.splice(idx, 1); console.log(inf.value.val);// val에서 대응하는 값 제거됨. ["ㄱ", "ㄴ", "ㄹ", "ㅁ"] } }) } // const imf = ref({ ar1: [1, 2, 3, 9], ar2: [1, 2, 3, 9], va: ["ㄱ", "ㄴ", "ㄷ", "ㅈ"] }) // ar2에 특정 값 추가. [1, 2, 3, 7, 9] imf.value.ar2.splice(3, 0, 7); // ar2에 배열 값이 추가되어서 ar2가 더 많을 때 if(imf.value.ar2.length > imf.value....

체크박스 전체 동의,일부만 동의할 때 표시방법 html 부분 <div class="agree_box"> <Checkbox name="agreeall" idfor="agreeall" v-model="agree.checkAll" @change="checkAll($event)" txt="전체 동의" /> <div class="mr"> <Checkbox name="agreecheck" idfor="agree1" value="agr1" v-model="agree.checkNo" @change="checkNo($event, 0)" txt="[필수] 만 14세 이상입니다." /> <Checkbox name="agreecheck" idfor="agree2" value="agr2" v-model="agree.checkNo" @change="checkNo($event, 1)" txt="[필수] 개인정보 수집 및 이용동의" /> <Checkbox name="agreecheck" idfor="agree3" value="agr3" v-model="agree.checkNo" @change="checkNo($event, 2)" txt="[필수] 제3자 정보제공 동의" /> <Checkbox name="agreecheck" idfor="agree4" value="agr4" v-mode...

props, emit, computed, watch, onBeforeMount 등 사용법 vuejs (computed, watch, onBeforeMount) import { ref, computed, watch, onBeforeMount } from "vue"; import { useRoute } from "vue-router"; // image 경로는 이런식으로 const img_xbtn = new URL("@/assets/images/close.svg", import.meta.url).href; const route = useRoute() // ## computed 관련 const info = ref({ ... showNo: computed(() => { return (no) => { return no + ... } }) }) // 위와 같이 하거나 아래처럼 const info2 = computed(() => { return (member.value.map((member) => { return { no: member?.no ? member.no : "1", ... } }) }) // // ## computed 관련 onBeforeMount(() => { // onBeforeMount 관련 코드 }) watch(route, (value) => { // watch 관련 코드// value?.query?.no }) vuejs (props, emit - component 사용시) <template> <transition name="fade"> <div class="lpop_bg" v-if="showpop"> <div class=...

파일 올릴 때 드래그해서 올리기 html <!-- 파일을 drop하는 영역엔 dragover, dragenter 막아둬야 drop이 된다 --> <!-- <div class="file_box" @drop.prevent="onDrop($event)" @dragover.prevent @dragenter.prevent> --> <div class="file_box" @drop.prevent="onDrop($event)" @dragover.prevent @dragenter.prevent="onEnter($event)" @dragleave.prevent="onLeave($event)"> <p class="file_txt">이곳에 파일을 놓으세요.<br>or</p> <p class="file_btn"> <input type="file" @change="selectFile" accept="image/png"> <span class="fake_btn">파일 선택</span> </p> </div> scss .file_box { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 20rem; text-align: center; background-color: #ddd; border-radius: 2rem; input...

textarea에서 원하는 줄 수 만큼만 입력되게 하기 html <textarea class="noscrol" placeholder="(최대 20자)" maxlength="20" rows="2" :value="info.txt" @input="info.txt=$event.target.value" @keyup="limitLine($event)"></textarea> css /* scrollbaer 안생기게 */ .noscrol { overflow: hidden; } js limitLine = (e) => { // textarea에 선언된 row 수 let maxrow = e.target.rows; // 현재 textarea에 입력된 row 수 let curline = (e.target.value.match(/\n/g) || []).length + 1; if(e.which === 13 && curline >= maxrow) { info.updatetxt = e.target.value.split("\n").slice(0, maxrow); info.txt = info.updatetxt.join("\n"); } } textarea에서 글자 수 말고 줄 수(엔터키)를 제한하려면 위와 같이 적용하자. 끝.

vue 화면에서 특정 input으로 포커스 이동하기 html <div class="m_radio fcolumn"> <input type="radio" name="withdinfo" id="withdinfo1" value="voc" v-model="member.withdchk"> <label for="withdinfo1">VOC</label> <div class="fcoldiv"> <input type="radio" name="withdinfo" id="withdinfo2" value="etc" v-model="member.withdchk" @change="memberwithdcmt.focus()"> <label for="withdinfo2">기타</label> <input type="text" id="withdinfo2" class="etc_ip" :class="{ipno: member.withdchk === 'voc'}" ref="memberwithdcmt" v-model="member.withdcmt"> </div> </div> <!-- 위는 DOM에 직접 설정해서 포커스 이동 ... or... 아래는 스크립트로 포커스 이동 --> <div class="m_radio fcolumn"> <div class="fcoldiv"> <...

달력 플러그인( flatpickr.js )에서 자동으로 시작일, 종료일 지정하기 html <input type="text" class="input_cal trans calStr" placeholder="시작일" readonly v-model="cal.sdate"> <input type="text" class="input_cal trans calEnd" placeholder="종료일" readonly v-model="cal.edate"> js let cals = flatpickr(".calStr", { onChange: function(selectDates, dateStr, instance) { cal.sdate = dateStr; cale.set("minDate", cal.sdate); } }); let cale = flatpickr(".calEnd", { onChange: function(selectDates, dateStr, instance) { cal.edate = dateStr; cals.set("maxDate", cal.edate); } }); 날짜가 변경되면 set(option, value)을 이용해서 다른 달력의 옵션을 설정할 수 있다 끝.

자바스크립트로 url 주소, 파라미터 가져오기 searchParams js // url이 https://honeydanji.healthsarang.com?category=39 일 때 // 파라미터만 가져오기 console.log(window.location.search); // "?category=39" // 특정 파라미터만 가져오기 console.log(new URL(window.location).searchParams.get("category")); // "39" console.log(new URL(window.location).searchParams.getAll("category")); // ["39"] <= 배열로 리턴됨 끝.

100% 완벽할 수는 없지만 기본적으로 마우스 우클릭을 하지 못하게 하는 방법, 키보드 단축키로 개발자 도구 열지 못하게 방지 javascript 추가로 마우스 우클릭과 키보드를 이용한 개발자 도구 열지 못하게 하기 window.onload=function(){function e(e){return e.stopPropagation?e.stopPropagation(): window.event&&(window.event.cancelBubble=!0),e.preventDefault(),!1} document.addEventListener("contextmenu",function(e){e.preventDefault()},!1), document.addEventListener("keydown",function(t){t.ctrlKey&&t.shiftKey&&73==t.keyCode&&e(t), t.ctrlKey&&t.shiftKey&&74==t.keyCode&&e(t),t.ctrlKey&&t.shiftKey&&67==t.keyCode&&e(t), 83==t.keyCode&&(navigator.platform.match("Mac")?t.metaKey:t.ctrlKey)&&e(t), t.ctrlKey&&85==t.keyCode&&e(t),123==event.keyCode&&e(t)},!1)}; 유의미한 결과는 없지만 그래도 조금이나마 귀찮게 해서 소스를 볼 때 지연시킬 목적으로는 적당할 것 같다 끝.

웹페이지에서 스크롤을 내릴 때 콘텐츠가 나타나는 효과, 스크롤 올릴 때 사라지는 효과 html <div class="service s1"> <div class="cont">...</div> </div> <div class="service s2"> <div class="cont">...</div> </div> <div class="service s3"> <div class="cont">...</div> </div> <div class="service s4"> <div class="cont">...</div> </div> css .service .cont{ opacity:0; /* 기본값 : 투명도 0 */ transform:translateY(200px); /* 기본값 : 아래로 200px에 위치 */ transition:transform 0.8s ease, opacity 0.8s ease; /* 애니메이션 할 속성, 속도, 효과 */ } .service.on .cont{ opacity:1; /* 투명도 1 */ transform:translateY(0); /* 원래 위치로 */ } javascript // 스크롤 할 때 특정 콘텐츠의 브라우저 상단 기준 높이 값 구하기 scrollPos = (ofstop, no=0.7) => { return document.querySelector(ofstop).offsetTop - (Math.floor(window.innerHeight * no)); } // 스크롤 기준 값 let pastScrollY = window.scrollY; document.a...

자바스크립트에서 일정 시간 후, 또는 일정 시간마다 어떠한 동작을 실행시킬 때 사용하는 함수, setTimeout, setInterval, requestAnimationFrame 자바스크립트에는 timer 함수 가 3가지 있다. setInterval setTimeout requestAnimationFrame setInterval 시간을 지정해서 매 시간마다 함수를 실행한다. 다른 함수가 먼저 실행되면 기다렸다가 실행하기 때문에 정해진 시간에 실행되지 않을 수 있다. 위와 같은 문제로 일반적으로 애니메이션을 만들 땐 잘 사용하지 않는다. let interval_no = 0; // 제어용 let sampleInterval = setInterval(() => { console.log("time : ", new Date()); interval_no += 1; // interval마다 1 증가 // interval_no 가 5보다 크거나 같으면 if (interval_no >= 5 ){ clearInterval(sampleInterval); // 중지 } }, 500); // 0.5초마다 실행 setTimeout 지정된 시간이 지난 후 한 번만 실행한다. setInterval 과 같은 문제점이 있다. timeout 할 때 다시 호출하는 식으로 제어할 수 있다. let timeout_no = 0; // 제어용 let timerId = null; // setTimeout ID용 sampleTimeout = () => { setTimeout(() => { console.log("time : ", new Date()); timeout_no += 1; // 0.5초 후 1 증가 // timeout_no가 50보다 작거나 같으면 if (timeout_no requestAnimationFrame s...

한쪽 방향으로 계속 이동되지만 마우스를 가져가면 멈추고, 마우스가 나가면 다시 이동하는 효과 css 버전 - animation html <div class="wrap"> <div class="txt_box" @mouseenter="stopNoti(true)" @mouseleave="stopNoti(false)"> <a href="공지1">공지1</a> <a href="공지2">공지2</a> <a href="공지3">공지3</a> </div> </div> css /* dlsplay:flex 한 이유는 .txt_box가 복제되어서 들어가서 라인을 맞추려고 */ .wrap{ display:flex; width:1000px; overflow:hidden; } .txt_box{ display:flex; align-items:center; animation:leftToRight 20s linear infinite; } /* 마우스가 오버되면 정지 */ .txt_box.on{ animation-play-state:paused; } /* 왼쪽에서 오른쪽 이동. javascript에서 .txt_box를 복제해서 넣어서 -100% -> 0%. */ @keyframes leftToRight { from{ transform:translateX(-100%); } to{ transform:translateX(0%); } } ...... js // 이동되는 영역 복제해서 넣기 let cloneBox = document.querySelector(".txt_box").cloneNode(true); document.qu...

css를 이용한 fadein, fadeout효과, javascript로 제어하기 여러개의 배경이미지가 겹쳐져 있을 때, 하나의 배경이미지가 살짝 크고 투명한 상태에서 원래 크기와 불투명한 상태로 나타나고(fadein), 일정 시간이 지나 다른 이미지가 같은 방식으로 나타날 때 보여지고 있던 이미지는 역순으로 사라지는 효과(fadeout) html <!-- 배경을 감싸는 영역 --> <div class="bg_area"> <!-- vuejs를 이용하여 배경이미지를 반복 생성 --> <div class="bg" :style="'background-image:url('+ list +')'" :class="{on: idx === efc.bgNo}" v-for="(list, idx) in efc.bgUrls" :key="idx"></div> </div> 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; /* 투명도 0으로 안보이게 */ transition:opacity 0.8s ease, transform 4s ease; /* 투명도랑 크기, 회전에 애니메이션 효과 */...