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

특정 요소가 브라우저에 보여질 때 감지하기 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) =...

router 관련 세팅 /router/index.js or router.js import { createRouter, createWebHistory } from "vue-router" // const alwaysTitle = "브라우저 틀에 항상 보여지는 타이틀" const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), // 라우터 이동 시 이전 화면으로 돌아갈 때 이전 스크롤 위치로 이동할 경우 확인(savedPosition) scrollBehavior(to, from, savedPosition) { console.log('SavedPosition', savedPosition) if (savedPosition) { return savedPosition } return { top: 0, left: 0 } }, routes: [ // { path: "/", redirect: "/directurl" }, { path: "/404", name: "notFound", component: () => import("@/views/NotFound.vue"), meta: { title: "페이지를 찾을 수 없습니다" } }, { path: "/:pathMatch(.*)*", redirect: "/404" }, // 로그인 레이아웃 { path: "/login", name: "loginLayout", component: () =...

웹페이지에서 화면을 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...

AOS는 잘 되지만 IOS에서 안되는 현상 수정 Video 자동재생 시 인라인으로 보여지기 <video muted autoplay loop playsinline oncontextmenu="return false" controlsList="nodownload" controls preload="metadata" poster=""> <source src="@/assets/video/video2.mp4" type="video/mp4" /> </video> iphone, ipad에서는 비디오 자동재생 시 비디오가 전체화면으로 보여지는데, playsinline 을 추가하면 안드로이드 폰처럼 인라인으로 보여져서 관리하기가 쉬워진다. 폰에서 숫자 키패드만 나오기 <input type="text" inputmode="numeric" pattern="[0-9]*"> iphone, ipad에서는 <input type="number">일 때 숫자만 나오지 않는데, 그 때 위와 같이 inputmode를 지정하고 pattern으로 숫자만 포함시키면 된다. 비슷한 다른 방법으로는 <input type="tel"> 이 있다. button에 focus 하기 <a role="button" tabindex="1"> iphone, ipad에서 button에 focus가 안될 때는 role="button" tabindex="1" 같은 속성을 추가하면 가능해진다. 끝.

