[Toy Project] 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기 [CSS 애니메이션과 JavaScrip- 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기웹페이지에서 픽셀들이 화면 상단에서 하단으로 랜덤하게 떨어지는 간단한 애니메이션을 구현해보려 한다.HTML, CSS, JavaScript를yermi.tistory.com- 떨어지는 픽셀이 바닥에 쌓이는 애니메이션 구현하기이번에는 화면 상단에서 떨어지는 랜덤한 색상의 픽셀이 바닥에 쌓이는 애니메이션을 구현해보려고 한다.- stacking-pixels.htmlpixel-container를 포함한 HTML 기본 구조를 설정한다.이 컨테이너는 픽셀들이 쌓이는 공간이 된다. - stacking-pixels.csspixel-con..

- 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기웹페이지에서 픽셀들이 화면 상단에서 하단으로 랜덤하게 떨어지는 간단한 애니메이션을 구현해보려 한다.HTML, CSS, JavaScript를 사용하여 간단하게 만들어 볼 것이다.- falling-pixels.htmlHTML 파일에서는 기본적인 구조와 컨테이너 요소(pixel-container)를 정의한다.pixel-container는 픽셀들이 떨어질 영역을 지정한다. -falling-pixels.csspixel-container와 pixel 클래스에 대한 스타일을 지정한다.픽셀의 크기, 초기 위치, 애니메이션 키프레임(@keyframes fall)을 설정하여 픽셀들이 떨어지는 동작을 구현한다.body { margin: 0; p..

- URL 단축기를 만들어보자!이번에는 URL 단축기를 만들어보았다. URL 단축기의 프로세스는 아래와 같다.URL 단축을 위해 해싱은 6자리로 정했다. (겹치는 값이 나올 정도로 사람들이 많이 사용해주면 좋겠다⭐) [JS] 긴 문자열을 6자리 해시로 변환하기 [간단한 해싱 알고리즘 만들기]- 긴 문자열을 6자리 해시로 변환하기 JavaScript에서 긴 문자열을 6자리 해시로 변환하는 방법 중 하나는 SHA-256 등의 안전한 해시 알고리즘을 사용하고 그 결과를 base64 또는 다른 방법으로 인코딩yermi.tistory.com 서버 구축하기 싫어서 Google Sheet와 Google App Script를 활용했다. (배포는 당연히 github 웹배포~)지금은 github의 도메인을 쓰고 있기에 h..

- 네이버 환율을 스크랩핑 해보자! 네이버 환율을 스크랩핑하여 환율계산기를 만들어보았다. Jsoup과 Gson을 활용했다. [Library] Jsoup으로 웹 페이지 크롤링(Crawling)하기 [parsing 라이브러리 : Jsoup] 1. parsing 라이브러리 : Jsoup - 다운로드 : https://mvnrepository.com/artifact/org.jsoup/jsoup/1.14.3 2. Jsoup으로 웹 페이지 크롤링하기[웹 페이지에 있는 썸네일 저장하기] - DB 테이블 생성 : TBL_MUSINSA_SAMPLE - HTMLPars yermi.tistory.com [Library] 자바(Java)로 제이슨(Json) 출력하기 [Json 라이브러리, Gson] 1. Json 라이브러리,..

- 이번에는 웹 페이지 오목이다(2) 1. 화점 찍어주기 바둑판에 화점이 없으니 너무 밋밋하여 위치 계산하여 찍어주었다. for(var i = 0 ; i < 3 ; i++) { for(var j = 0 ; j < 3 ; j++) { let dot = document.createElement('div'); dot.setAttribute('class', 'dot'); let margin_top = 58 + (i * 120); let margin_left = 58 + (j * 120); dot.setAttribute('style', `margin-top: ${margin_top}px; margin-left: ${margin_left}px;`); board.appendChild(dot); } } 2. 오목 로직..