Cginjs > C.m.A Lib > 자료실

검색어 자동완성 - Autocomplete 한글 초성검색 적용하기(active 파란 배경색 커스텀)

최고관리자 — Mon, 16 Mar 2026 16:39:47 +0900

필요한 CSS , JS 파일

hangul.min.js는 https://github.com/e-/Hangul.js 에서 다운받을수 있습니다.


     
    
    autocomplete active 배경색 기본
	자동완성 배경색 


     
    
    autocomplete active 배경색 커스텀
	 자동완성 배경색

검색어 자동완성 - Autocomplete 적용하기(active 파란 배경색 커스텀)

최고관리자 — Mon, 16 Mar 2026 10:56:20 +0900

필요한 CSS , JS 파일


     
    
    autocomplete active 배경색 기본


     
    
    autocomplete active 배경색 커스텀

테이블에서 동적으로 데이터 검색해 테이블 조회(filter) 및 검색어 하이라이트(highlight)

최고관리자 — Tue, 10 Mar 2026 19:10:18 +0900


	 
	
	
	(Caps On)
	


	
	  
		 No.
		 이름
		 연락처
		 기타
	  
	
	
	  
		1
		홍길동
		010-1234-1234
		홍길동은 홍 판서의 아들이면서도 그를 아버지라고 부르지 못했어요
	  
	  
		2
		이모지
		010-1111-2222
		이모티콘
	  
	  
		3
		천궁
		010-8888-1234
		천궁은 혈액순환을 개선하고 두통을 완화하는 데 효과적인 한방 약재
	  
	  
		4
		박장군
		010-0000-0123
		박장군
	  
	  
		5
		알고리즘
		010-0101-0000
		주어진 문제를 해결하기 위한 명확하고 체계적인 절차, 방법 또는 순서
	  
	  
		6
		사과
		-
		사과는 맛있어!

No.	이름	연락처	기타
1	홍길동	010-1234-1234	홍길동은 홍 판서의 아들이면서도 그를 아버지라고 부르지 못했어요
2	이모지	010-1111-2222	이모티콘
3	천궁	010-8888-1234	천궁은 혈액순환을 개선하고 두통을 완화하는 데 효과적인 한방 약재
4	박장군	010-0000-0123	박장군
5	알고리즘	010-0101-0000	주어진 문제를 해결하기 위한 명확하고 체계적인 절차, 방법 또는 순서
6	사과	-	사과는 맛있어!

textarea 현재커서 위치에 내용 삽입

최고관리자 — Fri, 06 Mar 2026 18:10:59 +0900

textarea 현재커서에 내용 삽입

백스페이스 : 커서 위치에서 삭제

최고관리자 — Fri, 06 Mar 2026 18:01:06 +0900

<script>
function backspaceAtCursor(obj) {
	var $input = $(obj);
	var start = $input[0].selectionStart;
	var end = $input[0].selectionEnd;

	// 텍스트가 선택되어 있다면 선택된 텍스트 삭제, 아니면 하나 앞 문자 삭제
	if (start === end && start > 0) {
		$input.val( $input.val().slice(0, start - 1) + $input.val().slice(end) );
		$input.selectionStart = $input[0].selectionEnd = start - 1;
	} else {
		$input.val( $input.val().slice(0, start) + $input.val().slice(end) );
		$input.selectionStart = $input[0].selectionEnd = start;
	}
	$input.focus();
}
</script>

<input type="text" id="ex_text" class="frm_input" value="커서 위치에서 삭제" style="width:80%;" />
<button type="button" class="btn" onclick="backspaceAtCursor('#ex_text');">backspace</button>

Textarea Tab 들여쓰기 구현

최고관리자 — Thu, 05 Mar 2026 19:08:29 +0900

특정 div 영역 fullscreen 지정

최고관리자 — Mon, 02 Mar 2026 13:44:45 +0900

Summernote 에디터 설정 정보 가져오기

최고관리자 — Fri, 20 Feb 2026 19:55:33 +0900

var context = $('#summernote').data('summernote'); /* summernote 에디터 설정 정보 가져오기 */
var ui = context.ui;
var $note = context.layoutInfo.note;
var $editor = context.layoutInfo.editor;
var $editable = context.layoutInfo.editable;
var $toolbar  = context.layoutInfo.toolbar;
var modules = context.modules;
var memos = context.memos;
var options = context.options;
var lang = options.langInfo;

console.log(options.height); // 300 출력
console.log(lang); // 'ko-KR' 출력

Summernote에서 전체 화면(Fullscreen) 모드 적용

최고관리자 — Mon, 16 Feb 2026 13:23:28 +0900

// 기본 설정 (툴바 추가)
$('#summernote').summernote({
  toolbar: [
    ['view', ['fullscreen', 'codeview', 'help']] // 툴바에 fullscreen 추가
  ]
});

