MINYA

테이블 헤드 고정 바디 스크롤 테이블을 만들면서 데이터 리스트들을 뿌려줄때 페이징 처리가 아니라, 스크롤 형태의 테이블을 만들고 싶은데, 일반적으로 만들면 테이블 전체에 스크롤이 적용됩니다. 아래의 방법으로 만들면 헤드부분은 고정되며 리스트로 뿌려진 데이터들만 스크롤이 적용됩니다. 모든 브라우저 공통 작동하는 코드 단점이라면 css 코드가 길어진다는 단점 CSS HTML Table Header 1 Table Header 2 Table Header 3 Data1111111111111111111111111 Data Data Data Data2222222222222222222222222 Data Data Data Data3333333333333333333333333 Data Data Data Data Data..

자동으로 콤마(,) 입력 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); 전체 처..

checkbox 사이즈(크기) 조절 방법 첫 번째 방법 input[type=checkbox] { -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ -webkit-transform: scale(2); /* Safari and Chrome */ -o-transform: scale(2); /* Opera */ padding: 10px; } 두 번째 방법 input[type="checkbox"]{ width: 30px; /*Desired width*/ height: 30px; /*Desired height*/ cursor: pointer; -webkit-appearance: none; appearance: none; } 세 번째 방법 in..

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값..

테이블 스크롤 기능 table 태그를 만들어서 작업하다보면 반응형에서 문제를 일이큽니다. 크기는 줄어드는데, 테이블의 데이터들 때문에 넓어지고나 늘어나거나 길어지곤 합니다. 이럴 때 테이블에 가로 또는 세로 스크롤 기능을 사용하면 됩니다. 순서 div 하위에 table 생성 div에 width 값이나 height 값을 지정 overflow 속성을 사용하여 스크롤 여부 속성을 지정 필수 : table 에 white-space:nowrap; 적용 물론 테이블 마다 사용법이 다르겠지만 , 일반적으로 정보 전달을 위한 테이블 요소인데, 정보의 내용이 많다면 nowrap를 사용하여 줄바꿈을 막아주어야 테이블이 깨지지 않고 올바르게 보여지게 됩니다. /*해당 범위를 벗어나지 않으면 그대로 표시하고, 벗어나면 스크롤..

input태그 사용시 type=”number” 로 지정하면 아래와 같은 현상이 나타날 때가 있습니다. 바로 화살표 증가, 감소 버튼이 생겨버리는데요. 간단히 없앨 수 있는 방법이 있습니다. input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 위의 코드를 styleSheet 에 적용하시면 됩니다. 결과

div 태그 또는 특정 태그에 코드나, 일반 텍스트 입력시 자동으로 줄 바꿈을 하지 못하고 범위를 벗어나는 경우가 있습니다. 저의 경우 블로그 포스팅시 코드블럭(code block) 범위를 벗어나는 경우였습니다. 이 문제를 해결하는 방법은 간단합니다. div 또는 특정 태그의 스타일을 정해주는 부분에 “word-break:break-all;” 또는 “white-space: pre-wrap;”를 추가하면 됩니다. div{ word-break:break-all; } pre, code { white-space: pre-wrap; }

모바일 웹에서 수평 스크롤(가로 스크롤)이 있을 경우 위의 그림과 같이 화면을 터치하여 왼쪽으로 이동시키면 사이트가 좌우로 움직이게 되는 문제 발생. 모바일 기기에서 수평 스크롤을 비활성화하여 이 문제를 해결할 수 있습니다. 비슷한 현상이 생기는경우 아래와 같이 수정해보길 바랍니다. 우선 다음 메타 태그를 header에 추가합니다. (이미 있는 경우 기존 것을 대체합니다.) 어떤 사용자는 content=”initial-scale=1.0; maximum-scale=1.0;를 삭제하니 문제가 해결된다고도 하네요. 아이폰 등 Apple iOS 기기에서 문제가 나타나는 경우 다음 메타 태그를 추가하도록 하도록 합니다. 아이폰 문제 확인해보기 : Prevent horizontal scroll in iOS WebA..