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

스크롤바가 아닌 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

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" 같은 속성을 추가하면 가능해진다. 끝.

파일 올릴 때 드래그해서 올리기 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에서 글자 수 말고 줄 수(엔터키)를 제한하려면 위와 같이 적용하자. 끝.

vuejs 기본 구조 세팅하기, jquery 처럼 사용 html <div id="app" v-cloak> <h1>페이지 제목</h1> <header> header 내용 <!--<router-link to="/">Home</router-link> <router-link to="/test1">test1</router-link> <router-link to="/test2">test2</router-link> // 아래처럼 components로도 가능 --> <nav-menu mname1="메뉴" @hdclick="clicksample"></nav-menu> <nav> <h2>navigation</h2> </nav> </header> <main> <router-view></router-view> <br> <p>가 높이 : {{ calcHeight(200) }}<p> <p>나 높이 : {{ calcHeight(100) }}<p> ...... ... </main> <footer> footer 내용 </footer> </div> js <script src="js/vue3.min.js"></script> <script src="js/axios.min.js"></script> <script src

웹페이지에서 스크롤을 내릴 때 콘텐츠가 나타나는 효과, 스크롤 올릴 때 사라지는 효과 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

한쪽 방향으로 계속 이동되지만 마우스를 가져가면 멈추고, 마우스가 나가면 다시 이동하는 효과 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; /* 투명도랑 크기, 회전에 애니메이션 효과 */

a 태그에서 target이 _blank 일 때 생길 수 있는 취약점 보완하기, 탭 내빙(Tab nabbing) 공격 방지, 보안코딩, noopener, noreferrer a 태그, target="_blank" 일 때 취약점 보완 <a href="링크경로" target="_blank" rel="noopener noreferrer">link title</a> a 태그의 target="_blank" 문제점 보안상 취약점 새창으로 열린 페이지에서 window.opener 로 부모 페이지(새창을 연 페이지)에 접근해 window.opener.location=나쁜경로 로 부모 페이지의 url을 바꿔칠 수 있다.(예: url에서 한글자만 다른 스캠사이트 등) 스캠사이트로 바뀐 url을 인지하지 못하고 개인정보를 입력하게 되면 보안상 심각한 문제가 발생할 수 있다. 성능 저하 새창으로 열린 페이지는 부모창과 같은 프로세서를 통해 실행된다. 새창에서 javascript로 많은 퍼포먼스를 표현한다면 그 만큼 부모창에 영향을 주게되어 느려질 수 있다. a 태그를 사용할 때, target의 속성값으로 _blank 를 지정한다면 rel="noopener noreferrer" 를 추가하는 것을 기본으로 생각하자. window.open 에선 아래와 같이 작성한다. window.open("/경로", "_blank", "left=0, top=0, width=1100, height=800, toolbar=no, status=no, menubar=no, location=no, noopener, noreferrer"); 끝.

html 기본 구조 세팅 html 기본 구조 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <!-- 최상위 경로에 robots.txt 등록(예: https://domain.com/robots.txt). meta tag에도 추가해도 됨 --> <meta content="index,follow" name="robots"/> <meta content="index,follow" name="Yeti"/> <meta content="index,follow" name="Googlebot"/> <meta content="index,follow" name="googlebot-image"/> <meta content="index,follow" name="Daumoa"/> <meta property="og:title" content="sns, 메신저 등으로 보낼 때 보여지는 타이틀"> <meta property="og:description" content="sns,

이미지에 제목이 있다면 img태그보다 figure 태그 사용 html에서 이미지를 넣을 때 <img src="" alt="">만 넣기보다 <figure></figure>를 사용하여 이미지(<img>)와 해당 이미지에 대한 제목(내용 등, <figcaption>)을 넣을 수 있다. html <figure> <img src="/img/cate1.png" alt="" srcset="/img/cate1.png 335w, /img/cate1@2x.png 670w, /img/cate1@3x.png 1005w"> <figcaption>Virtual World</figcaption> </figure> srcset에서 335w, 670w, 1005w는 모바일 브라우저의 가로 픽셀이 335, 670, 1005 이상일 때 해당 이미지로 자동으로 변경되어 불러오는 기능이다. 끝.

js - 플러그인 사용, 숫자 카운팅, 숫자 올라가기 0,1,2 ~ 999, 1000, 1001 과 같이 특정 숫자까지 카운트 되면서 올라가는 효과, 간단히 CountUp이라는 플러그인으로 적용 가능하다. html <p id="count1">{{ countNo("count1", count1no, count1time) }}</p> <p id="count2">{{ countNo("count2", count2no, count2time) }}</p> js(vue 2.0) <script src="https://cdn.jsdelivr.net/npm/countup@1.8.2/dist/countUp.min.js"></script> ... ...... data: { // 카운트 되는 숫자 count1no: 192830, count2no: 3944, // 각 숫자가 카운트 되는 시간 count1time: 2, // 2초 count2time: 1, // 1초 }, computed: { countNo() { // Tag 영역, 표시되는 숫자, 진행 시간 return (id, maxno, maxtime) => { return this.countNoUp(id, maxno, maxtime) } } }, methods: { countNoUp(id, maxNo, maxTime) { let cno = new CountUp(id, 0, maxNo, 0, maxTime);// Tag영역, 시작 숫자(여기선 0), 마지막 숫자, 소수점 자리(0 = 없음), 진행 시간(초) if (!cno.error) { cno.start(); } else { console.error(cno.error); } } } .