// 자동 전체 화면 (초기화 시) : 페이지 로딩 시 바로 전체 화면으로 시작하려면 callback을 사용
$('#summernote').summernote({
  callbacks: {
    onInit: function() {
      $(this).summernote('fullscreen.toggle');
    }
  }
});

// 전체 화면 적용시 기본 레이아웃 css 컨트롤을 위함
$(document).on('click', '.note-editor .note-toolbar .note-btn-group button.btn-fullscreen', function(e){ 
	var isFullscreen = $('#summernote').summernote('fullscreen.isFullscreen'); /* 전체화면 상태 체크 */
	//console.log('Is Fullscreen:', isFullscreen);
	
	if(isFullscreen == true) { // 전체화면 true 일때
		if( $('body').hasClass('summernote-fullscreen') === true ) {
			/* class 존재 */
		} else {
			$('body').addClass('summernote-fullscreen'); 
		}
	}
	if(isFullscreen == false) { // 전체화면 false 일때
		if( $('body').hasClass('summernote-fullscreen') === true ) {
			$('body').removeClass('summernote-fullscreen'); 
		} else {
			/* class X */
		}
	}
});

.note-editor.note-frame.fullscreen {z-index: 9999 !important; background-color: white !important; height: 100vh !important;}
.note-editor.note-frame.fullscreen .note-toolbar{}
.note-editor.note-frame.fullscreen .note-toolbar .note-btn-group{}
.note-editor.note-frame.fullscreen .note-toolbar .note-btn-group button.btn-fullscreen{}
.note-editor.note-frame.fullscreen .note-editable { overflow-y: scroll !important; }

/* 전체 화면 적용시 기본 레이아웃 css 컨트롤 아래는 자신에 맞게 알맞게 설정 */
body.summernote-fullscreen{} 
body.summernote-fullscreen #hd, 
body.summernote-fullscreen #hd_wrapper {display: none;}

네이티브 자바스크립트 Selection API 사용 블럭 지정된 텍스트 가져오기

최고관리자 — Sat, 14 Feb 2026 17:12:29 +0900

summernote 에디터에서 특정객체 hover시 tooltip 변경하기

최고관리자 — Fri, 30 Jan 2026 12:44:09 +0900

summernote 에디터에서 특정객체 hover시 tooltip 변경하기

// codeview 코드 보기 객체를 대상으로
$('.note-editor.note-frame .note-toolbar .note-btn-group.note-codeview button.note-btn.btn-codeview').hover(function(e){
	var $note_editor = $(this).closest('.note-editor.note-frame');
	if( $note_editor.hasClass('codeview') === true ) {
		var $note_tooltip = $note_editor.find('.note-tooltip.bottom.in');
		var $note_tooltip_content = $note_tooltip.find('.note-tooltip-content');
		$note_tooltip_content.html('코드 숨기기');
	} else {

	}
}, function(e) {

});

현재 브라우저의 로케일 가져오기

최고관리자 — Fri, 30 Jan 2026 12:36:20 +0900

navigator.language: 브라우저의 기본 언어/로케일 (예: "ko-KR", "en-US")
navigator.languages: 사용자가 설정한 선호 언어 목록 (배열 형태)

// 현재 브라우저의 로케일 가져오기

var userLocale = navigator.language || navigator.userLanguage;
console.log(userLocale); // 예: 'ko-KR'

summernote 에디터에서 CodeMirror 사용 및 CodeMirror 사용시 전체선텍, 초기화, 데이타삽입, 복사

최고관리자 — Thu, 29 Jan 2026 14:33:25 +0900

summernote 에디터에서 CodeMirror 사용

$('#summernote').summernote({
	codemirror: {
		mode: 'text/html',
		htmlMode: true,
		lineNumbers: true,
		heme: 'monokai'
	}
});

summernote 에디터에서 CodeMirror 사용시 전체선텍, 초기화, , 데이타삽입, 복사

// CodeMirror 인스턴스 가져오기
var cm = $note_editor.find('.note-codable').data('cmEditor');
if (cm) {
	cm.focus();
	cm.execCommand('selectAll'); // CodeMirror 전체 콘텐츠를 선택
}

// CodeMirror 인스턴스 가져오기
var cm = $note_editor.find('.note-codable').data('cmEditor');
if (cm) {
	cm.setValue('');// CodeMirror 데이터 초기화
}

// CodeMirror 인스턴스 가져오기
var cm = $note_editor.find('.note-codable').data('cmEditor');
if (cm) {
	cm.setValue('CodeMirror에 데이터 삽입');// CodeMirror에 데이터 삽입
}

// CodeMirror 인스턴스 가져오기
var cm = $note_editor.find('.note-codable').data('cmEditor');
if (cm) {
	var copyArea = $.trim( cm.getValue() ); // CodeMirror에 데이터확인
	navigator.clipboard.writeText(copyArea)
		.then(resultText => { 
			alert('데이터가 복사되었습니다.'); // Clipboard
			console.log('I copied the CodeMirror editor value tag. [Clipboard API] ');
		})
		.catch(err => { 
			console.log('Something went wrong', err); 
	}); 
}

