HTML5 custom data Attribute 의 사용 data 속성은 HTML5에서 추가된 HTML의 모든 TAG에서 사용이 가능한 글로벌 속성이다. data- 라는 단어 뒤에 사용할 키 값을 입력 하는 것으로 간단하게 사용이 가능하다. data-test-div tag 내에 사용 가능한 data 속성의 갯수 제한이 없다. 브라우져는 data 속성을 해석 하지 않고 건너 띄기 때문에 화면을 출력 하는데에 어떤 영향도 주지 않는다. 속성의 이름은 "data-"로 시작해야 하며, "data-"뒤에 하나 이상의 문자가 와야 한다. 속성 이름에는 공백값, "/", "=" 등 은 사용 할 수 없다. javascript 에서의 사용법은 아래와 같다. var item= document.getElementById(..
동적으로 생성된 DOM요소의 JQUERY 이벤트 제어. Jquery 의 event handler로 자주 사용되는 .on method 가 있다. 대부분의 jquery를 사용한 front-end 구성에서는 onclick 등 이벤트를 제어 하기 위하여 .on method를 주로 사용하게 된다. 보통은 아래와 같은 형태로 사용되곤 한다. $('#elementId').on('click', function(){ // 실행문 } 하지만 .ajax를 사용한 비동기 방식을 등을 통하여 동적으로 .html 이나 innerHTML 등으로 DOM이 생성 되었을 때 이벤트가 동작 하지 않는다. jquery의 API Document를 보면 .on( events [, selector ] [, data ], handler ) 위와 ..
Bootstrap4 를 사용한 Masonry 스타일 구현목표 : 핀터레스트 같은 그리드를 표현하기 위해 사용하던 masonry.js를 bootstrap4의 card-columns 을 이용하여 구현.Bootstrap4 문서를 보다가 flex를 이용하여 Masonry를 구현이 가능하다 라는 내용을 보고 실제로 테스트 해 보았음.기본 모양 자체는 Bootstrap4 document 를 사용하여 쉽게 구현이 가능 하다. Card 1 This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Card 2 Someone famous in Sou..
가우스를 사용 중 OnLastChar() 이벤트를 이용하여 다음 텍스트 영역으로 포커스를 이동시에 ctrl + V 버튼으로 붙여 넣기 하여 OnLastChar() 이벤트가 발동 된 경우 이동한 포커스의 텍스트 영역에도 붙여넣기 한 문자가 똑같이 입력이 되는 현상이 있다. 이럴 때는 function fncSetFocus(){ $("targetText").focus(); } 위와 같은 방법으로 해결이 가능하다.
css로 간단하게 하는방법 입니다.
.tr_table_fix_header { position: relative; top: expression(this.offsetParent.scrollTop); z-index: 20; } 번호 제목 작성자 1. 테이블 해더 스크롤 고정 한연석 스타일 속성 중 top: expression(this.offsetParent.scrollTop); 부분이 테이블 헤더를 고정 시켜주는 속성입니다. 자신의 offsetParent 객체를 지정하여 offsetParent 의 scrollTop 스크롤 수치 만큼 태그를 이동시킵니다. 속성 중 position: relative; 부분도 반드시 지정되어야 하는 부분입니다. 테이블 헤더를 이동 시키는 것을 약간 변경하면 Column에 대한 고정도 가능합니다. .td_table_f..
readonly = form에서 post 방식으로 값 전달 가능 object.readOnly = [ true | false ]; disabled = form에서 post 방식으로 값 전달 불가능 object.disabled = [ true | false ] ; contentEditable = form에서 post 방식으로 값 전달 가능 object.contentEditable = [ true | false ] ;