블로그에 투 두 리스트 추가하기

블로그에 투 두 리스트 추가하기

블로그 등의 html, css가 수정 가능한 웹 사이트에 할 일 목록을 추가하는 방법입니다.블로그에선 포스트 수정이라는 좋은 수단이 이미 존재하니, html과 css만 작업했습니다. HTML <div class="m_todo"> <h1>할 일 목록</h1> <ul> <li> <span>장보기</span> <div class="checkbox"></div> </li> <li done> <span>호텔 델루나 시청</span> <div class="checkbox"></div> </li> </ul> </div> CSS .m_todo { margin: 0 auto; background: #4DD0E1; padding: 10px; border-radius:...
[자바스크립트] 자동으로 글자 적고 지우기

[자바스크립트] 자동으로 글자 적고 지우기

How to code 위 예시처럼 글자들을 자동으로 타이핑하고 지우는 스크립트입니다. let i = 0, j = 0; const textArray = ["HTML", "CSS", "Javascript"], speed = 100, target = document.getElementById("type"); function txtnum() { j == textArray.length - 1 ? j = 0 : j++ } function type() { i < textArray[j].length ? (target.innerHTML += textArray[j].charAt(i), i++,...
바닐라에서 jQuery slideToggle 구현하기

바닐라에서 jQuery slideToggle 구현하기

눌러보세요! Hi! jQuery의 slideToggle()이란 함수를 바닐라 자바스크립트로 구현하는 방법입니다.최소한의 코드로 동작하게 해뒀으며, jQuery의 slideToggle과는 달리 대상 요소만 지정하고 애니메이션 진행 시간은 자바스크립트에서 작성하지 않습니다. function toggleSlide(element) { let a; 0 === element.offsetHeight ? ( element.style.height = "auto", a = element.offsetHeight, element.style.height = 0, void element.offsetHeight, element.style.height = `${a}px` ) : element.style.height = 0 } 함수를...
CSS filter blur 렉 해결하기

CSS filter blur 렉 해결하기

css의 filter blur의 렉이 생각보다 심하더라고요.평상시엔 렉이 전혀 없는데, 이미지를 불러오는 등 특정 작업을 하고 있을 땐 꽤 심하게 버벅댑니다. #element { transform: translateZ(0); will-change: transform; backface-visibility: hidden; transition: .5s } #element:hover { filter: blur(5px) } 위 코드를 사용해 어느 정도 해결했습니다. 항상 생기는 렉도 아니고, 테스트 중인 GPU도 1660TI로 그리 나쁜 제품은 또 아니라서,...
[자바스크립트] 기기 방향 감지하기

[자바스크립트] 기기 방향 감지하기

기기를 회전해 테스트해보세요! 이런 정보도 가져올 수 있을지 몰랐는데, 자이로 센서를 이용해 기기의 방향도 가져올 수 있더라고요. const box = document.getElementById("testBox"); function handleOrientation(event) { const alpha = event.alpha, beta = event.beta, gamma = event.gamma; if (!beta) { addMouseEvent() } document.getElementById("alpha").innerText = alpha, document.getElementById("beta").innerText = beta, document.getElementById("gamma").innerText = gamma, box.style.transform = `rotateX(${-beta}deg) rotateY(${gamma}deg)` } function handleMouseMove(event)...
1 4 5 6