FlowerBombs

Grid => 격자 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 .item { border: 5px solid #3071A9; padding: 10px; background-color: #ccc; } 4:8 left right 데스크탑, 모바일: 8:4, 태블릿: 6:6, 핸드폰: 100% left right Colored by Color Scriptercs

float 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 Hello Bootstrap .parent { border: 5px solid #3071A9; padding: 10px; background-color: #ccc; } .child { width: 200px; height: 200px; border: 5px solid #DA4D1B; padding: 10px; background-color: #eee; } Twitter Bootstrap Float Example Colored by Color Scriptercs

123456789101112131415161718192021 이미지 사용하기 Colored by Color Scriptercs

정규표현식문자열의 형식을 검사하기 위한 정형화된 식.모든 프로그래밍 언어에서 공종적으로 사용한다. Javascript에서 정규표현식 사용 1234var regex = /정규표현식/;if ( !regex.text("검사할문자열")) { // ...정규표현식에 부합하지 않을 경우의 처리 ...}Colored by Color Scriptercs ㄴ 수업자료실 참조

입력 요소 값 가져오기값 설정하기 1$("셀렉터").val("내용");cs 값 읽어오기 text, select(드롭다운)1var input = $("셀렉터").val();cs 드롭다운요소의 경우 사용하지 않는 태그라 하더라도 value속성값을 부여해야 한다.1234 ---선택하세요 --- item 1Colored by Color Scriptercs 라디오 버튼의 경우셀렉터가 여러개를 의미하는 경우이므로 그 중에서 선택된 항목만 지정하는 셀렉터를 사용해야 한다. 라디오는 하나만 선택 가능하므로 가져온 결과 자체는 단일 값이다.1var input = $("셀렉터:checked").val();cs 체크박스의 경우.checked 가상클래스를 통해 가져온 대상이 배열 상태가 되므로 이를 반복문으로 처리해야 한다...

요소의 탐색 메서드 체인하나의 jQuery요소에 대하여 메서드를 연속적으로 호출하는 기법.특별한 경우가 아닌 이상 jQuery()의 함수들은 객체 사진을 리턴한다.1234$("#foo").attr(key, value) .css(key, value) .addClass(cls) .click(function() {});cs 주변 요소 탐색하기 함수 설명 prev() 이전 요소를 리턴한다 next() 다음 요소를 리턴한다. parent() 상위 요소를 리턴한다. children() 하위 요소(들)을 리턴한다. eq(n) n번째 요소를 리턴한다. 부모 요소 얻기주어진 셀렉터를 갖는 가장 인접한 부모 요소를 리턴한다.1$("#foo").parents("셀렉터");cs 자식 요소 얻기주어진 셀렉터를 갖는 가장 인접한..

HTML 요소의 CSS 속성 제어특정 요소에 적용되어 있는 속성값 조회하기1var foo = $("#bar").css('속성이름');cs 특정 요소의 적용하기 개별적용 1$(".btn").css('속성이름', '값');cs 일괄적용(json형태 사용)123456$("#bar").css({ 속성이름: '값', 속성이름: '값', 속성이름: '값' ... });cscss 속성이름에 "-"가 있을 경우 속성이름을 반드시 따옴표 처리해야 함. HTML 요소의 CSS클래스 제어 CSS 클래스 적용여부 검사1var foo = $("#bar").hasClass('클래스이름'); // true, false 리턴cs CSS 클래스 적용1$("#bar").addClass('클래스이름 클래스 이름... ');cs두 개 이상..

요소의 판별index() 함수특정 요소가 부모 태그 안에서 갖는 인덱스번호를 리턴하는 함수(0부터 시작함) ... // 부모 를 기준으로 2번째 요소이므로 인덱스 1이 리턴된다. var idx = $("#hello").index(); $(this)복수 요소에 대한 이벤트에 전달된 콜백함수 안에서 이벤트가 발생한 주체를 의미하는 객체 button1 button1 button1 // `btn`이라는 클래스를 갖는 모든 요소에 대해서 일괄적으로 적용되는 이벤트 $(',btn').click(function() { // 버튼은 한번에 하나씩만 누를 수 있다. // 이 안에서 $(this)는 클릭된 주체를 의미한다. } HTML 요소의 속성제어특정 요소에 적용되어 있는 속성값 조회하기1var foo = $("#ba..