꽁기웹디님의 포스트를 보고 꽤 재미있는 기능 같아 만들어봤습니다. 페이지 아무 곳이나 클릭했을 때 원이 잠깐 생깁니다. 지금 보고 계신 페이지에도 효과를 적용해뒀으니, 페이지 아무 곳이나 클릭해보세요! HTML CSS@keyframes clicked { from { transform: scale(0); opacity: 0 } to { transform: scale(1); opacity: 1 }} #clickEffect { display: none; position: fixed; top: 0; left: 0; width: 80px; height: 80px; pointer-events: none} #clickEffect::after { content: ""; display: block; height: 100..

초미세먼지 같은 팁입니다. #YOURELEMENT.effect { animation: animation 1s linear} 이렇게 어떤 요소에 애니메이션을 넣고, 자바스크립트로 특정 상황에 애니메이션이 실행되게 했을 때, 그 특정 상황이 연속되면 애니메이션을 처음부터 다시 시작하고 싶으실 때가 있을 겁니다. 단순히 class를 제거하고 추가하는 건 애니메이션을 재시작해주지 않고, setTimeout을 이용해 딜레이를 살짝 주면 애니메이션이 재시작되긴 하지만, 딱히 바람직한 작동 방식은 아닐 겁니다. function resetAnimation() { const target = YOURELEMENT; target.classList.remove("effect"), void target.offsetWidth, ..

앞서 포스팅했던 자바스크립트 퀵소트에서 for이 while보다 퍼포먼스가 좋다고 기술했는데, 잘못된 정보를 알려 드린 것 같아 정정하고자 글을 작성합니다. 앞선 포스팅에선, 한번에 for while 둘 다 실행되도록 하고 시간을 측정했습니다.나중에 다시 확인해보니, for이건 while이건 먼저 하나가 실행되면 그다음 건 빨리 실행되더라고요. 전 그 테스트에서 while을 계속 먼저 실행하고 for을 그다음에 실행해서 for이 더 빨리 실행되는 것처럼 보였던 것입니다. console.time("while"),(function() { let i = 0; while(i < 100000) {i++}})(),console.timeEnd("while") console.time("for"),(function() {..

클릭해보세요 말 그대로 토스트 기계에서 토스트 구운 것처럼 툭 튀어 올라왔다 내려가는 팝업입니다. 특정 버튼을 클릭하는 등 무슨 동작을 했을 때 변경 점을 직관적으로 알려주기 좋다고 생각해 함수를 만들어 사용하는 중입니다. HTML CSS#toast { position: fixed; bottom: 30px; left: 50%; padding: 15px 20px; transform: translate(-50%, 10px); border-radius: 30px; overflow: hidden; font-size: .8rem; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s, transform .5s; background: rgb..

Flex Box (플렉스 박스) 가이드 들어가며 Flex Box 예시 : 모든 아이템은 CSS에서 너비 300, 높이 300으로 지정되어 있지만, 컨테이너에 맞게 너비가 줄어든 모습입니다. w3c flexible box Flex Box (Flexible Box Module) 는 Flex Box 내의 아이템을 문자 그대로 신축성 있게 정렬해주는 레이아웃입니다. 행이나 열 중 하나의 차원을 골라 Flex Box 내의 아이템을 정렬해줍니다. 사용자가 고른 차원 (기본적으로 행) 밖으로 아이템이 빠져나가는 것을 아이템의 높이 / 너비 조정을 통해 방지해주며, Flex Box 내의 아이템을 컨테이너에 맞게 늘리거나 줄이는 등 다양한 옵션을 제공합니다. 또한, css를 다루며 많이들 필요로 하시는 완전한 중앙 정렬..

#fff같은 헥스 색상을 rgba(255,255,255,1)처럼 rgba로 변경하는 스크립트입니다. toRgba = (hex, opacity) => { let value = hex.replace("#",""); value.length === 3 && ( value = value.charAt(0) + value.charAt(0) + value.charAt(1) + value.charAt(1) + value.charAt(2) + value.charAt(2) ), value = value.match(/[a-f\d]{2}/gi), (opacity === undefined || opacity > 1) && (opacity = 1) return `rgba(${parseInt(value[0],16)},${parseI..

위 사진처럼 클릭했을 때 이미지를 새 탭에서 열어줍니다.티스토리의 플러그인처럼 특정 크기 이상인 이미지에만 적용되지 않고 모든 이미지에 적용됩니다. 블로그에 우클릭을 막아뒀지만, 이미지의 다운로드를 막으려는 건 아닐 때도 쓸 수 있고, 다양한 경우에 쓸 수 있습니다. Vanilla JSArray.from(document.querySelectorAll(".imageblock>img")).forEach(a => { // 첨부파일 선택 방지 const d = document.createElement("a"), // 새 a 태그 생성 c = a.parentNode.parentNode; // .imageblock 부모인 p d.href = `${a.src}?original`, a.removeAttribute("o..

저도 사실 처음 자바스크립트를 배울 때 좀 오래된 강좌를 보고 시작해서 변수를 var로 선언하는 습관이 있었는데, var로 변수를 선언하는 건 좋은 방법이 아닙니다. 요점만 간단히 설명하고 가자면, 기본적으로 const로 변수를 지정하고, 아래에서 변수의 내용이 바뀐다면 let을 사용하시면 됩니다. 대부분의 프로그래밍 언어는 block-level (블록 레벨) 스코프를 따릅니다. 자바스크립트의 var은 예외로 funciton-level (함수 레벨) 스코프를 따릅니다. 무슨 소리냐 하면 function-level scope - 함수 내에서 지정된 변수는 함수 내부에서 유효하며, 외부에선 참조할 수 없습니다. block-level scope - 코드 블럭 (함수, for, while, if 등 "{" 와 ..

이미지 출처 Github Worst(최악) - n^2 Best(최선) - n log n Average(평균) - n log n 위와 같은 시간 복잡도를 가진 정렬 알고리즘입니다. 아래에서 테스트해보실 수 있습니다. Sort 버튼을 클릭하면 Textarea에 있는 내용을 정렬하고, Random을 누르면 Textarea의 내용을 0~1000까지 숫자 중 무작위로 100개 집어넣습니다. (중복 가능) 테스트 SortRandom 정렬된 결과가 출력됩니다. quicksort = (arr, l, r) => { let i; (l < r) && ( i = partition(arr, l, r), quicksort(arr, l, i - 1), quicksort(arr, i + 1, r) ) return arr}, part..