WEB10 [javascript][toy]마우스 트레이서 내용 소개 이번에는 재미 삼아 마우스가 이동할 때 뒤에 문자나 그림이 따라다니는 기능을 구현해봤습니다. 단순하게 MouseTracker 객체 생성하고 해당 객체에 형식에 맞게 이미지나 글자를 push 해주면 마우스를 따라다니는 것처럼 보이게 됩니다. 구현 소스 See the Pen MouseTracer-class by kjg20260 (@kjg20260) on CodePen. 2022. 8. 10. [javascript]Date 객체 포맷 변환 Date 객체 포맷 변환 javascript에서 Date 객체를 내가 원하는 포맷/패턴으로 출력하기 위해서 만든 함수입니다. Date 객체의 prototype에 정의하여 생성되는 생성된 어느 Date 객체에서든 사용할 수 있게 하였습니다. ※ 주의 : javascript 에서는 일반적인 객체는 객체의 prototype을 상속하기 때문에 prototype의 수정은 위험할 수 있습니다. 단순하게 format으로 들어오는 문자열에서 특정 문자들을 차례대로 바꿔주는 함수이기 때문에 응용해서 수정하여 사용 가능합니다. 아래는 소스코드입니다. 소스 코드 See the Pen DateToCustomString by kjg20260 (@kjg20260) on CodePen. 2022. 4. 7. [javascript]checkbox 특정 개수 필수 선택 checkbox 특정 개수 필수 선택 input 태그 중 checkbox 타입은 한 개 이상의 선택이 필요할 때 사용합니다 프로젝트 진행중 체크박스 중 필수로 특정 개수만큼 선택해달라는 요구사항이 있었고 그로 인해 간단하게 만들었던 함수입니다. 기본 동작 기본적인 기능 은 radio 타입과 비슷하게 만들었고 그로 인해 다중 선택 가능한 radio 태그로도 생각할 수 있습니다. ※ 1개를 필수 개수로 입력 시 radio타입과 동일하게 동작 1. 특정 개수만큼 기본적으로 체크 2. 추가 선택 시 제일 처음 체크한 태그 체크해제 3. 체크 해제 방지 소스 코드 체크할 개수를 입력하고 설정버튼을 누르시면 동작합니다. See the Pen checkboxLikeRadio by kjg20260 (@kjg20260).. 2022. 4. 1. [CSS]테이블 헤더 고정 시키기 [CSS] position - sticky 속성을 이용한 테이블 헤더 홀드 기능을 구현해봤습니다. sticky는 fixed처럼 고정시키지만 viewport에 고정되어있는 fixed와는 다르게 scroll box에 고정됩니다. 또한 고정 시켜야 하므로 top, right, bottom, left 속성이 필요합니다. 이러한 sticky 속성의 특징을 통해 th태그를 스크롤 상단에 고정시키는 코드를 작성해봤습니다. 아래는 구현한 소스코드입니다. See the Pen Fixed Table header by kjg20260 (@kjg20260) on CodePen. 우선 overflow : auto를 통해 범위를 넘어갈 경우 스크롤이 되도록 하고 에 position : sticky; top: 0; 속성을 주고 배.. 2022. 2. 8. 이전 1 2 3 다음