루미오

최신 글

• jQuery 제이쿼리(jQuery) Select(셀렉트 박스) 사용법 정리 안녕하세요. 루미오입니다. jQuery에서의 Select 사용법을 정리해 보겠습니다. 순서 ● HTML Select 선언 ● 변경 감지 (Change Event) ● Value 알아내기 ● Value 바꾸기 ● 개수 확인 ● Select Box Disabled ● Option Disabled ● 전체 Source Code & 바로 Test [jsfiddle] 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. ● HTML Select 선언 Indian-Red Red Dark-Red Light-Green Green Dark-Green Light-Blue Blue Dark-Blue Gray Black tag를 사용하고 id, name, value를 설정할 ..
• jQuery 제이쿼리(jQuery) Radio(라디오 버튼) 사용법 정리 안녕하세요. 루미오입니다. jQuery에서의 Radio 사용법을 정리해 보겠습니다. 순서 ● HTML Radio 선언 ● Radio 변경 감지 (Change Event) ● Checked/Unchecked 찾기 ● 상태 바꾸기 (Radio 1개) ● 상태 바꾸기 (전체) ● Radio Value 알아내기 ● Radio 개수 확인 ● Disabled 확인 ● Disabled 설정/해제 ● 전체 Source Code & 바로 Test [jsfiddle] 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. ● HTML Radio 선언 Colors PINK RED ORANGE YELLOW GREEN CYAN tag에 type은 radio를 사용하고 id, na..
• jQuery 제이쿼리(jQuery) Checkbox 사용법 정리 안녕하세요. 루미오입니다. jQuery에서의 Checkbox 사용법을 정리해 보겠습니다. 순서 ● HTML Checkbox 선언 ● Checkbox 변경 감지 (Change Event) ● Checked 여부 확인 ● 상태 바꾸기 (Checkbox 1개) ● 상태 바꾸기 (Checkbox 전체) ● Checkbox Value 알아내기 ● Checkbox 개수 확인 ● Checkbox Array에 넣기 ● Disabled 확인 ● Disabled 설정/해제 ● 전체 Source Code & 바로 Test [jsfiddle] 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. ● HTML Checkbox 선언 PINK RED ORANGE YELLOW GRE..
• JavaScript 자바스크립트(JavaScript) 문자열 찾기 안녕하세요. 루미오입니다.JavaScript에서 문자열을 찾아야 할 때 어떤 함수를 사용할까요? 가장 많이 쓰는 함수는 indexOf(), lastIndexOf() 함수가 아닐까 생각합니다. 익숙한 함수입니다. 사실 정규식을 안 쓰면 선택의 여지가 없었습니다. 하지만 ES6부터는 startsWith(), endsWith(), includes() 함수를 제공하기 때문에 용도에 따라 선택할 수 있게 되었습니다. 물론 복잡한 검색은 여전히 정규식을 사용하는 search(), march() 함수를 사용하면 됩니다. 이제 하나씩 알아보겠습니다. 순서 ● indexOf() : 문자열 앞에서부터 특정 문자열 위치 찾기 ● lastIndexOf() : 문자열 뒤에서부터 특정 문자열 위치 찾기 ● startsWith()..
• JavaScript 자바스크립트(JavaScript) String.prototype.includes() 폴리필(polyfill) 안녕하세요. 루미오입니다. JavaScript는 특정 문자열의 포함여부를 확인하는 includes() 함수를 ES6부터 제공하고 있습니다. 현재 IE에서는 사용할 수 없습니다. 물론 indexOf() 함수를 사용해서 특정 문자열이 포함되었는지 찾을 수 있지만, includes() 함수를 사용한다면 코드가 더 명확해지겠지요. 오늘은 includes() 함수의 폴리필을 만들어 보겠습니다. 순서 ● String.prototype.includes() 폴리필(polyfill) ● String.prototype.includes() 사용법 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. String.prototype.includes() 폴리필 if(!String..
• JavaScript 자바스크립트(JavaScript) String.prototype.endsWith() 폴리필(polyfill) 안녕하세요. 루미오입니다. JavaScript는 특정 문자열로 끝나는지 확인하는 endsWith() 함수를 ES6부터 제공하고 있습니다. 현재 IE에서는 사용할 수 없습니다. 물론 lastIndexOf() 함수를 사용해서 특정 문자열로 끝나는지 찾을 수 있지만, endsWith() 함수를 사용하면 코드의 가독성이 좋아지겠지요. 오늘은 ennsWith() 함수의 폴리필을 만들어 보겠습니다. 순서 ● String.prototype.endsWith() 폴리필(polyfill) ● String.prototype.endsWith() 사용법 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. String.prototype.endsWith() 폴리필 /* Strin..
• JavaScript 자바스크립트(JavaScript) String.prototype.startsWith() 폴리필(polyfill) 안녕하세요. 루미오입니다.JavaScript는 특정 문자열로 시작하는지 확인하는 startsWith() 함수를 ES6부터 제공하고 있습니다. 현재 IE에서는 사용할 수 없습니다. 물론 indexOf() 함수를 사용해서 특정 문자열로 시작하는지 찾을 수 있지만, startsWith() 함수를 사용하면 코드가 더 명확해지겠지요. 오늘은 startsWith() 함수의 폴리필을 만들어 보겠습니다. 순서 ● String.prototype.startsWith() 폴리필(polyfill) ● String.prototype.startsWith() 사용법 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. String.prototype.startsWith() 폴리필 /..
• JavaScript 자바스크립트(JavaScript) String.prototype.trimEnd String.prototype.trimRight 폴리필(polyfill) 안녕하세요. 루미오입니다. 순서 ● trimtrimEnd(), trimRight() 폴리필(polyfill) ● trimtrimEnd(), trimRight() 사용법 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. JavaScript는 문자열의 뒤의 공백을 제거하는 trimEnd(), trimRight() 함수를 제공합니다. trimRight()는 trimEnd()의 alias입니다. 하지만 IE에서 전혀 지원하지 않고 Chrome 66 이상 Firefox 61 이상에서만 지원합니다. 그렇기 때문에 호환성을 위해서 동일한 기능의 폴리필을 적용해야 합니다. trimEnd(), trimRight() 폴리필(polyfill) if(!String.prot..
• JavaScript 자바스크립트(JavaScript) String.prototype.trimStart String.prototype.trimLeft 폴리필(polyfill) 안녕하세요. 루미오입니다. 순서 ● trimStart(), trimLeft() 폴리필(polyfill) ● trimStart(), trimLeft() 사용법 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. JavaScript는 문자열의 앞의 공백을 제거하는 trimStart(), trimleft() 함수를 제공합니다. trimleft()는 trimStart()의 alias입니다. 하지만 IE에서 전혀 지원하지 않고 Chrome 66 이상 Firefox 61 이상에서만 지원합니다. 그렇기 때문에 호환성을 위해서 동일한 기능의 폴리필을 적용해야 합니다. trimStart(), trimLeft() 폴리필(polyfill) if(!String.prototy..
• JavaScript 자바스크립트(JavaScript) String.prototype.trim 폴리필(polyfill) 안녕하세요. 루미오입니다. 순서 ● String.prototype.trim() 폴리필(polyfill) ● String.prototype.trim() 사용법 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. JavaScript는 문자열의 앞, 뒤의 공백을 제거하는 trim() 함수를 제공합니다. 하지만 IE 9 이상에서만 지원하기 때문에 호환성을 위해서 동일한 기능의 폴리필을 적용해야 합니다. String.prototype.trim() 폴리필(polyfill) if(!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g,''); }; }..
• Java 자바(Java) String to Number(short, int, logn, float, double) 변환 안녕하세요. 루미오입니다. Java에서 숫자 형태의 String을 숫자 (short, int, logn, float, double)로 변환하는 방법을 알아보겠습니다. 순서 ● String to int (Integer) 변환 ● String to short (Short) 변환 ● String to long (Long) 변환 ● String to float (Float) 변환 ● String to double(Double) 변환 String을 int로 변환할 때는 Integer class에서 제공하는 parseInt()와 valueOf()함수를 사용하면 됩니다. 두 함수는 공통으로 String이 숫자로 변환할 수 없는 경우 NumberFormatException을 throw 합니다. 그리고 두 함수의 차이점..
• JavaScript 자바스크립트(JavaScript) 배열(Array)의 추가 삭제 안녕하세요. 루미오입니다. JavaScript의 Array에 앞과 뒤에 요소를 추가하거나 삭제하는 방법(shift, unshift, push, pop ), 특정 요소를 중간에 추가하거나 삭제하는 방법(splice)을 알아보겠습니다. 순서 ● Array 앞, 뒤에 추가 삭제 (shift, unshift, push, pop) ● Array 특정 요소 추가 삭제 (splice) ● Array 특정 요소 찾기 (indexOf, lastIndexOf) ● Array 특정 요소 찾아서 바꾸기 (indexOf, splice) ● 전체 Source Code & 바로 Test [jsfiddle] 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. Array 앞, 뒤에 ..
• JavaScript 자바스크립트(JavaScript) Array.prototype.indexOf, Array.prototype.lastIndexOf 폴리필(polyfill) 안녕하세요. 루미오입니다. JavaScript Array 함수 중에 indexOf()와 lastIndexOf()는 IE 9 이상에서만 지원합니다. IE 8 이하에서 사용하기 위해서는 폴리필(polyfill)을 적용해야 합니다. 오늘은 indexOf()와 lastIndexOf()의 폴리필(polyfill)을 소개하겠습니다. 순서 ● Array.prototype.indexOf 폴리필(polyfill) ● Array.prototype.lastIndexOf 폴리필(polyfill) 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. Array.prototype.indexOf 폴리필(polyfill) [Array.prototype.indexOf 폴리필] /* A..
• JavaScript 자바스크립트(JavaScript), 제이쿼리(jQuery) 페이지 이동(redirect) 안녕하세요. 루미오입니다. JavaScript와 jQuery에서 페이지 이동 방법을 알아보겠습니다. 순서 ● JavaScript의 페이지 이동 ● jQuery의 페이지 이동 ● Test Source Code JavaScript의 페이지 이동 /* assign 방식 */ window.location = "https://loomio.kr"; window.location.href = "https://loomio.kr";// window.location 동일함. window.location.assign("https://loomio.kr");// window.location 동일함. /* replace 방식*/ window.location.replace("https://loomio.kr"); assign방식(2,..
• JavaScript 자바스크립트(JavaScript) 공백 제거 (trim, trimStart, trimLeft, trimEnd, trimRight) 안녕하세요. 루미오입니다. JavaScript에서 문자열(string)의 공백 제거 방법에 대해서 알아보겠습니다. 순서 ● trim() : 문자열 양 끝 공백 제거 ● trimStart(), trimLeft() : 문자열 앞(left) 공백 제거 ● trimEnd(), trimRight() : 문자열 뒤(right) 공백 제거 하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다. JavaScript는 내장함수 5개 제공합니다. trim(), trimStart(), trimLeft(), trimEnd(), trimRight() method가 그것입니다. trim()은 IE 9 이상에서만 지원하며, trimStart(), trimLeft(), trimEnd(..
• JavaScript 자바스크립트(JavaScript) null 또는 undefined 체크하기 (isNull) 안녕하세요. 루미오입니다. JavaScript에서 null이나 undefined를 체크하는 방법을 알아보겠습니다. 순서 ● isNull() function 만들기 ● isNull() function 사용법 JavaScript에서 null이나 undefined를 체크해야 하는 상황은 매우 빈번합니다. 하지만 JavaScript의 내장함수로 제공되지 않기 때문에 번거롭지만, 매번 손가락 운동을 해야 하는데요. 오늘은 null과 undefined를 체크하는 function을 만들어 보겠습니다. isNull() function 만들기 먼저 Source Code를 보시겠습니다. function isNull(v) { return (v === undefined || v === null) ? true : false; ..
• 티스토리 SyntaxHighlighter v3.0.83 (소스 코드 하이라이터) 설치 및 사용법 안녕하세요. 루미오입니다. 순서 1. SyntaxHighlighter 설치 2. SyntaxHighlighter 사용법 블로그를 운영하거나 웹 개발 시에 source code를 보기 좋게 하이라이트 하고 싶으시죠? 오늘은 소스 코드 하이라이터 중 가장 막강한 SyntaxHighlighter v3.0.83을 CDN을 이용한 설치와 사용법을 알아보겠습니다. 지금 보시는 페이지도 사용하고 있습니다.SyntaxHighlighter는 현재 v4.0.1이 최신 버전입니다. 하지만 스스로 build를 해야 하고, CDN 서비스를 제공하지 않고 있습니다. build를 하자니 git도 설치하고, npm도 설치하고, minify도 해야 하고, source code도 일부 수정해야 하고 급 귀차니즘이 발동하네요. 그래서 S..
• 티스토리 티스토리 Poster 스킨 분류 전체보기 없애기 안녕하세요. 루미오입니다. 순서 1. (Tistory Theme) CSS 파일 열기 2. CSS 추가 티스토리를 운영하다 보면 카테고리 편집기능이 아쉬울 때가 있습니다. 그중에서도 제일 위에 떡 하니 자리 잡은 분류 전체보기를 없애고 싶을 때가 있습니다. 하지만 지우는 기능은 현재로서는 티스토리에서 제공하지 않습니다. 1. (Tistory Theme) CSS 파일 열기 그럼 어떻게 할까요? 날려버리면 고민 해결!!! 먼저 [[스킨편집]] 화면으로 들어가세요. 스킨편집 메뉴를 클릭하면 스킨편집 화면으로 이동합니다.) 스킨편집 화면에서 html 편집 버튼을 클릭하고 이어서 CSS 버튼을 클릭하세요. 이제 CSS를 추가합니다. 2. CSS 추가 CSS 파일의 제일 아래에 아래의 코드를 복사해 붙여넣고 완료되면..