ModalTemplate공통함수화로 코드의 재사용을 최소화.부트스트랩의 Modal을 이용함 GitHub - hbcha0916/BasicModalContribute to hbcha0916/BasicModal development by creating an account on GitHub.github.com 파일Bootstrap은 최신버전 사용을 권장, 내장된 Bootstrap을 기반으로 만든 ModalTemplate, basicModal파일임.Bootstrap 관련 js파일Bootstrap 관련 css파일basicModal 파일예제 HTML 파일구현기능Modal을 쉽게 사용Modal은 가운데, 닫기혹은 확인버튼을 눌러야 닫히는 Modal임.사용 순서HTML에 Modal을 사용할 개수만큼 생성ModalTem..
BasicChartJS GitHub - hbcha0916/BasicChartJSContribute to hbcha0916/BasicChartJS development by creating an account on GitHub.github.com 공통함수화로 코드의 재사용을 최소화.파일chartJS는 최신버전 사용을 권장, 내장된 chartJS를 기반으로 만든 basicChartJS파일임.chart.js 관련 js파일basicChartJS 파일예제 HTML파일구현기능기본옵션을 반응형으로 변경BarChart기준으로 쉬운사용사용 순서$.extend(true,,basicChartJS);으로 덮어씌워 사용canvas 상위태그에 대한 뷰포트 지정(canvas에 지정하면 차트가 깨지는 문제가 있음.)init으로 ch..
BasicProgressBar GitHub - hbcha0916/BasicProgressBarContribute to hbcha0916/BasicProgressBar development by creating an account on GitHub.github.com 공통함수화로 코드의 재사용을 최소화.파일ProgressBar.js는 최신버전 사용을 권장, 내장된 ProgressBar.js를 기반으로 만든 BasicProgressBar파일임.ProgressBar.js 관련 js파일BasicProgressBar 파일예제 HTML파일구현기능쉬운사용사용 순서$.extend(true,,basicProgressBar);으로 덮어씌워 사용CSS에서 ProgressBar의 크기지정init으로 ProgressBar가 보..
BasicGridJS GitHub - hbcha0916/BasicGridJSContribute to hbcha0916/BasicGridJS development by creating an account on GitHub.github.com 공통함수화로 코드의 재사용을 최소화.파일gridJS는 최신버전 사용을 권장, 내장된 gridJS를 기반으로 만든 basicGridJS파일임.GridJS.js 관련 js파일GridJS CSS파일basicGridJS 파일예제 HTML파일구현기능draw()시 페이지네이션 초기화 문제 해결사용자지정 하이라이트(예시로 사진의 첫번째표의 중구 부분 하이라이트)선택버튼을 누른 행 하이라이트수동적 Loading(데이터를 가져온후 추가적인 데이터파싱이필요할 경우 유용)한글화사용 순서$..
티스토리 위젯을 하나 만들어 봤습니다. QuickSearch3.0을 Widget형태로 만들었으며, QuickSearch3.0의 빠른 검색과 빠른 붙여놓기 등 핵심 기능만 있는 위젯입니다. 기능 설명 빠른 붙여놓기 위젯 부분영역에 마우스를 클릭하고 붙여놓기(`ctrl + v`) 키를 누르면 바로 클립보드 검색이 가능해요 빠른 검색 검색창에 검색어를 입력 후 엔터를 누르면 바로 검색이 가능해요. 주의 hELLO 스킨을 기준으로 개발되었습니다. 그래서 다른 스킨에는 적절하지 못한 형식으로 표시될 수 있습니다. hELLO 티스토리 스킨을 소개합니다. hELLO 스킨은 본래 기능의 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때..
구글 자동완성 API로 TEXT 자동완성 기능 사용하기 QuickSearch를 업데이트를 적용하면서 나름 유용한 기능같아 따로 포스트 작성합니다. 우리가 구글에 "아" 를 입력하면 이렇게 자동완성이 뜨는것을 확인할 수 있습니다. 이와 똑같은 기능을 구현하는 코드입니다. 기본적인 코드는 아래와 같습니다 id가 input_text에 keyup 할경우 url 맨 뒤에 id가 input_text의 value를 넣고 GET방식으로 호출하여 JSON 형식으로 받습니다. 성공할 경우 `받아온 데이터[1]의 길이만큼 반복` -> class가 tables 인 요소를 비우고 `받아온 데이터[1][i]번째` 요소를 추가시킵니다. 하지만 여기서 코드를 실행시키면 아마 오류가 날겁니다. 저는 아래와 같은 문제를 겪었습니다. S..
Git을 공부해 볼 겸, 이전에 나만의 시작페이지에 대한 불편한 점을 보완하고자 회사에서 조금 쉴 때, 퇴근하고, 주말에, 틈틈이 시간 내어 대규모 업데이트를 하였다. 그냥 완전히 다른 프로그램이고, 복붙한 코드도 있어서 J쿼리인 것도 있고 아닌 것도 있고.. ㅋㅋ 이전 버전 나만의 브라우저 시작페이지 개인이 사용할 목적 겸 기말고사 과제로 만든 웹 유틸리티 제작 목적 대학교 웹 프로그래밍 기초 기말과제 Google / Naver / Youtube 원클릭 다이렉트로 검색 프로그래머의 경우 오류 내용을 클립보드 hbcha0916.tistory.com 이전 버전에서는 바로가기가 5개, 클립보드도 버튼형식이라 불편함 그리고 클립보드 버튼 누르면 권한수락 나와서 너무 불편했고, 번역은 뭐 쓰지도 않았다. 가장 ..
개인이 사용할 목적 겸 기말고사 과제로 만든 웹 유틸리티 제작 목적 대학교 웹 프로그래밍 기초 기말과제 Google / Naver / Youtube 원클릭 다이렉트로 검색 프로그래머의 경우 오류 내용을 클립보드 버튼으로 간편 검색 파파고를 이용하여 다이렉트로 번역 즐겨찾는 사이트 5가지를 직접 지정 가능 불편함 점 로컬스토리지 기반이라 인터넷 기록 및 인터넷 기록 삭제 시 다시 새팅 필요 => 옵션 백업/복원 기능 구현가능 번역 및 검색 내용이 너무 길 경우 검색 오류 발생 시대에 맞지 않는 오리지날 자바 스크립트(J쿼리 X) 사용 [코드 가독성 저하] => 대체 가능(해당 유틸 제작 당시 J쿼리 과정을 이수하지 않은 상태) 옵션기능 저장 불가 => 옵션 백업/복원 기능 구현가능 핑계거리 1년 넘게 적용..
