개발이야기234

• 

  [자바스크립트] Apexcharts 사용법, 예제, 차트 그리기 Chart.js 이어서 색감이 아름다운(?) Apexcharts를 소개드립니다. 다양한 색감을 보여드리기 위해 10개의 차트를 준비했습니다. div에 각각의 차트 영역을 지정 합니다. 각각의 차트 영역의 HTML을 읽고 이벤트를 발생시킵니다. 소스코드를 살펴보시고 사용하실 차트를 고르시면 됩니다. Line Chart Area Chart Column Chart Bar Chart Pie Chart Donut Chart Radar Chart Polar Area Chart Radial Bar Chart Bubble Chart ↓↓↓↓↓ 다양한 예제는 공식 사이트에서 확인 하실 수 있습니다. JavaScript Chart Examples & Samples Demo – ApexCharts.js Get a glimp.. 개발이야기/자바스크립트 2022. 10. 20.

• 

  [jQuery] 아코디언(accordian) 메뉴, slideUp / slideDown 사용하기 jquery로 만든 아코디언(accordian) 메뉴입니다. 아코디언 메뉴는 제목을 클릭하면 내용이 펼쳐지고, 다시 클릭하면 축소되는 기능을 말합니다. 스타일 태그를 사용해 제목은 노출시켜놓고, 내용은 숨겨 놓았습니다. 제목을 클릭했을 때 내용의 상태를 보고 숨겨져 있으면 활성화시키고, 반대로 활성화돼있으면 숨김 처리합니다. 간단한 내용이므로 소스 확인 해보시고 응용하시면 됩니다. 어떤 서비스 입니까? 후린개발자 블로그 입니다. 반갑습니다. 사용법이 어떻게 되나요? 블로그 게시글을 정독 해주시면 감사 하겠습니다. 클릭 해주세요. 클릭 해주셔서 감사합니다. 모든 페이지에서 지원하나요? class 명칭을 확인 하시면 쉽게 적용 가능 하십니다. ↓↓↓↓↓ 예제 입니다. (클릭해보세요.) HTML 삽입 미리보기.. 개발이야기/jQuery 2022. 10. 17.

• 

  [PHP] 간단히 페이징 구현하기, 리스트 페이징 (bootstrap 페이징 css) php에서 간단히 페이징을 구현할 수 있는 소스 코드입니다. 페이징 디자인을 bootstrap 템플릿을 사용하였습니다. 페이징은 전체 리스트를 노출하는 것이 아니라 설정한 개수만큼 화면에 노출하는 것입니다. php 변수 $pageNum : 현재 페이지 (값이 없을 때는 1 페이지) $list, $b_pageNum_list : 화면에 노출할 리스트는 10개로 정의하였습니다. $block : 전체 블록의 개수 $b_start_page : 현재 블록의 시작 페이지 $b_end_page : 현재 블록의 마지막 페이지 $total_count : 리스트 총 갯수 $total_page : 총 페이지 수 아래 예제의 리스트 총개수는 22개이며, 10개씩 노출하였습니다. php 변수의 설정값을 수정하셔서 간단히 테스트하.. 개발이야기/PHP 2022. 10. 14.

• 

  [PHP] CAPTCHA(캡차) 이미지 만들기, 캡차(CAPTCHA) 새로고침 회원가입이나 결제 시에 컴퓨터와 사람을 구분하기 위해 악의적인 행위가 발생되는 것을 방지하기 위해 활용됩니다. 캡차를 생성하는 방법은 다양하지만 php만으로도 간단하게 이미지 기반의 캡차를 생성을 할 수 있습니다. 페이지는 캡차를 보여주는 페이지와 캡차를 생성하는 페이지로 구성되어 있습니다. 1. 캡차를 보여주는 페이지 (회원가입) captcha.php를 호출하면서 현재 시간을 같이 parameter로 보내고 있습니다. captcha.php가 호출되면서 session의 값과, 이미지의 캐시를 새로고침 하기 위해서입니다. Captcha Number : 개발이야기/PHP 2022. 10. 14.

• 

  [jQuery] 이미지 자동으로 움직이기, 이미지 반복해서 움직이기 (animate) animate 메서드를 활용해서 이미지를 반복적으로 움직이게 했습니다. 스타일 범위에서 움직이게 하였고, 행위가 끝나고 콜백 함수를 통해서 반복적으로 실행하였습니다. 사용법 $(선택자).animate({스타일 : 값}, 속도 ,콜백 함수); 사용 예제 개발이야기/jQuery 2022. 10. 14.

