Web Code/JS9 시작일/종료일을 선택하는 DatePicker 구현하기 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 1. HTML 구성 먼저 HTML 파일을 생성하고 DatePicker를 위한 두 개의 입력 필드를 추가합니다. 시작일: 종료일: 2. JavaScript로 DatePicker 동작 추가 이제 JavaScript를 사용하여 DatePicker를 동작하게 만들어 보겠습니다. 아래의 코드는 시작일과 종료일 간의 유효성을 검사하고, 종료일이 시작일보다 이후인 경우 경고를 표시합니다. document.addEventListener("DOMContentLoaded", function () { const startDateInput = document.getElementById("start-date"); const endDate.. 2023. 9. 5. [JS] 스크롤 진행률 표시줄 / scroll indicator pixels와 pageHeight값으로 현제 사용하는 값을 구한 후 progress로 100%수치로 전환 시킨다. 추가적으로 실제 텍스트로 보여질 수치는 소수점을 잘라서 표기한다. 2021. 6. 7. [JS] Input 검색 필터 / 검색 창 만들기 (복제), input 검색 딜레이 / 검색 필터 딜레이 전에 Input 검색 필터 생성버전으로 추가하는 형식이였다. 이번 방식은 #searchBox에 있는 #noResult를 clone()메소드를 이용하여 생성하는 방식이다. 앞에 게시물에 추가하지 못했던 검색 시 딜레이를 추가하여 제작했다. 검색 시 딜레이를 주지 않으면, 타이핑을 칠때마다 js를 읽기 때문에, 딜레이를 주어서 타이핑이 끝날때 js를 읽도록 하는 방식입니다. 검색 가능한 Text Source Commits Branches Pull requests Pipelines Deployments Jira issues Downloads 2021. 4. 19. [JS] Input 검색 필터 / 검색 창 만들기 (생성) input에 keyup 메소드로 위아래 방향키와 엔터를 눌렀을때 이벤트가 발생되도록 했습니다. nav클래스는 데이터를 불러오기위해 숨겨놓고 input에서 타이핑 시 val값을 가져와 데이터와 매핑을 한 후 append로 searchBox에 생성되는 형식입니다. 더불어 한글을 사용 할 경우 length를 이용해 2개나 3개 이상 타이핑 시 검색을 할 수 있게 if문을 사용 했습니다. 검색 가능한 Text Source Commits Branches Pull requests Pipelines Deployments Jira issues Downloads 2021. 4. 15. [JS] Table input checkbox All click / 테이블 전체 체크 테이블 에서 를 전체 체크하거나 해제하는 방법입니다. 테이블해더의 인풋을 클릭하면 전체 체크가 되며 테이블바디의 인풋을 클릭 시에도 전체체크 헤제 및 선택이 가능합니다. 2021. 2. 22. [JS] input type file 파일 미리보기 수정 삭제 기능 이번에는 파일 업로드 시 미리보기 가능 수정 삭제 입니다. input type="file"은 별도로 커스텀으로 css로 변경이 가능하며 미리보기 구역의 크기또한 조절이 가능하다. 2020. 9. 12. [JS] 네이버 에디터 스타일 제거 이미지 제거 문자만 추출 하기 네이버 에디터 2에서 미리보기 형식 또는 리스트 형식입니다. 게시판에 뿌려질때, 에디터에 적용된 스타일 적용되지 않게 나와야 하므로, 위 js를 사용하여 div 안에 있는 element 스타일은 모두 제거가 된다. 2020. 9. 3. [JS] 이미지 업로드 미리보기 소스 뽑기 별도로 리소스 및 플로그인 없이 사용이 가능한 코드입니다. 다른 미리보기는 이미지 소스값을 뽑을때 inputinput type="file"이 체인지로 사라지는 경우가 있습니다. 위 코드는 input type="file"를 체인지 되지않고 숨긴상태로 있어 소스를 뽑을때 유용할 것 입니다. 2020. 9. 3. [html] 웹 에디터 편집기 / 추천 Quilljs웹 에디터 / WEB Editor 오늘 포스팅은 Quilljs의 웹에디터 포스팅 입니다. 아래 보는 이미지는 에디터 화면입니다. Quilljs웹 에디터의 기능들 입니다. 테마로 "버블"또는 "스노우"입니다. 유효하지 않거나 잘못된 값은 기본 최소 테마를 로드합니다. 테마의 특정 스타일 시트는 여전히 수동으로 포함해야합니다. Inline 배경색 - background 굵게 - bold 색깔 - color 폰트 - font 인라인 코드- code 이탤릭체- italic 링크- link 크기- size 취소 선- strike 위첨자 / 아래 첨자- script 밑줄- underline Block 인용구- blockquote 헤더 - header 들여 쓰기- indent 리스트- list 텍스트 정렬- align 텍스트 방향- direction.. 2020. 8. 2. 이전 1 다음
