jQuery(제이쿼리) 강좌와 예제모음

왜 제이쿼리(jQuery)를 해야하는가?

전체 기초강좌 만들어보기 초급예제 중급예제 그렇군 대기중 jQuryUI 예제
등록일 :

왜 해야 할까요?

공사현장을 가정해 봅시다. 땅을 파야 합니다. 매일 매일 삽으로 열심히 땅을 파고 있었습니다. 그런데 어느날 포크레인 이라는 장비가 들어왔습니다. 하지만 포크레인 운전법을 몰라서 그냥 다시 열심히 삽질을 합니다. 포크레인 운전법이 만만치 않습니다. 숙련도도 요구 되지요. 하지만 운전법을 배우고 익힌다면 신세계가 열리게 됩니다. (단순한 비교입니다)

자바스크립트 세계에 제이쿼리는 그런 존재입니다. 물론 제이쿼리 말고 다른 녀석들도 있지만 현재 대세(!)는 제이쿼리 입니다.

개인적으론 일단 배워서 몸이 편해지는게 목표라고 생각합니다. 뭐 그 다음이 작업의 효율성 편의성 아닐까요? 일단 내가 편해야죠. ^^;; (아닐거 같죠?)

아무튼 !! 자바스크립트를 해야 한다면 꼭 배워 두시면 좋습니다. 그리고 이제는 해야하는 상황이 되었죠. 선택이 아닌겁니다. ㅠㅠ

매일 매일이 헬로월드인 세상에서 살아가는 모든 분들 힘내십시오 !!

중요!! 추가된 글 -

윗 글 작성 당시와 현재는 많이 달라졌습니다. ㅠㅠ

개발에도 트렌드가 있고 새로운 기술들이 계속나옵니다. 제이쿼리도 이제 이 트렌드에서는 내려오는 중입니다. 그리고 굉장히 오랫동안 업데이트 되지 않고있습니다.

제이쿼리가 처음 나왔던 시절에는 IE8 이 현역이던 시절로 자바스크립트 개발에 많은 애로사항이 꽃피던 시절이었고 이때 제이쿼리 같은 프레임웍이 한줄기 희망이 되었습니다. 이제 브라우저들도 많이 발전했고 개발의 트렌드도 바뀌어 제이쿼리 사용이 예전같지 않습니다.

하지만 여전히 제이쿼리는 많은 점유율을 보이고 있습니다. 그래도 좀 더 제이쿼리와 함께해 보겠습니다. ^^*

제이쿼리 테크트리

제이쿼리를 몰랐을 때 (항상 번거로움)

알게 되었을 때 (호오?)

현실 : 그래도 퇴근시간은 그대로다 ㅠㅠ (야근(젠장))

그래도 몸은 좀 편해져요

힘내세용 (화이팅)

일해라 인간! (로또1등 절실함)

※ 위 내용은 사실과 다를 수 있습니다.
※ 일을 빨리 처리하면 업무량이 증가할 수 있습니다. (부작용)
※ 왜 슬프지 ... 아닐거 같죠?

글 마무리 예제 : 멘붕하는 그대들

마무리는 제이쿼리로 만든 간단한 예제로 해보겠습니다.
다음회 부터는 강좌 시작입니다. ^^

이 예제는
- 제이쿼리 애니메이션 효과 사용.
- 요소 동적 추가 기법
- CSS 활용
아래 얼굴들을 눌러보세요.

CSS

.bro {
	text-align:center;
}
.bro img {
	cursor:pointer;
	width:120px;
}
.bro .new { /* 새로 추가되는 이미지 */
	position:absolute;
}
.bro .ment { /* 멘트 출력 */
	margin-top:15px;
	font-size:15pt !important;
	display:none;
}

HTML

<div class="bro">
	아래 얼굴들을 눌러보세요.<br><br>
	<img src="//biketago.com/img/etc/huk1.gif" onclick="gogo(this, '사이트 오픈전 메뉴명이 바뀌었다. 뭐? 도랏!!?')" />
	<img src="//biketago.com/img/etc/huk1.gif" onclick="gogo(this, '즐거운 금요일 저녁 전격 회식 결정 !!')" />
	<img src="//biketago.com/img/etc/huk1.gif" onclick="gogo(this, 'UPDATE 구문에 WHERE 를 빼먹었다 !!')" />
	<img src="//biketago.com/img/etc/huk1.gif" onclick="gogo(this, '주8일제 근무를 하고있다 !!')" />
	<img src="//biketago.com/img/etc/huk1.gif" onclick="gogo(this, '칼출근은 필수면서 칼퇴근은 불가하다.')" />
</div>

자바스크립트

function gogo(el, ment){

	// 클릭한 얼굴 이미지의 위치정보 얻기
	var pos = $(el).offset();

	// 새로운 이미지 하나 추가
	var new_bro = $('<img class="new" src="//biketago.com/img/etc/huk2.gif">').appendTo('.bro');

	// 멘트가 나오는 div 추가후 페이드인 효과
	var ment = $('<div class="ment">' + ment + '</div>').appendTo('.bro').fadeIn();


	// ※ 아래는 설명을 위해 여러줄로 코딩했습니다.

	// 새롭게 추가된 이미지(new_bro)를 대상으로 합니다.
	new_bro

	// new_bro 의 위치를 클릭한 이미지와 같은 위치로 설정
	.css({ top : pos.top, left : pos.left })

	// 현재위치에서 2초동안 위로 300px 애니메이션 그리고 투명하게
	.animate({ top : '-=300', opacity : 0 }, 2000,
		// 애니메이션 종료후 실행되는 부분
		function(){
			// new_bro 제거
			new_bro.remove();

			// 멘트 0.1초 동안 slideUp 효과 (감추기)
			ment.slideUp(100,
				// 멘트가 감춰지면 제거하기
				function(){ ment.remove() }
			);
		}
	);

	// 요약 : 클릭한 위치에 이미지를 생성하고 위로 애니메이션 하고
	// 아래에는 멘트를 보여줍니다.
	// 애니메이션이 끝나면 멘트를 제거합니다.
	// 동적생성이므로 클릭할때마다 계속 생성이 됩니다.

	// 움직임이 끝난 얼굴 그림과 멘트는 제거해서 쌓이지 않도록 처리합니다.
	// 필요가 없어지면 없애주는게 좋습니다.

}

간단해 보이는 예제지만 CSS, html, 자바스크립트(요소 동적 생성)
같은 기초 지식이 있어야 하는 예제입니다.
지금 시작이라면 막막하실 수 있겠지만. 걱정하지는 마세요~

실행 가능한 소스

재밌게 글 보고갑니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

댓글 감사드립니다. ^^ 더 많은 예제를 부지런히 올려볼게요 ㅠㅠ

이제 막 제이쿼리 배우는 학생인데, 정말 유용한 포스트라 즐겨찾기 했어요~ 감사합니다

즐겨찾기 까지 ... ㅠㅠ 감사드립니다 !!
지금 강좌나 예제가 좀 부족한데 .. 꾸준히 올려보겠습니다.

너무너무 재밌네요 ㅋㅋㅋㅋㅋ

댓글 쓰기

이름 : 패스워드 :