'Web' 카테고리의 글 목록 (3 Page)

jQuery 메소드 정리

2013. 12. 10. 13:19

jQuery 속성선택자

요소[속성]	특정 속성을 가지고 있는 문서 객체를 선택함
요소[속성=값]	속성 안의 값이 특정 값과 같은 문서 객체를 선택함
요소[속성~=값]	속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택함
요소[속성^=값]	속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택함
요소[속성$=값]	속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택함
요소[속성*=값]	속성 안의 값이 특정 값을 포함하는 문서 객체를 선택함

사용 예)

$('input[type=text]').val("텍스트 값추가");

1. jQuery 기본 필터 선택자

요소:odd	홀수 번째에 위치한 문서 객체르 선택함
요소:even	짝수 번째에 위치한 문서 객체를 선택함
요소:first	첫 번째 위치한 문서 객체를 선택함
요소:last	마지막에 위치한 문서 객체를 선택함

사용 예)

과일명	당도
사과	2
딸기	3
수박	4
멜론	2

$('tr:odd').css('background', '#F9F9F9');

$('tr:event').css('background', '#9F9F9F');

$('tr:first').css('background', '#333333').css('color','#FFFFFF'); // 배경색 / 글자색

2. jQuery 입력 양식 필터 선택자

요소:button	input 태그중 type 속성이 button인 문서 객체와 button 태그를 선택함
요소:checkbox	input 태그중 type 속성이 check인 문서 객체를 선택
요소:file	input 태그중 type 속성이 file인 문서 객체를 선택
요소:image	input 태그중 type 속성이 image인 문서 객체를 선택
요소:password	input 태그중 type 속성이 password인 문서 객체를 선택
요소:radio	input 태그중 type 속성이 radio인 문서 객체를 선택
요소:reset	input 태그중 type 속성이 reset인 문서 객체를 선택
요소:submit	input 태그중 type 속성이 submit인 문서 객체를 선택
요소:text	input 태그중 type 속성이 text인 문서 객체를 선택
요소:checked	체크된 입력 양식을 선택함
요소:disabled	비활성화된 입력 양식을 선택함
요소:enabled	활성화된 입력 양식을 선택함
요소:focus	초점이 맞춰져 있는 입력 양식을 선택함
요소:input	모든 입력 양식을 선택함(input , textarea , select , button 태그)
요소:selected	option 객체 중 선택된 태그를 선택함

사용 예) $("부모태그">"자식태그")

$('select > option:selected').val(); // select 로 선택된 값이 찾기

3. jQuery 함수 필터 선택자

요소:contains(문자열)	특정 문자열을 포함하는 문서 객체를 선택함
요소:eq(n)	n번째에 위치하는 문서 객체를 선택함
요소:gt(n)	n번째 초과에 위치하는 문서 객체를 선택함
요소:has(h1)	h1 태그를 가지고 있는 문서 객체를 선택
요소:lt(n)	n번째 미만에 위치하는 문서 객체를 선택
요소:not(선택자)	선택자와 일찌하지 않는 문서 객체를 선택함
요소:nth-child(3n+1)	3n+1번째에 위치하는 문서 책체를 선택함

사용 예)

과일명	당도
사과	2
딸기	3
수박	4
멜론	2

$('tr:eq(0)').css('background', '#000000').css('color', 'White');

$('td:nth-child(3n)').css('background', '#454545');

$('td:nth-child(3n+1)').css('background', '#333333').css('color','#FFFFFF'); // 배경색 / 글자색

jQuery 배열

$.each(array ,

function(index,item){ }) ;

(배열 , 함수(배열인덱스, 배열 인덱스 값))

// 함수를 배열겟수만큼 반복실행

$(selector).each(array ,

function(index,item){ }) ;

선택한 속성.each(배열 , 함수(배열인덱스, 배열 인덱스 값))

// 함수를 배열겟수만큼 반복실행

jQuery 메서드 (문서 객체 다루기)

