JavaScript 태그 글

[CSS, JS] 노트, 원고지 만들기

CSS와 자바스크립트로 노트와 원고지에 글을 쓰는 느낌을 주는 방법

스크롤 등의 이벤트 최적화하기

사용자의 스크롤, 클릭 등에 반응하는 페이지를 만들면, 1초에도 몇십 번씩 특정 함수가 동작해야 할 때가 많습니다.간단한 애니메이션을 출력하는 정도라면 상관없겠지만, 복잡한 그래픽 연산이 들어가는 작업을 아무런 최적화 없이 이벤트 리스너만 추가해두면 시스템 자원을 갉아먹고 디스플레이의 주사율보다 더 많이 실행되어 오히려 프레임 방어를 못 해주는 상황까지 발생하기도 합니다. 이렇게 무거운 함수를 돌리는 와중에도 event.preventDefault() 사용 여부를

웹에서 다크 모드 구현하기

다크 모드(다크 테마)란, 밝은 배경에 어두운 글자 대신 어두운 배경에 밝은 글자를 사용하는 것입니다. 눈의 피로를 줄이기 위해 선호하는 사람이 꽤 있고, 콘트라스트(Contrast)가 높아지기에 텍스트나 이미지를 강조하는 데도 효과적입니다만, 긴 글을 표시해야 할 땐 독이 될 수 있으며, 난시 등의 이유로 어두운 배경에선 글자를 읽기 어려워하는 사용자도 있어 호불호도 꽤 갈리는 편입니다.그럼에도 Windows 10, MacOS,

Before / After 이미지 슬라이더

Github 요즘 간간이 포토샵도 만지작거리는데, 보정 열심히 끝내면 원본이랑 비교해보는 재미가 쏠쏠하더라고요. 그러다 이미지 비교엔 슬라이더만 한 게 없단 생각에, 슬라이더를 한 번 제작해봤습니다.이래저래 찾아보니 죄다 jQuery로 만든 것뿐이더라고요. 외부 라이브러리에 의존하지 않게 제작해봤습니다. HTML <div class="comparison-slider"> <figure> <img src="./images/before.jpg" alt="before" /> <figcaption>Before</figcaption> </figure> <figure> <img src="./images/after.jpg" alt="after" /> <figcaption>After</figcaption> </figure> </div> .comparison-slider 안에 두 개의 figure를 추가하고, 그 안에 img와 figcaption을

웹 사이트를 PWA로 업데이트하기

PWA(Progressive Web App)란 웹은 높은 접근성을 가진 매력적인 플랫폼입니다.한 번의 코딩으로 거의 모든 기기에서 접근할 수 있고, 검색이나 주소의 공유로 누구나 어디에서나 접속할 수 있습니다. 별도의 업데이트 또한 필요없이 접속할 때마다 최신 상태를 보여줍니다. 하지만 유저를 묶어두기 힘들단 단점이 있습니다.앱을 설치하면 단순히 아이콘 한 번 클릭하면 앱을 실행시킬 수 있지만, 웹은 브라우저를 켜고 사이트에 접속하는

Imgur API로 이미지 업로드하기

Imgur API를 사용해 이미지를 업로드하는 방법을 알아봅니다.

[티스토리] 댓글에 링크 및 이미지 추가하기

업데이트 2020.07.03 - innerHTML을 사용하지 않고 댓글 내용을 업데이트합니다. 단순히 텍스트밖에 적을 수 없는 티스토리 댓글에 링크, 이미지, 비디오, 유튜브 등을 추가해 화려하게 꾸미는 스크립트입니다. HTML 수정 <s_rp_container> 바로 아래에 있는 요소에 id가 없다면 하나 추가해주세요.방명록에도 사용하시려면 <s_guest_container> 아래에 있는 요소에 같은 id를 추가하시면 됩니다. [##_rp_rep_desc_##]을 감싼 요소에 class가 없다면 하나 추가해주세요. 댓글용과 답글용 2개가

[티스토리] 파일 업로드 구현하기

확인해보니 티스토리 Access Token의 유효 기간이 1시간밖에 되질 않습니다. 늘릴 방법은 없고요. 만약 이 방법을 사용하시려면 1시간마다 토큰을 갱신해야 합니다. 얼마 전 제 블로그에 구현한 댓글 이미지 첨부와 비슷한 기능을 티스토리 API로 구현하는 방법입니다. 시작하기 전 기본적으로 티스토리는 모든 댓글을 텍스트 취급하기 때문에, 이미지 링크 등을 찾아 이미지로 변환해주는 작업이 필요합니다.이 포스트를 참고하시면

React로 로또번호 생성기 만들기

깃허브 약 9개월 전에 바닐라 자바스크립트로 만든 로또 추첨기를 리액트로 다시 제작해봤습니다. 손보는 김에 예전엔 모바일 기기에선 공을 세로로 일렬로 표시했으나, 이젠 3열로 표시하게 해뒀습니다.버리는 공간이 훨씬 적어진 느낌이라 마음에 드네요. 바닐라로 짤 땐 html에 .ball이란 div를 만들고,