• 

  [MySQL] 날짜 차이 계산하기 (DATEDIFF 사용방법) 두 날짜의 계산을 통해 day를 반환하는 함수입니다. 사용방법 DATEDIFF(날짜1, 날짜2); select DATEDIFF('2022-10-15 00:00:00', '2022-10-12 00:00:00'); //3 select DATEDIFF('2022-10-12 00:00:00', '2022-10-11 00:00:00'); //1 select DATEDIFF('2022-10-31 00:00:00', '2022-10-01 00:00:00'); //30 select DATEDIFF('2022-10-12 00:00:00', '2022-10-13 00:00:00'); //-1 사용예제 select *, DATEDIFF(now(), reg_dt) as DATEDIFF from test 개발이야기/MySQL 2022. 10. 13.

• 

  [자바스크립트] javascript 테이블 병합하기 (table td rowspan) table td text에 class명이 동일한 값이 위아래로 있을 경우 병합해주는 함수입니다. tbody의 병합할 컬럼 번호를 호출해서 값을 비교하고 있습니다. 저는 시군구 컬럼과 읍면동 컬럼을 병합하고 있습니다. 아래 예제를 통해서 다양하게 응용하시면 될 것 같습니다. 병합하기 순번 이름 시군구 읍면동 1 홍길동 서울특별시 서초구 2 이순신 서울특별시 강남구 3 심봉사 겅기도 부천시 4 심청이 경기도 부천시 5 유관순 서울특별시 영등포구 ↓↓↓↓↓ 결과화면 개발이야기/자바스크립트 2022. 10. 13.

• 

  [자바스크립트] javascript 테이블 정렬하기 (table sort) javascript를 활용해서 table(테이블)의 순번으로 sort 해보겠습니다. 기본 html의 순서는 1, 3, 2, 4 순서로 정렬되어 있습니다. 스크립트 함수(sortTable)는 테이블 id와 정렬할 컬럼 번호를 매개변수로 받고 있습니다. 테이블 tr을 for문으로 돌면서 순번을 비교해서 정렬시킵니다. 현재 함수 소스는 오름차순으로 정렬되어 있습니다. 부등호를 바꾸시면 내림차순으로 정렬됩니다. 정렬하기 순번 이름 시군구 읍면동 1 홍길동 서울특별시 서초구 3 심봉사 겅기도 부천시 2 심청이 경기도 부천시 4 이순신 서울특별시 강남구 개발이야기/자바스크립트 2022. 10. 13.

• 

  [자바스크립트] javascript 숫자 콤마 찍기 (number_format) php는 3자리마다 숫자를 찍어주는 함수 number_format이 있어 편리하게 사용합니다. 스크립트에서는 아래 예제를 통해서 3자리마다 콤마(,)를 찍어줄 수 있습니다. 사용법이 간단해 응용해서 사용하시면 됩니다. 체크 ↓↓↓↓↓↓ 아래 예제에서 확인해주세요. HTML 삽입 미리보기할 수 없는 소스 개발이야기/자바스크립트 2022. 10. 13.

• 

  [자바스크립트] javascript url 정규식, 유효성 검사 url을 체크하는 자바스크립트 함수입니다. return을 true / false로 반환하고 있습니다. url 체크 로직을 통해서 다양하게 응용하시면 됩니다. 아래 예제를 통해서 확인하실 수 있습니다. 체크 개발이야기/자바스크립트 2022. 10. 13.

• [자바스크립트] javascript checkbox(체크박스) 선택된 값 확인, each() 함수 체크박스로 선택된 값을 확인하는 소스 코드입니다. each() 함수는 선택한 요소가 여러 개 일때 반복하여 함수를 실행합니다. 체크박스 name을 동일하게 지정해 선택된 값을 체크 합니다. 아래 간단한 예제를 참고해 응용하시길 바랍니다! 월요일 화요일 수요일 목요일 금요일 토요일 일요일 HTML 삽입 미리보기할 수 없는 소스 개발이야기/자바스크립트 2022. 10. 12.

• [jQuery] bootstrap(부트스트랩) 레이어 팝업/모달창(modal) 띄우기 흔히 레이어 팝업/모달 창은 기존의 페이지 위에 레이어를 새로 올리는 것을 말합니다. 기존의 팝업은 새로운 윈도 창이 열리는 것에 반하여 레이어(모달)는 사용자에게 보여주고 싶은 메시지나 다음 진행사항으로 넘어가기 위해 필요한 사항을 노출할 수 있습니다. 아래 예제는 bootstrap(부트스트랩)으로 간단히 모달 창을 구현해 봤습니다. 페이지에 진입 하자마자 모달 창이 뜨는 소스입니다. 아래를 응용하셔서 버튼을 클릭해서 모달을 띄우고 싶다면 이벤트 후 modal('show')를 통해 호출 하실 수 있습니다. 모달 띄우기 modal('show') 모달 숨기기 modal('hide') × 타이틀 내용 입력 닫기 저장 개발이야기/jQuery 2022. 10. 11.