from EARTH to MARS

이번 포스팅에서는 자바스크립트를 활용하여 랜덤한 딜레이로 텍스트를 출력하는 효과를 가진 타이핑 애니메이션을 만들어 보겠다. 이러한 애니메이션은 웹 페이지나 애플리케이션에서 독특하고 흥미로운 텍스트 효과를 적용할 때 유용한다. 먼저 멋진 효과를 가진 타이핑 애니메이션을 구현해보기 전에, 랜덤을 구현하는 방식은 여러 가지가 있는데 먼저 그것들에 대해 알아보자. Math.random() 함수 사용하기 Math.random() 함수는 자바스크립트에서 가장 기본적으로 사용되는 함수 중 하나로, 0 이상 1 미만의 랜덤한 부동소수점 숫자를 반환한다. 이를 활용하여 원하는 범위의 랜덤 값을 구할 수 있다. // 1에서 10 사이의 랜덤한 정수값 구하기 function getRandomNumber(min, max) {..

불쾌감을 줄 수 있는 단어 필터링하기 이번 포스팅에서는 웹 사이트나 애플리케이션에서 사용자 입력의 안전성을 확보하기 위한 HTML 욕설 필터링에 대해 알아보겠다. 사용자들에게 쾌적하고 안전한 온라인 환경을 제공하는데 도움이 되는 이 기술은 온라인 커뮤니티나 웹 사이트 운영에 필수적이다. HTML 욕설 필터링은 사용자들이 웹 사이트의 텍스트 입력 필드를 통해 제출한 내용을 감시하고, 욕설이나 불쾌한 내용을 식별하여 차단하는 기능을 말한다. 이렇게 함으로써 불쾌한 콘텐츠를 제한하여 온라인 상에서의 협조와 문화를 증진시키고, 사용자들의 경험을 개선하는데 기여한다. 이를 구현하기 위한 가장 간단한 예시 코드를 제시해 드리겠다. 아래의 HTML 코드는 사용자 입력을 받는 폼과 필터링된 결과를 보여주는 div 요소..

HTML에 사진을 드래그해서 업로드하는 방법을 알아보겠다. 아이콘 작업을 일괄적으로 하거나, 어딘가에 사진을 반복적으로 업로드하기 위해 크기들을 일괄 지정할 필요가 생길 것이다. 나는 개인적으로 카카오톡 테마를 만들면서 여러 장의 이미지를 일괄적으로 지정된 크기로 변경할 필요가 있었다. 먼저 이미지를 업로드하기 위해서는 캔버스(Canvas)가 필요하다. 이미지를 업로드하는 캔버스를 만들어 준 뒤, 드래그 앤 드롭하여 이미지를 끌어놓을 수 있도록 먼저 html로 캔버스의 모양을 만들어준다. 로 설정해 파일을 업로드 할 수 있게 만들어준다. 이러면 버튼을 클릭하여 이미지를 업로드 할 수 있게 된다. 이미지1. Upload 모양을 잡았다면, 간단히 드래그 앤 드롭 영역 표시가 잘 되도록 CSS를 작성해준다. ..

Show Text

HTML+JS에 사용할 수 있다. 가장 간단히 위의 문을 사용할 수 있다. const getBrowserHiddenProps = () => { let hidden, visibilityChange if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { hidden = ..