addClass()	문서 객체의 클래스 속성을 추가 함. => $('선택').addClass('정의한 클래스이름');
removeClass()	문서 객체의 클래스 속성을 제거 함. => $('선택').removeClass ('삭제할 클래스이름');
arrt()	속성과 관련되 모든 기능을 수행함. 1. 이미지태그의 경로 속성값 알아내기 => $('img').attr('src'); 2. 속성 값추가 => $(selector).attr(속성이름 , 속성값); => $(selector).attr(속성이름 , function( 속성각각의 index값 ,attr ){} ); => $(selector).attr(object); => $('').attr('src', 'image.jpg').appendTo('body'); // body 에 img태스생성 => $('' , {src:''image.jpg, width:350, height:250}).appendTo('body');
removeAttr(name)	문서 객체의 속성을 제거 함. => $('h1').removeAttr('data-index') // h1태그의 data-index 속성제거
css()	스타일과 관련된 모든 기능 수행 1. 스타일 속성값 가져오기 => $('h1').css('color') // h1 태그의 색상값 2. 속성 값 추가 => $(selector).css(name , value); => $(selector).css(name , function(속성 각각의 index값 ,style){} ); => $(selector).css(object);
html()	문서 객체 내부의 글자와 관련된 모든 기능을 수행함 (html 태그인식) 1. 값 가져오기 => $('h1').html(); // 맨처음 h1 태그 값만 출력 2. 값 추가 => $(selector).html(value); => $('div').html(' 내용 '); // 태그인식
text()	문서 객체 내부의 글자와 관련된 모든 기능을 수행함 1. 값 가져오기 => $('h1').text(); // 모든 h1태그 값을 출력 2. 값 추가 => $(selector). text (value); => $('div'). text (' 내용 '); // 정규표현식 으로 표현
remove()	특정 문서 객체를 제거. => $('h1').first().remove(); // 첫번쩨 h1 삭제
empty()	특정 문서 객체의 후손을 모두 제거 함. => $('div').empty(); // div 자식 객체까지 삭제
$()	문서 객체를 생성함 => $(' '); => $(' ').html('내용'); => $(' ').html('내용').addendTo('body'); // 태그와 내용을 body 에추가
$(a).appendTo(b)	a를 b의 뒷 부분에 추가함. (태그안) => $('img').first().appendTo('body'); // 첫번째이미지를 body 안 맨뒤로 보냄
$(a).prependTo(b)	a를 b의 앞 부분에 추가함. (태그안)
$(a).insertAfter(b)	a를 b의 뒷에 추가함. (태그 밖)
$(a).insertBefore(b)	a를 b의 앞에 추가함. (태그 밖)
$(a).append(b)	b를 a안의 뒷 부분에 추가함.
$(a).prepend (b)	b를 a안의 앞 부분에 추가함.
$(a).after(b)	b를 a의 뒷에 추가함.
$(a).before(b)	b를 a의 앞에 추가함.
clone()	문서 객체를 복사 $('div').append( $(h1) ).clone()); // h1 태그를 div 태그안으로 복재

jQuery 이벤트

이벤트 객체속성

event.pageX	브라우저의 화면을 기준으로 한 마우스의 X좌표 위치
event.pageY	브라우저의 화면을 기중으로 한 마우스의 Y좌표 위치
event.preventDefault()	기본 이벤트를 제거함
event.stopPropagation()	이벤트 전달을 제거함

이벤트 메소드

$(document).ready()	html 문서가 다불러와지면 실행
bind()	이벤트를 연결함 => $(selector).bind(eventName, function(event){} ); => $(selector).bind(object);
unbind()	bind() 메서드를 사용한 이벤트 연결 제거 => $(selector).unbind(); => $(selector).unbind(eventName); => $(selector).unbind(eventName, function);
delegate()	현재 또는 미래에 존재하는 문서 객체에 이벤트를 연경함 (version:1.4.3*)
undelegate()	delegate() 메서드를 사용해 연결한 이벤트를 제거함 (version:1.4.3*)
live()	현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결함
die()	live() 메서드를 사용해 연결한 이벤트를 제거함 => $(selector).die() => $(selector).die(eventName) => $(selector).die(eventName , function)
one()	이벤트를 한번만 연결함
on()	이벤트를 연결함, 아래 이벤트열결을 대체함 ( delegate 대체함 version:1.7 ) => bind() : $(selector).on(eventName , eventHandler) => live() : $(document).on(eventName , selector, eventHandler) => delegate() : $(selector).on(eventName , selector , eventHandler)
off()	이벤트를 제거함 => unbind() : $(selector).off(eventName[, eventHandler]) => die() : $(document).off(eventName , selector[, eventHandler]) => undelegate() : $(selector).off(eventName , selector[, eventHandler])
toggle(function(event){}, ... , function(event){} )	click 이벤트를 여러 이벤트 핸들러를 번갈아가며 실행할 수있게 연결함
hover(mouseenter , mouseleave)	mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결함
trigger()	이벤트를 강제 발생 => $(selector).trigger(eventName) => $(selector).trigger(eventName, data)

