MINYA

자동으로 콤마(,) 입력 input 태그에 숫자를 입력시에 천 단위마다 자동으로 콤마를 찍어주는 팁입니다. "common.js" 라는 파일을 만들어 이렇게 전역적으로 사용되는 파일들을 작성하고 사용하시면 더 깔끔하게 사용하실 수 있어요. HTML 작성 위의 input 태그처럼 작성해주고 onkeyup 속성으로 스크립트를 호출합니다. script (common.js) function inputNumberFormat(obj) { obj.value = comma(uncomma(obj.value)); } function comma(str) { str = String(str); return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'); } function uncomma(s..

컬럼안에서 계산하는 팁 (DataTables, calculated column) 데이터테이블을 사용중에 columns: [] 영역 안에서 서버에서 전달되는 data들끼리 연산해야할 때가 있습니다. 보통은 각각 전달되는 data: "객체명" 으로 하나씩 밖에 뿌려주지 못 하는데요, 아래와 같은 방법을 사용하면 쉽게 data: "객체명" + data: "객체명" 처럼 연산을 할 수 있습니다. let dataTable; function getProductInfo(productNum) { dataTable = $('#dataTable').dataTable({ lengthChange: false, ordering: false, searching: false, processing: false, info: false..

Checkbox 체크박스에 제이쿼리나 자바스크립트로 이벤트를 처리해야할 경우가 종종 있다. checked 여부 확인하기 id로 확인하기 $('input:checkbox[id="checkbox_id"]').is(":checked") == true name 으로 확인하기 $('input:checkbox[name="checkbox_name"]').is(":checked") == true $('input[name="checkbox_name"]').is(":checked") 제이쿼리 prop() 메소드 $('#checkboxId').prop("checked"); checked 처리 하기 개별 처리 $('input:checkbox[id="checkbox_id"]').attr("checked", true); 전체 처..

onchange() 함수 활용 간단히 onchange 함수를 활용해볼 수 있다. html 1월 2월 3월 4월 5월 script // 제이쿼리를 이용한 방법 $("#month").change(function(){ let month1 = $(this).val(); let month2 = $("#month > option:selected").val(); console.log(month1); console.log(month2); }); // 함수를 만들어 호출하는 방법 function getMonth() { let month3 = $("#month > option:selected").val(); console.log(month3); } 셀렉트박스(SelectBox) 값(value) 고정시키기 // value값..

콤마(,) 또는 소수점 사용법 jsp 페이지 상단에 아래의 코드를 선언 하고 사용한다. // 결과 : 12,341,234 ( 천 단위마다 ","로 끊어줌 ) // 결과 : ￦1234.00 ( ￦표시 붙인 후, 천 단위마다 "," 표시 후 소수점 2자리까찌 표현함 ) // 결과 : 35% ( %로 표현함 ) // 결과 : 1234.12 ( pattern 에 표시한 자리수만큼 반올림함 ) // 결과 : var에 test라고 선언 한 값을 출력 시 ( ${test} 소수점 이하 버림 ) > 1234

다중(중복, 여러번) 사용 하기 (안에 ) 을 사용하는데, 그 조건 안에 또 다른 조건을 줘야할 경우가 생김. 실행 실행 실행 위와 같이 생각을 하고 코드를 작성했더니 에러가 발생. 위 코드와 같이 생각하는 사람이 많을거라 판단됨. 위 코드처럼 생각하신분 링크 : https://okky.kr/article/432948 다중일경우는 choose문. 단일조건이면 if문 다중일경우는 choose문. 단일조건이면 if문 실행 실행 실행 단일 조건 실행

[JSTL] , 태그 사용법 How to use if-else option in JSTL 조건 jsp 페이지 상단에 아래의 코드를 선언 하고 사용한다. jstl에서 조건에 따른 분기를 처리할 수 있는 태그로 와 가 있습니다. 태그 - test 속성내의 EL 의 결과가 참이면 실행됩니다. else 구문은 없습니다. 예제 위의 코드는 변수 name의 값이 “강호동” 이면 출력합니다. 태그에 사용될 수 있는 속성은 다음 세 가지 입니다. test : 필수 속성으로 속성값으로 EL 비교식을 가집니다. var : 조건 결과를 저장할 변수를 지정합니다. scope : 조건 결과를 저장할 변수의 저장 scope을 지정합니다. .... 위 코드는 te..

CSS 웹 폰트 적용하기 웹 폰트는 상업과 개인용으로 이용이 가능한 Noto Sans CJK KR(본고딕)을 예로 들겠습니다. Google Fonts에 접속합니다. 원하는 폰트를 선택후 Embed 탭에서 로 할지, @import 로 할지 선택합니다. @import CSS 파일 맨 상단에 아래와 같이 선언 선택자에 폰트 적용: font-family: ‘Noto Sans KR’, sans-serif; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@1..

user agent stylesheet? margin 값을 정해두지 않아 브라우저 임의대로 설정한 것입니다. 간혹 css 작업을 하고 결과물을 보는데 생각했던 모습하고 약간 다른 경우가 있습니다. 제대로 css를 작성한 거 같은데 “개발자 도구”로 살펴보면 이상한 문구와 같이 체크해제가 되지 않습니다. 원래는 각 옵션들을 체크 해제하면서 확인이 가능해야 하는데, “user agent stylesheet” 이란 문구와 함께 css로 설정하지 않은 margin이 들어가 있는 걸 볼 수 있습니다. 분명 저는 css로 정확히 파란색 사각형 안에 인증번호가 들어가도록 했는데, 결과물은 사뭇 다릅니다. 위의 이미지와 같이 margin이 들어가 있습니다. 제가 의도한 것도 아닌데 말이죠. 해결방법 간혹 브라우저마다,..

Chart.js 툴팁 사이즈 변경하기 How to setting canvas width and height for fixed size in chart.js responsive 옵션을 true 값을 주면 브라우저 사이즈가 바뀔 때 마다 사이즈가 비율에 맞게 변함. responsive 옵션을 false 값을 주면 브라우저 사이즈가 바뀌어도 “” 태그 안에 고정시킨 사이즈 대로 고정됨. // html