본문 바로가기

분류 전체보기29

[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.
[javascript]랜덤하게 밝은 색 코드 반환하기 함수 구현 목적 여러 색을 랜덤 하게 뽑고 싶은데(차트 라인 별 색상 등) 너무 알록달록하여 밝은 색들만 랜덤하게 뽑고 싶어서 구현해 봤습니다. 구현 방법 랜덤하게 헥스 코드(#○○○○○○)로 반환하는 함수입니다. 헥스 코드는 16진수 6자리로 이루어져 있습니다. 이중 2자리씩 앞에서 부터 R(빨강색), G(녹색), B(파란색)을 나타내며 00(0)~FF(255)까지 총 256단계로 각각의 색의 강도를 나타냅니다. 해당 색은 빛의 삼원색을 서로 더하는 가산혼합으로 3가지 색이 모두 0인 경우 #000000 검정, 모두 FF 인 경우 #FFFFFF로 흰색이 됩니다. 이처럼 각 색의 값의 합이 높을 수록 밝아지므로 모든 색상 값을 반 이상으로 랜덤 하게 뽑았습니다. RGB 값이 128, 16진수로는 80 이.. 2022. 1. 26.
[javascript]Array(배열) 비우기 배열 비우기 개발을 하다 보면 배열을 비워야 할 경우가 발생하는데 그때 사용할 수 있는 방법들입니다. 1. 빈 배열 대입 let array = [1,2,3,4,5]; array = [] console.log(array) // [] 단순하게 빈 배열 대입하여 배열을 비울 수 있습니다. 2. 배열의 길이 수정 let array = [1,2,3,4,5] array.length = 0 console.log(array) // [] 배열의 길이를 0으로 수정하면 배열을 비울 수 있습니다. ※ 배열의 길이를 수정하면 해당 길이만큼 배열의 크기가 바꿔지며 현재 길이보다 크게 변경 할 경우 해당 자리에 빈 값이 들어가며 sparse Array가 됩니다. 3. 배열 자르기 let array = [1,2,3,4,5] arr.. 2022. 1. 21.