드럼치는 프로그래머

이번엔 좀 재밌는 이펙트관련 메소드를 살펴보자. 소개하는 메소드들은 예제페이지로 이동한후 개발자도구 콘솔을 열어서 입력하면서 테스트 해보면 된다. .hide() 엘리먼트를 숨긴다// $('div').css("display","none") 과 동일 $('div').hide() //천천히 사라지게 $('div').hide('slow',function(){ console.log('hide ok!') }); .show() 엘리먼트를 보여준다$('div').show() $('div').show('fast') .toggle() 엘리먼트 show(),hide() 를 toggle 처리$('div').toggle('fast') .fadeOut() 엘리먼트가 opacity값이 빠지면서 사라진다//모든 태그 사라짐 $('*..

jQuery의 Selector메소드, CSS메소드, Attribute메소드를 살펴봤다. jQuery 특징이 보이는가? 그럼 몇가지 특징을 찾아보자. (소개하는 예제들은 예제페이지로 이동한후 개발자도구 콘솔을 열어서 입력하면서 테스트 해보면 된다) 어떤 엘리먼트를 타겟으로 하는가?// 모든 div안에 text를 집어넣는다 $('div').html("text") // 모든 div가 아니라 $('div') 에서 가장 처음에 발견된 엘리먼트의 width를 구한다 $('div').width(); jQuery객체를 리턴하는가? 많은 메소드들이 jQuery 자기 자신을 리턴한다. 이렇게 되면 메소드체이닝이 가능하게 된다// bgcolor 를 변경하고 uix.kr 텍스트를 집어 넣어라! $('#box').css("ba..

웹개발에서 대부분의 자바스크립트의 작업이 DOM을 조작하는 일로 이루어진다. 문서의 특정 태그엘리먼트에 접근하여 이벤트를 주거나 class명을 변경, 내용을 채워넣는(innerHTML)일등을 하기위해선 그 특정 태그엘리먼트를 쉽게 찾을수 있어야 하는데 이때 사용 되어지는게 Selector 이다. jQuery에서 사용되는 Sizzle CSS Selector Engine은 현재 가장 빠른 속도를 자랑하기도 한다. 자주 사용하는 기본 셀렉터 태그 셀렉터$('div'); //모든 div 태그엘리먼트를 가지고 온다 id 셀렉터$('#daum'); // id="daum" 엘리먼트를 가지고 온다 class 셀렉터$('.bar'); // class="bar" 엘리먼트를 가지고 온다 Multiple 셀렉터$('div',..

ready() 메소드는 DOM이 모두 로드된후에 실행될 함수를 지정한다. 웹문서에서 자바스크립트의 개발은 DOM을 조작하는 경우가 많은데 이때 DOM이 로드가 되기전에 자바스크립트를 작성할경우 예상치 못한 버그나 에러를 발생할수 있다. 그래서 DOM 로드가 완료된후에 자바스크립트 코드를 작성하는 방식을 권장하고 이럴경우 차후에 마크업과 코드와의 분리도 수월할수 있다. 위 그림은 uix.kr이 로딩될때 네크워크 콘솔을 확인한 모습이다. 파란색 라인이 DomContentLoaded 가 발생한 시점인데 1.30초쯤에 발생한것을 확인할수 있다. onload 이벤트는 이미지를 포함한 모든 문서의 로딩이 끝난후에 발생하게 된다. jQuery에서 DomContentLoaded 이벤트핸들러의 작성은 아래코드 처럼 가능..

jQuery는 수많은 자바스크립트 라이브러리중에 현재 가장 많이 사용하는 프레임웍이다. jQuery홈페이지에서 말하고 있듯이 빠르고 간결하며 기존 자바스크립트와는 달리 작성하는 방식을 달리 할수 있도록 설계되었다(메소드체이닝). 당연히 프론트엔드개발을 하고있는 개발자들은 반드시 이해를 하고 있어야 하는 라이브러리이다. jQuery 삽입 자바스크립트 라이브러리들의 사용방법은 간단하다. 문서에 스크립트를 삽입해주면 되는데 jQuery도 동일하다. 다운로드 페이지에서 원하는 버전을 내려받아서 사용하던가 CDN이 적용된 주소를 그대로 사용해도 무방하다 jQuery 사용 jQuery를 삽입하면 jQuery() 함수가 만들어 지는데 축약형태로 $ 로 사용이 가능하다. jQuery홈페이지에서 브라우저에서 콘솔을 열어..

