본문 바로가기

분류 전체보기43

. / 2023. 7. 4.
[HTML/CSS] 자바스크립트로 랜덤 구현하는 여러 방법 + 랜덤한 속도로 타이핑 효과 구현 이번 포스팅에서는 자바스크립트를 활용하여 랜덤한 딜레이로 텍스트를 출력하는 효과를 가진 타이핑 애니메이션을 만들어 보겠다. 이러한 애니메이션은 웹 페이지나 애플리케이션에서 독특하고 흥미로운 텍스트 효과를 적용할 때 유용한다. 먼저 멋진 효과를 가진 타이핑 애니메이션을 구현해보기 전에, 랜덤을 구현하는 방식은 여러 가지가 있는데 먼저 그것들에 대해 알아보자. Math.random() 함수 사용하기 Math.random() 함수는 자바스크립트에서 가장 기본적으로 사용되는 함수 중 하나로, 0 이상 1 미만의 랜덤한 부동소수점 숫자를 반환한다. 이를 활용하여 원하는 범위의 랜덤 값을 구할 수 있다. // 1에서 10 사이의 랜덤한 정수값 구하기 function getRandomNumber(min, max) {.. 2023. 7. 3.
[HTML/JS] 특정 단어 또는 욕설 필터링하기 불쾌감을 줄 수 있는 단어 필터링하기 이번 포스팅에서는 웹 사이트나 애플리케이션에서 사용자 입력의 안전성을 확보하기 위한 HTML 욕설 필터링에 대해 알아보겠다. 사용자들에게 쾌적하고 안전한 온라인 환경을 제공하는데 도움이 되는 이 기술은 온라인 커뮤니티나 웹 사이트 운영에 필수적이다. HTML 욕설 필터링은 사용자들이 웹 사이트의 텍스트 입력 필드를 통해 제출한 내용을 감시하고, 욕설이나 불쾌한 내용을 식별하여 차단하는 기능을 말한다. 이렇게 함으로써 불쾌한 콘텐츠를 제한하여 온라인 상에서의 협조와 문화를 증진시키고, 사용자들의 경험을 개선하는데 기여한다. 이를 구현하기 위한 가장 간단한 예시 코드를 제시해 드리겠다. 아래의 HTML 코드는 사용자 입력을 받는 폼과 필터링된 결과를 보여주는 div 요소.. 2023. 7. 2.
개인정보처리방침의 예시 [개인 정보 처리 방침 예시] [개인 정보 정책] [테스트 앱]은 앱을 [오픈 소스 / 무료] 앱으로 구축했습니다. 이 서비스는 [테스트 앱]에서 [무료] 제공하며 그대로 사용하도록되어 있습니다. 이 페이지는 [테스트 앱] 서비스를 이용하기로 결정한 경우 개인 정보의 수집, 사용, 공개와 관련하여 [테스트 앱] 정책에 대해 방문자에게 알리는 데 사용됩니다. [테스트 앱] 서비스 이용을 선택하시면 본 정책과 관련된 정보 수집 및 이용에 동의하는 것입니다. [테스트 앱] 가 수집하는 개인 정보는 서비스 제공 및 개선을 위해 사용됩니다. [테스트 앱] 는 이 개인 정보 보호 정책에 설명 된 경우를 제외하고는 누구와도 귀하의 정보를 사용하거나 공유하지 않습니다. 본 개인 정보 보호 정책에서 사용 되는 용어는 본.. 2023. 7. 2.
[ChatGPT] 챗GPT 활용해서 번거로운 변수이름 바꾸기 개발을 하다보면, int = KH1, KH2, KH3...등등 여러가지 변수가 필요할 때가 있다. 이럴 때에는 모두 하나하나 바꾸기보다는, ChatGPT를 잘 활용하여 복잡한 변수 수정 시간을 매우 획기적으로 줄일 수 있다. 프로그래밍에서 반복적인 작업은 개발자들에게 항상 거슬리는 일 중 하나이며, 특히, 긴 코드에서 여러 변수 이름을 바꿔야 할 때는 매우 번거로운 작업이 될 수 있다. 이러한 상황에서, 챗GPT와 같은 강력한 언어 모델을 활용하여 자동화된 방법으로 변수 이름을 변경할 수 있다. 이 블로그에서는 챗GPT를 활용하여 변수 이름을 자동으로 바꾸는 방법에 대해 알아보겠다. 여기에서는 자바스크립트 코드 예시를 바탕으로, 기존 변수 이름을 새로운 이름으로 한 번에 대치하는 방법을 소개한다. 이러한.. 2023. 7. 1.
[HTML /JS] 이미지를 드래그 앤 드롭으로 업로드, 이미지 이름과 크기 변경하기 HTML에 사진을 드래그해서 업로드하는 방법을 알아보겠다. 아이콘 작업을 일괄적으로 하거나, 어딘가에 사진을 반복적으로 업로드하기 위해 크기들을 일괄 지정할 필요가 생길 것이다. 나는 개인적으로 카카오톡 테마를 만들면서 여러 장의 이미지를 일괄적으로 지정된 크기로 변경할 필요가 있었다. 먼저 이미지를 업로드하기 위해서는 캔버스(Canvas)가 필요하다. 이미지를 업로드하는 캔버스를 만들어 준 뒤, 드래그 앤 드롭하여 이미지를 끌어놓을 수 있도록 먼저 html로 캔버스의 모양을 만들어준다. 로 설정해 파일을 업로드 할 수 있게 만들어준다. 이러면 버튼을 클릭하여 이미지를 업로드 할 수 있게 된다. 이미지1. Upload 모양을 잡았다면, 간단히 드래그 앤 드롭 영역 표시가 잘 되도록 CSS를 작성해준다. .. 2023. 6. 30.

티스토리툴바