내가 보려고 만든 블로그

툴팁이란? 해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과 생각보다 툴팁을 사용할 일이 많은데 따로 js 없이 순수하게 툴팁을 사용해보자 tailwind를 이용한 tooltip 예제 Tooltip! 🤚tailwind에서 부모 hover시 자식 엘리먼트에게 무언가 옵션을 주고 싶다면? 1. 부모요소에 group 클래스를 추가 2. 자식 요소에 group-hover:flex 로 hover 관련 옵션을 추가 이렇게 하면 끗!

const today = new Date(); const timeValue = new Date(date); const betweenTime = Math.floor((today.getTime() - timeValue.getTime()) / 1000 / 60); if (betweenTime < 1) return '방금전'; if (betweenTime < 60) { return `${betweenTime}분전`; } const betweenTimeHour = Math.floor(betweenTime / 60); if (betweenTimeHour < 24) { return `${betweenTimeHour}시간전`; } const betweenTimeDay = Math.floor(betweenTime / 6..

ckeditor에서 유튜브를 embeded 했는데, embeded 태그로 입력되서 출력이 되지않는다ㅠㅠ 유튜브는 iframe으로 출력해야되서 그런데, 간편하게 변경할 수 있는 방법이 있다! editor config에 넣어주면 된다! editorConfig = { toolbar: [....], mediaEmbed: { previewsInData: true } } [vue 전체 코드]

AWS S3에 올려둔 이미지를 다운로드해보자! 우선 코드 먼저 let image = new Image(); image.onload = function() { const canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0); let dataURL = canvas.toDataURL(); const element = document.createElement('a'); element.setAttribute('href', dataURL); element.setAttribute..

input type이 date일때는 placeholder가 적용되지 않는다 그래서 html 태그랑 css에 몇가지 추가로 적어주어야한다! HTML CSS input[type='date']::before { content: attr(data-placeholder); width: 100%; } input[type='date']:focus::before, input[type='date']:valid::before { display: none; } 이렇게 해주면 적용한 플레이스 홀더가 잘 나오는걸 볼 수 있다

input에서 휴대폰 번호 입력할때 휴대폰 양식에 맞춰서 자동으로 dash를 넣어줘야될 경우가 있다 예를들어 사용자가 숫자만 01011112222만 입력하면 입력할때마다 자동으로 010-1111-2222로 변환해주는 이런거... 그럴땐 let phoneNumber = 01011112222; phoneNumber = phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3"); console.log(phoneNumber) // 010-1111-2222 이렇게만 하면 끝이라는거!! 생각보다 자주쓰는데 할때마다 검색하는게 귀찮으니 나는 이제 블로그 들어와서 봐야겠다

이미지를 가져오고 싶은데 cros 오류가 발생한다... cors는 통신때만 해주면 되는데 왜 여기서 까지 발생할까... 이유를 검색해보니 초기 이미지를 캐싱하는 단계에서는 cors 헤더를 가져가지 않고 캐싱을 하기때문에 이와같은 오류가 발생한다고 한다 그래서 열심시 구글링해서 canvas로 우회해서 가져오고 crossOrigin을 설정해주었지만... 그래도 동일하게 발생하는 오류... 여기서 삽질을 더 한결과 기존 코드 getBase64FromUrl(){ let image = new Image(); const _this = this; image.onload = function() { const canvas = document.createElement("canvas"); canvas.width = imag..

스크롤시 아래서 위로 올라오는 애니메이션 처리하고 싶을때! 간단하게 설명하면 스크롤되는 높이값을 측정해서 그 높이에 있는 element에 active class를 추가하여 처리해주면된다! 코드는 아래와 같다 1. html 코드 Caption Section Text Random text Section Text Random text Section Text Random text 2. css .reveal{ position: relative; transform: translateY(150px); opacity: 0; transition: 2s all ease; } .reveal.active{ transform: translateY(0); opacity: 1; } 3. js window.addEventListen..

.container { display: flex; flex-wrap: nowrap; overflow-x: auto; .item { flex: 0 0 auto; } }

file to base64 function fileToBase64(file){ const reader = new FileReader(); reader.readAsDataURL(file) reader.onload = () => { console.dir(reader.result)// base64 } } base64 to file function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n)..