반응형 웹디자인은 웹브라우저의 가로폭에 따라 레이아웃이 변하고, 그에 따라 각 요소의 가로폭도 변합니다. 텍스트는 일반적으로 바뀐 폭에 맞추어 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다. 이미지 크기를 정하지 않은 경우 이미지의 크기를 정하지 않으면 부모 요소보다 큰 이미지는 부모 요소를 벗어나서 나타납니다. 이를 해결하는 방법은 max-width 속성을 부여하는 것입니다.img { max-width: 100%; } 최대 크기를 부모 요소의 크기로 제한하는 것입니다. 가로 세로 비율에 맞게 크기가 줄어듭니다. 이미지 크기를 attribute로 설정한 경우 이미지 크기가 attribute로 설정되어 있으면 max-widt..

[error] Mapped Statements collection does not contain value for ~ [ERROR MESSAGE] Mapped Statements collection does not contain value for ~ [CASE] 1. mapper id가 다른 경우 2. Parameter와 bean의 field명이 다른 경우 3. sql.xml에서 정의된 namespace와 DAO에서 호출하는 namespace가 다를 경우 4. mapper가 정의가 되어 있지 않거나 Spelling이 틀린 경우 5. mapper에 정의된 namespace 명칭이 같은 Application 내에 중복 될 경우 [출처] [error] Mapped Statements collection doe..

.bind() – 이벤트 연결 $(‘#click_btn’).bind(‘click’, function() { alert(‘OK’); }); .unbind() – 이벤트 해제 $(‘#click_btn’).bind(‘click’, function() { $(‘#click_btn’).unbind(‘click’); //click 이벤트를 해제(비활성)시킨다 }); .trigger() – 이벤트 자동 발생 $(‘#click_btn’).trigger(‘click’); //해당엘리먼트의 이벤트를 자동발생시킨다. [출처] http://hohoya33.tistory.com/entry/jQuery-–-bind-unbind-trigger

태그에 accept 라는 속성으로 사용자가 첨부하려는 파일을 특정지을 수 있다. 특정 확장자의 파일만 보이는 파일선택 다이얼로그 창 이미지 사용방법은 input 태그에 accept 속성만 주면되고. 속성의 값으로 사용 할 수 있는 방법은 특정 확장자를 지정하거나 미디어 타입을 지정하는 방법 또는 audio/*, video/*, image/* 형식의로 정의 할 수 있다. 파일 확장자로 지정하는 것은 .gif, .jpg, .png 와 같이 나열 하면 된다. 구분은 ,(콤마)로 하면된다. 1 audio/* 은 모든 오디오 파일을 보여준다. video/* 은 모든 비디오 파일을 보여준다. image/* 은 모든 이미지 파일을 보여준다. 오디오, 비디오, 이미지 파일의 범위는 사용자 PC의 설정에 따르는 듯 하다..

일반적으로 jquery를 사용하여 ajax를 처리하고자 하는 경우 그 파라미터를 get/post 의 파라미터로 전달된다. 이때의 컨텐츠 타입은 application/x-www-form-urlencoded 형태가 될 것이다. JSON 을 전송하고자 하는 경우 단계층 key=value , key=value 의 식에 1레벨의 경우는 별 문제가 없다. 그러나 다계층을 가지고 있는 경우는 문제의 소지가 있다. 물론 이런 다계층의 JSON데이터를 일련의 파라미터로 변환하는 룰이 있긴 있다. 특히 jquery ajax에는 이런게 잘 고려가 되어 있다. {"key1":"value1","key2":"value2","key3":[{"a":"a","b":"b"},{"a":"a","b":"b"},{"a":"a","b":"b"..