마우스 이벤트

click	마우스를 클릭할 때 발생함.
dblclick	마우스를 더블클릭할 때 발생함.
mousedown	마우스 버튼을 누를 때 발생함.
mouseup	마우스 버튼을 뗄 때 발생함.
mouseenter	마우스 요소의 경계 외부에서 내부로 이동할 때 발생. (자기자신만 이벤트)
mouseleave	마우스 요소의 경계 내부에서 외부로 이동할 때 발생. (자기자신만 이벤트)
mousemove	마우스를 움직일 때 발생함.
mouseout	마우스가 요소를 벗어날 때 발생함. (버블링)
mouseover	마우스를 요소 안에 들어올 때 발생함.(버블링)

키보드 이벤트

keydown	키보드가 눌러질 때 발생함.
keypress	글자가 입력될 때 발생함.
keyup	키보드가 떼어질 때 발생함.

윈도우 이벤트

ready	문서 객체가 준비를 완료함.
load	윈도우(문서 객체)를 불러들일 때 발생함.
unload	윈도우(문서 객체)를 닫을 때 발생함.
resize	윈도우의 크기를 변화시킬 때 발생함.
scroll	윈도우를 스크롤할 때 발생함. => $(window).scroll(function(){ });
error	에러가 있을 때 발생함.

입력 양식 이벤트

change	입력 양식의 내용을 변경할 때 발생함.
focus	입력 양식에 초점을 맞추면 발생함.
focunsin	입력 양식에 초점이 맞춰지기 바로 전에 발생함.
focusout	입력 양식에 초점이 사라지기 바로 전에 발생함.
blur	입력 양식에 초점이 사라지면 발생함.
select	입력 양식을 선택할 때 발생함(input[type=text] 태그와 textarea 태그 제외).
submit	submit 버튼을 누르면 발생함.
reset	reset 버튼을 누르면 발생함.

간단한 이벤트 종류

blur	focus	focusin	focusout	load
resize	scroll	unload	click	dblclick
mousedown	mouseup	mousemove	mouseover	mouseout
mouseenter	mouseleave	change	select	submit
keydown	keypress	keyup	error	ready

$(select).methodName(function(event){ });

jQuery effects

메서드

show()	문서 객체를 크게 하며 보여줌.
hide()	문서 객체를 작게 하며 사라지게 함.
toggle()	show() 메서드와 hide() 메서드를 번갈아 실행함.
slideDown()	문서 객체를 슬라이드 효과와 함께 보여줌.
slideUp()	문서 객체를 슬라이드 효과와 함께 사라지게 함.
slideToggle()	slideDown() 메서드와 slideUp() 메서드를 번갈아 실행함.
fadeln()	문서 객체를 선명하게 하며 보여줌.
fadeout()	문서 객체를 흐리게 하며 사라지게 함.
fadeToggle()	fadeln() 메서드와 fadeOut() 메서드를 번갈아 실행함.
animate()	사용자 지정 효과를 생성함. ( opacity , height , width , top , bottom , left , right , margin , padding ) => $(selector).animate(object); => $(selector).animate(object , speed); => $(selector).animate(object , speed , easing); => $(selector).animate(object , speed , easing , callback);
clearQueue()	큐의 내용을 제거 함.
stop()	효과와 애니메이션을 정지함. => $(selector).stop() => $(selector).stop(clearQueue) => $(selector).stop(clearQueue , goToEnd)
delay()	큐에 있는 명령을 잠시 중지함. => $(this).delay(500).animate({ left:500 }, 'slow' )

1. $(selector).method();

2. $(selector).method(speed); // 밀리초 단위의 숫자나 문자열 ( slow, normal , fast )

3. $(selector).method(speed , callback); // callback 효과를 모두 완료한 후에 실행할 함수를 지정

4. $(selector).method(speed , easing , callback);// 기본(linear , swing ) , easing플러그인 설치.

출처 : http://turfrain.tistory.com/40 작성자 : turfrain

저작자표시 비영리 동일조건

jsp에서 자주 쓰는 태그들

2013. 12. 10. 13:14

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

저작자표시 비영리 동일조건

이미지 회전

2013. 12. 10. 13:13

jQueryRotate.2.2.js

jQueryRotateCompressed.2.2.js

http://code.google.com/p/jqueryrotate/wiki/Examples