vuejs (3.0)에서 달력 플러그인(flatpickr)을 component로 사용 할 때 시작일, 종료일 지정하기 .vue <flat-pickr class="input_cal trans calStr" placeholder="시작일" readonly v-model="info.sdate" @on-change="stChange" :config="config('st')" /> <flat-pickr class="input_cal trans calEnd" placeholder="종료일" readonly v-model="info.edate" @on-change="edChange" :config="config('ed')" /> <flat-pickr class="input_cal trans calToay" placeholder="오늘" readonly v-model="info.today" :config="configtoday" /> javascript <script setup> import { ref, computed, nextTick } from "vue"; import flatPickr from "vue-flatpickr-component"; import "flatpickr/dist/flatpickr.min.css"; import dayjs from "dayjs"; const info = ref({ sdate:"",// 시작일 edate:"",// 종료일...

오늘 그만 보기 설정하기. 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 함수 사용하기 끝.

Radio component component .vue파일 <template> <div class="m_radio"> <input type="radio" :name="name" :id="idfor" :value="value" :checked="value === selected"> <label :for="idfor">{{ txt }}</label> </div> </template> <script setup> const props = defineProps({ name: { type: String, defatult: undefined }, idfor: { type: String, defatult: undefined }, value: { type: String, defatult: undefined }, txt: { type: String, default: '' }, selected: { type: String, defatult: undefined } }) </script> <style scoped src="./Radio.scss"></style> <!-- // 부모 컴포넌트에서 사용 시 # name : radio name # idfor : radio id = label for # value : radio value # selected : 현재 선택된 radio # txt : label <Radio name="name" idfor="idfor" value="value" ...

배열 두개 비교해서 배열값 추가, 삭제 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....

Selectbox component component .vue파일 <template> <div class="m_selectbox_cm"> <button class="multi_del" v-if="info.multiple && info.multitxt.length > 1" @mouseenter="info.multidel = true" @mouseleave="info.multidel = false" @click="multiDel"> <img src="@/assets/images/icon_close.svg" alt=""> </button> <a role="button" tabindex="1" :id="id" class="select" @click="showList" @blur="optionHide" @mouseenter="info.blurbo = false" @mouseleave="info.blurbo = true"> {{ info.multiple ? info.selecmulti : info.selecone }} </a> <div class="optionwrap" v-if="info.showopt"> <div class="optionslist"> <button class="opt" :class...

Checkbox component component .vue파일 <template> <div class="m_checkbox" :class="{ nolabel: txt === '' }"> <input type="checkbox" :name="name" :id="idfor" :value="value" /><label :for="idfor">{{ txt }}</label> </div> </template> <script setup> const props = defineProps({ name: { type: String, defatult: undefined }, idfor: { type: String, defatult: undefined }, value: { type: String, defatult: undefined }, txt: { type: String, default: '' } }) </script> <!-- // 부모 컴포넌트에서 사용 시 # name : checkbox name # idfor : checkbox id = label for # value : checkbox value # txt : label <Checkbox name="name" idfor="idfor" value="value" txt="text" /> ex : <Checkbox name="agreeall" idfor="agreeall" v-model="agree.chec...

Input component component .vue파일 <template> <div class="input_wrap"> <p class="top_title" v-if="inputtxt">{{ txt }}</p> <input :id="id" :type="type" class="box_input" :class="{ on: inputtxt }" :placeholder="txt" :readonly="read" v-model="inputtxt" @input="upInfo(inputtxt = $event.target.value)"> </div> </template> <script setup> import { ref, watch } from "vue"; const props = defineProps({ id: undefined, type: { type: String, defatult: "text" }, txt: { type: String, defatult: undefined }, val: undefined, read: { type: Boolean, default: false }, }) watch(props, (e) => { if(e.val) { inputtxt.value = e.val } }) const inputtxt = ref(); inputtxt.value = props.val; const emit = defineEmits(["model"]); cons...

체크박스 전체 동의,일부만 동의할 때 표시방법 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...

화장품책임판매업 등록면허세 납부 후 며칠 지나면 화장품책임판매업 등록필증 을 우편으로 받게 됩니다. 권한신청하기 스마트스토어센터 - 판매자정보 - 상품판매권한 신청 -> 구매대행 판매(화장품) 체크 -> 화장품책임판매업 등록필증 첨부 화장품 판매 권한신청 신청 후 3일내 심사완료 화장품 판매권한이 승인 완료되면 이제 화장품도 스토어에 등록할 수 있습니다. 끝. 연관된 글 : 화장품책임판매업 등록 절차, 1. 중소기업확인서 발급 연관된 글 : 화장품책임판매업 등록 절차, 2. 의약품안전나라 민원신청 연관된 글 : 화장품책임판매업 등록 절차, 3. 면허세 자진신고

화장품 구매대행을 할 때 필요한 화장품책임판매업 등록 절차 - 세번째, 면허세 자진신고하기 1. 화장품책임판매업 민원신청 며칠 후 문자 수신 민원 처리완료 2. 의약품안전나라 - 마이페이지에서 처리완료 확인 처리완료 클릭해서 면허세 납부하면 면허세 미납 1이 0이 됨 3. 민원신청내역에서 민원목록 클릭 목록 아무데나 클릭해도 된다 4. 면허세자진신고 클릭 면허세자진신고 5. 납부시군구 선택해서 맞는거 입력 본인의 납부시군구 확인 6. 면허명 클릭 후 면허명 조회 선택 화장품책임판매업 조회 후 4번째 선택 7. 납부내역 확인 후 신고버튼 클릭 납부내역 확인 8. 면허세납부 메뉴에서 목록 클릭 후 결제 클릭 결제 시작 9. 위택스 창에서 정보입력 후 세액계산 누르고 신고하기 총납부금액은 지역마다 다름 10. 신고가 완료되면 인터넷 납부하기 인터넷 납부 11. 면허세납부 화면에서 조회버튼 클릭 후 납부확인서 저장해두기 납부확인서 저장 지방세(등록면허세) 27,000원 필요합니다. 화장품책임판매업 등록필증은 며칠 후 우편으로 도착하게 됩니다. 화장품책임판매업 등록필증이 도착하면 이제 완전히 끝....이 난줄 알았는데 아니에요. 6개월 이내 화장품책임판매업 최초교육...

화장품 구매대행을 할 때 필요한 화장품책임판매업 등록 절차 - 두번째, 의약품안전나라 민원 신청하기 1. 의약품안전나라 접속 후 회원가입( https://nedrug.mfds.go.kr ) 회원가입 2. 개인사업자회원으로 인증하기 개인사업자회원 3. 정보 입력하기 회원구분 : 도소매업체 / 종업원수 : 0 4. 완료 후 로그인하기 등록완료 후 로그인 5. 전자민원 클릭하기 전자민원 클릭 6. 민원신청 클릭하기 민원신청 클릭 7. 화장품책임판매를 검색 후 화장품책임판매업등록 클릭하기 화장품책임판매 검색 -> 화장품책임판매업등록 클릭 -> 민원신청 8. 민원신청 후 승인요청 이메일이나 전화로 승인요청 9. 승인 후 다시 전자민원 -> 민원신청 클릭 민원신청 클릭 10. 정보 작성 후 임시저장하기 책임판매업의 유형 : 수입대행형거래(전자상거래...) 선택 11. 구비서류 업로드하기 중소기업확인서 , 사업자등록증 업로드 12. 마이페이지 -> 수수료납부 메뉴에서 목록 확인 후 지불 수수료지불 완료 13. 진행상태 확인 접수완료 ...

화장품 구매대행을 할 때 필요한 화장품책임판매업 등록 절차 - 첫번째, 중소기업확인서 발급 1. 중소기업현황정보시스템 접속 후 회원가입( https://sminfo.mss.go.kr ) 일반회원 가입하기 2. 약관 동의 후 인증받기 본인 인증하기 3. 정보 입력하기 기본 정보 입력 4. 가입 완료 후 로그인 하기 로그인하기 5. 메인 화면에서 신청서 작성 클릭하기 위에서 살짝 아래에 위치한 STEP 03 신청서 작성 클릭 6. 개인사업자 클릭하기 개인사업자 신청서 작성 7. 동의 후 확인하기 전체동의 8. 정보 입력하기 최근사업기간말일 은 있는 그대로 놔두기 맞는 정보 입력하기 9. 아래 내용은 체크 없이 넘어가고 저장하기 체크 할 필요 없음 10. 시작한지 얼마되지 않았기 때문에 매출액, 자산총액 0원 새로 시작한 셀러일테니... 11. 상시근로자수도 0명 새로 시작한 셀러일테니... 12. 회사 전화번호가 없고 휴대폰 입력하기 싫으면 0으로 입력 0만 넣어도 되네요..!? 13. 확인서 출력/수정 메뉴에서 조회결과 확인하기 국문확인서 출력 ...