querySelector 문법 (CSS 선택자)

최고관리자 — Thu, 29 Jan 2026 11:07:05 +0900

querySelector 문법 (CSS 선택자)

querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환한다.

일치하는 요소가 없으면 null을 반환한다.

지정한 선택자와 일치하는 모든 요소의 목록이 필요한 경우 querySelectorAll() 함수를 사용해야 한다.

기본적인 선택자

document.querySelector("#btn_prev"); 기본적인 선택자
document.querySelector(".btn_prev"); // class
document.querySelectorAll("button"); // 태그
document.querySelectorAll("[name]"); // name 속성이 있는 요소 모두
document.querySelectorAll("[value='1']") // value 속성이 1 인 요소 모두
document.querySelectorAll("#btn_prev, button")// ID가 'btn_prev' 인 요소와 Button 태그들을 선택
document.querySelectorAll("button#btn_prev");// button 태그이면서 아이디가 'btnPrev' 인 요소를 선택
document.querySelectorAll('input[type="checkbox"]');
document.querySelector("input[name=subject]")
document.querySelector("[name=stx]");
document.querySelector("meta[name='token']");

계층 선택자

document.querySelectorAll("div > input");// div 바로 밑에 있는 input 태그를 선택(바로 밑에 있는 자식들만)
document.querySelectorAll("div input");// div 태그 밑에 있는 input 태그를 선택

^ , $, *, ! 선택자

document.querySelectorAll("[value*='a']"); // * 어느곳에라도 있는지 : 'value'라는 속성의 값에 'a'라는 문자가 포함된 요소 선택
document.querySelector("[value^='a']");// ^ 시작 : 'value'라는 속성의 값이 'a'로 시작하는 요소 선택
document.querySelectorAll("[value$='e']"); // $ 끝 : 'value'라는 속성의 값이 'e'으로 끝나는 요소 선택
document.querySelectorAll("[value!='1']"); // ! 아닌 것 : 'value'라는 속성의 값이 '1'이 아닌 요소 선택

필터 선택자

document.querySelectorAll("div:even"); // 짝수번째 div태그만 선택
document.querySelectorAll("div:odd"); // 홀수번째 div태그만 선택
document.querySelectorAll("li:nth-child(2)"); // li 태그의 형제들중 2번째 요소만 요소만 선택
document.querySelectorAll("li:first");// 첫번째 li태그 요소만 선택
document.querySelectorAll("li:last");// 마지막 li태그 요소만 선택
document.querySelector("li:eq(2)"); // 3번째 li태그 선택
document.querySelectorAll("li:gt(2)"); // 3번째이후 li태그 선택
document.querySelectorAll("li:lt(2)"); // 3번째이전 li태그 선택

- selected, checked, disabled, enabled, focus : 요소 상태에 따른 필터

document.querySelectorAll("option:selected");// selected된 option만 선택
document.querySelectorAll("input[type='checkbox']:checked"); // checked된 checkbox만 선택
document.querySelectorAll("input:disabled"); // disabled된 input태그만 선택
document.querySelectorAll("input:enabled"); // enabled된 input태그만 선택
document.querySelectorAll("input:focus"); // focus된 input태그만 선택

- not(원치 않는 선택자) : 원치않는 선택자를 필터

document.querySelectorAll("input:not(:disabled)"); // input태그중 disabled되지 않은 요소만 선택
document.querySelectorAll("input:not(.frm_disabled)"); // input태그중 class .frm_disabled 되지 않은 요소만 선택

- has(포함된 선택자) : 포함된 선택자를 포함하고 있는 선택자를 필터

document.querySelectorAll("div:has(h1)"); // h1태그를 포함한 div태그만 선택

- contains(문자열) : 문자열을 포함한 선택자를 필터

document.querySelectorAll("p:contains('test')"); // 'test' 라는 텍스트를 포함한 p 태그를 선택

- hidden, visible : 숨겨진, 보이는 요소만 필터

document.querySelectorAll("div:hidden"); // 숨겨진 div태그를 선택
document.querySelectorAll("div:visible"); // 보이는 div태그를 선택

div 수평 스크롤 제어 scrollLeft

최고관리자 — Wed, 28 Jan 2026 17:08:45 +0900


	.content-wrapper{width:900px; margin:3px auto; padding:5px; border: 1px solid #ccc; overflow-x:auto; white-space:nowrap;}
.content-wrapper::-webkit-scrollbar { width: 20px; }
.content-wrapper::-webkit-scrollbar-track { background-color: gray; }
.content-wrapper::-webkit-scrollbar-thumb { background-color: skyblue; }
.content-wrapper::-webkit-scrollbar-button { display: none; }

.content-wrapper textarea{ width:1900px;height:300px;}
.btn_scroll_box{width: 300px; margin:3px auto; padding:5px;}