저작자표시 비영리 동일조건

톰캣에 인증서 연동 방법(eclipse)

2013. 12. 10. 13:12

-키 생성

keytool -genkey -alias 키이름 -keyalg RSA -keystore

-키 삭제

keytool -delete -alias 키이름 -storetype JCEKS -keystore(또는 생성된 위치 .keystore파일삭제)

-키 리스트 확인

keytool -list -v -keystore -storepass 입력비밀번호 -storetype JCEKS

톰캣 설정 방법(6.0)

<Connector connectionTimeout="20000" port="80" protocol="HTTP/1.1" redirectPort="8443"/>

하단에

<Connector SSLEnabled="true" clientAuth="false" keystoreFile="키스토어생성위치(예:C:\Users\admin\.keystore)" keystorePass="비밀번호" maxThreads="200" port="8443" scheme="https" secure="true" sslProtocol="TLS"/>

추가

저작자표시 비영리 동일조건

스프링과 스트럿츠의 차이

2013. 12. 10. 13:09

스트럿츠와 스프링 프레임워크의 가장 큰 차이점은 스트럿츠는 웹에 특화된 프레임워크라는 것입니다.

스트럿츠 프레임워크의 전반적 흐름은 웹 브라우저 사용자가 요청을 하면 서블릿에서 해당 요청을 받으면 structs.xml 설정에 따라 알맞은 액션으로 연결시킵니다 이과정에서 인터셉터(보안, 파일업로드..., 등) 에서 요청을 처리한 후 액션에 넘겨지게 됩니다. 액션에서 비즈니스 로직을 수행한 후 수행한 결과를 request객체에 담고 리턴된 포워드로 jsp를 연결하게 됩니다.

이런 일련의 과정들은 HTTP 요청방식에 대한 전반적인 처리를 다룬 다는 것입니다. 즉 웹 환경에만 특화된 것입니다.

반면, 스프링 프레임워크는 웹어플리케이션 뿐만 아니라 자바 어플리케이션에도 특화된 프레임워크입니다. 기본적으로 컨테이너라는 것을 제공하는데 이 컨테이너는 빈의 생성과 소멸등 일련의 라이프 사이크을 관리하게 됩니다. 환경설정도 스트럿츠 방식처럼 xml로 설정하는 방식뿐만이 아닌 자바 기반의 어노테이션을 활용하여 자바 빈들을 등록하실 수 있습니다.

이렇게 등록된 자바 빈은 웹 시스템 뿐만 아닌 어플리케이션에서도 활용 할 수 있습니다.

스프링은 MVC환경에 특화된 서블릿이나 컨트롤러 , 뷰리졸버 등을 제공하는 데, 사실상 이러한 것은 웹 환경을 지원하기 위해 제공하는 것입니다. 실질적으로 비즈니스 로직을 실행하는 Service나 Repository같이 자바빈으로 등록된 것 들은 웹 환경이 아닌 어디에서도 사용 가능합니다. 즉, 외부인터페이스에 확장까지 고려한 프레임워크라고 보시면 될 것 같습니다.

저작자표시 비영리 동일조건

Animate 사용하기

2013. 12. 2. 11:31

