MINYA

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를 사용하여 줄바꿈을 막아주어야 테이블이 깨지지 않고 올바르게 보여지게 됩니다. /*해당 범위를 벗어나지 않으면 그대로 표시하고, 벗어나면 스크롤..

자바에서 긴 소수를 반올림하여 n번째 자리까지 나타내는 방법에 대해 알아보겠습니다. 여러가지 방법이 있겠습니다만 Math.round(); Math.ceil(); Math.floor(); 함수를 활용하거나 String.format(); 함수를 활용하는것이 대표적인 방식입니다. 위 함수들은 실수의 소수점 첫번째 자리를 반올림하여 정수로 리턴시켜줍니다. 하지만 이 메서드를 잘 활용하면 소수점 몇번째 자리까지 나타내는것도 가능합니다. 예를들어 33.777*100을 하면 3377.7가 되겠죠. 여기서 round를 적용시키면 3378이라는 정수가 리턴될것입니다. 여기서 다시 100.0을 나눠주면 실수로 적용되어 나옵니다. (33.78이 나오게 됩니다.) 소수점 둘째 자리까지 나타내고싶으시면 100.0을 곱하였다가 ..

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

동적 쿼리(if, choose) 복잡한 형태의 쿼리를 만들다 보면 로직에따라 if문을 추가해야 한다던지 if else 문을 추가해야할 경우가 있습니다. myBatis는 이를위해 동적 쿼리를 위한 기능을 제공합니다. 그중에서도 가장 많이 사용되는 if 문과 choose문을 살펴보겠습니다. 동적쿼리는 XML 매퍼에 지정하게 되는데, JSTL을 사용해봤던 사람들이라면 큰 어려움이 없는 문법입니다. IF age라는 속성의 값이 null이나 빈값이 아닐때 검색조건에 추가하는 구문입니다. SELECT id, name FROM TB_test a WHERE type = 'A' AND age = #{age} Choose if else와 같다고 보면 됩니다. SELECT id, name FROM TB_tes..

Math() Math.ceil() : 소수점 올림, 정수 반환 Math.floor() : 소수점 버림, 정수 반환 Math.round() : 소수점 반올림, 정수 반환 올림 let testNum = 99.11; console.log(Math.ceil(testNum)); // 100 출력, 올림 적용 버림 let testNum = 99.11; console.log(Math.floor(testNum)); // 99 출력, 버림 적용 반올림 let testNum = 99.5; console.log(Math.round(testNum)); // 100 출력, 반올림 적용 toFixed(), toExponential(), toPrecision() toFixed(), toExponential(), toPrecisio..

substring, 문자열 자르기 Substring을 사용하기 위해선 function을 지정해야 하는데 아래의 태그를 jsp 페이지 최상단에 선언해주세요. 사용법 ${fn:length(testValue) } // 데이터의 사이즈 확인 ${fn:substring(testValue,0,3) } // 010 ${fn:substring(testValue,4,8) } // 1234 ${fn:substring(testValue,9,13) } // 5678

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

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 모달 만들기 모달이란, 다음 이미지와 같이 기존의 내용을 가리고 나타나는 메시지박스 같은 형태의 UI 를 의미합니다. 이번에는 이런 UI 를 HTML 과 JavaScript 를 사용하여 만들어보겠습니다. 우선, Codesandbox 에서 새로운 Vanilla Sandbox 를 만드세요. 그리고, index.js 를 열고 맨 위 import "./styles.css"; 하단의 코드를 지워주세요. 이번에 우리는 스타일링을 할 것이기 때문에 css 를 불러와야 합니다. 그 다음에, index.html 을 열어서 다음과 같이 수정해주세요. 안녕하세요! 내용내용내용 버튼 열기 이렇게 화면이 나타났나요? 그 다음엔, 버튼 아래에 다음 내용을 보여주세요...