$(#id).animate({top:20}, 1000, null, baloonDown);

$(엘리먼트).animate({property},duration,easing,callback);

property : 에니메이션의 마지막에 도달해야 하는 값을 명시
css에서 지원하는 값을 허용한다.

duration: 1/1000초 단위로 기술 또는 slow,fast등으로 기술

easing : 선택사항을 미묘하게 바꾸는 함수이름
플러그인 형태로 제공된다.
기본으로는 linear / swing 두 함수를 제공

callback : 에니메이션이 완료된 뒤 호출되는 함수이름

[출처] jQuery 에니메이션|작성자 냥꼬

저작자표시 비영리 동일조건

Spring Properties Message 사용하기

2012. 10. 30. 11:01

[spring-application.xml]

...
<bean id="messageSource" class="org.springframework.context.support.ResourceBundleMessageSource">
<property name="basenames" value="cms/messages" />  
</bean>
<bean id="messageSourceAccessor" class="org.springframework.context.support.MessageSourceAccessor">
<constructor-arg ref="messageSource"/>
</bean>
<bean id="message" class="cms.util.CmsMessage">
<property name="messageSourceAccessor" ref="messageSourceAccessor"/>
</bean>
...

[CmsMessage.java]

package cms.util;

import java.util.Locale;

import org.springframework.context.support.MessageSourceAccessor;

/**
* Message
* @author J.H.Kim
*/
public class CmsMessage {

/**
* MessageSourceAccessor
*/
private static MessageSourceAccessor msAcc = null;

public void setMessageSourceAccessor(MessageSourceAccessor msAcc) {
CmsMessage.msAcc = msAcc;
}

/**
* KEY에 해당하는 메세지 반환
* @param key
* @return
*/
public static String getMessage(String key) {
return msAcc.getMessage(key, Locale.getDefault());
}

/**
* KEY에 해당하는 메세지 반환
* @param key
* @param objs
* @return
*/
public static String getMessage(String key, Object[] objs) {
return msAcc.getMessage(key, objs, Locale.getDefault());
}
}

[message.properties]

test={0}입니다.
test1=테스트~

사용

CmsMessage.getMessage("test", new String[]{"메시지 테스트"});
CmsMessage.getMessage("test1");

결과
메시지 테스트입니다.
테스트~

TAG사용

<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
...
<spring:message code='test' arguments='메시지테스트' var="testMessage"/>
<spring:message code='test1' var="testMessage1"/>
...
${testMessage}
${testMessage1}
...

결과
메시지 테스트입니다.
테스트~

[출처] Spring Properties Message 사용하기|작성자 듀스포에

저작자표시 비영리 동일조건

input태그 text타잎에만 CSS 설정

2012. 6. 15. 15:19

INPUT[type=text]{
  font-size: 8pt;
  font-family:"돋움";
  border:0px;
  text-align:center;

} //ie

INPUT{
  border: expression( (this.type=='text')?'0px':'' );
  text-align:center;
  font-size: 8pt;
  font-family:"돋움";
} //기타

저작자표시 비영리 동일조건

오라클 decode 기능 예시

2012. 6. 14. 17:05

select count(decode(to_char(hiredate,'mm'), '01', 1)) "1월",
       count(decode(to_char(hiredate,'mm'), '02', 1)) "2월",
       count(decode(to_char(hiredate,'mm'), '03', 1)) "3월",
       count(decode(to_char(hiredate,'mm'), '04', 1)) "4월",
       count(decode(to_char(hiredate,'mm'), '05', 1)) "5월",
       count(decode(to_char(hiredate,'mm'), '06', 1)) "6월",
       count(decode(to_char(hiredate,'mm'), '07', 1)) "7월",
       count(decode(to_char(hiredate,'mm'), '08', 1)) "8월",
       count(decode(to_char(hiredate,'mm'), '09', 1)) "9월",
       count(decode(to_char(hiredate,'mm'), '10', 1)) "10월",
       count(decode(to_char(hiredate,'mm'), '11', 1)) "11월",
       count(decode(to_char(hiredate,'mm'), '12', 1)) "12월",
       count(*) "전체"
from emp
where to_char(hiredate,'mm') >= '01' and
      to_char(hiredate,'mm') <= '12';

DECODE 함수 사용 방법

decode(검색컬럼, 조건1, 결과값1,..., 기본값)

[출처] 오라클 Decode 예제|작성자 흑향

저작자표시 비영리 동일조건

PREV 1 2 3 4 5 6 ···8 NEXT

+ Recent posts

Web

특수문자 태그 2013.12.10
jQuery 메소드 정리 2013.12.10
jsp에서 자주 쓰는 태그들 2013.12.10
이미지 회전 2013.12.10
톰캣에 인증서 연동 방법(eclipse) 2013.12.10
스프링과 스트럿츠의 차이 2013.12.10
Animate 사용하기 2013.12.02
Spring Properties Message 사용하기 2012.10.30
input태그 text타잎에만 CSS 설정 2012.06.15
오라클 decode 기능 예시 2012.06.14

특수문자	코드	특수문자	코드	특수문자	코드
<	<	？		>	>
&	&	†		"	"
공백		？		™	™
!	!	¡	¡	§	§
"	'	？	¢	æ	æ
*	*	¤	¤	¿	¿
=	=	？	¥	×	×

진리 블로그

특수문자 태그

jQuery 메소드 정리

내용

내용

jsp에서 자주 쓰는 태그들

이미지 회전

톰캣에 인증서 연동 방법(eclipse)

스프링과 스트럿츠의 차이

Animate 사용하기

Spring Properties Message 사용하기

input태그 text타잎에만 CSS 설정

오라클 decode 기능 예시

+ Recent posts

Web

티스토리툴바