Easy for anyone.

문제 버튼이나 링크를 클릭해서 폰트의 크기를 변경하고 싶다. (대부분의 뉴스 사이트에서 구현되어 있는 기능) 해결 jQuery를 통해 현재의 폰트 사이즈를 알아낸 다음 그 수치에 버튼을 클릭할때마다 +1 이나 -1 을 해줌으로써 폰트 사이즈를 변경합니다. 토의 위 그림 1-1 에서 볼수 있듯이 크게, 작게 링크를 클릭하게 되면 현재 폰트 사이즈에서 +1이나 -1을 해줍니다. 예제 소스는 아래와 같습니다. 폰트 사이즈 바꾸기 - 웹눈의 웹이야기 < script type="text..

우리가 선택하고자 하는것이 무엇이든지, jQuery 는 달러 사인으로 된 함수: $() 로 시작을 하게 됩니다. $() 함수는 일반적으로 html 태그와 ID , Class 속성값과 함께 사용됩니다. 표1. CSS와 jQuery 의 선택자 비교문 Selector CSS jQuery 설명 ID #ID_Name $('#ID_Name') ID값이 'ID_Name' 을 가지는 하나의 엘리먼트를 선택합니다. Class .Class_Name $('.Class_Name') Class 속성값이 'Class_Name' 값을 가지는 모든 엘리먼트를 선택합니다. Tag P $('P') 모든 P 태그를 선택합니다. 여기서 주목할만한 점은 Class Selector와 Tag Selector는 해당하는 엘리먼트를 하나만 선택하는..

# 기본 셀렉터 * : 모든 엘리먼트와 일치 E : 태그명이 E인 모든 엘리먼트와 일치 E F : E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치 E>F : E의 바로 아래 자식이면서 태그명이 F인 모든 엘러먼트와 일치 E+F : E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치 E~F : E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치 E:has(F) : 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치 E.C : 클래스명 C를 가지는 모든 엘리먼트 E와 일치, E의 생각은 *.C와 동일함 E#I : 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함 E[A] : 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치 E[A=V] : 값이 V인 ..

이제 슬슬 서버사이드 언어인 PHP 와 jQuery 를 함께 사용하는 예제를 다루어 보도록 하겠습니다. 이번 강좌에서는 Select 필드의 항목이 변경되면 다른 필드가 동적으로 변경되는것을 해보도록 하겠습니다. 이 예제는, 여러 사이트의 회원가입 양식에서 보셨을텐데요. 예로, 내가 해당하는 국가를 선택하면 그에 따른 도시명들이 나열되는 select 필드가 동적으로 생성되는 예제입니다. 1. 먼저, Client Language 를 살펴보고, (jQuery 와 Html) 2. Server-side code 를 살펴본다음, 3. 코드에 대한 설명을 하도록 하겠습니다. 1. jQuery & html Code < ..

이번 시간에는 카테고리 별로 내용물을 분류해보도록 하겠습니다. (jQuery가 처음이신 분들은 강좌1부터 보시는걸 권장합니다. ) 우리가 무엇을 할것인지 보도록 하지요. 아래 예제를 참고해주세요. 카테고리 전체기사 경제/금융 사회 연예 스포츠 뉴스 목록 경제뉴스 1 스포츠뉴스 1 사회뉴스 1 경제뉴스 2 연예뉴스 스포츠뉴스 2 경제뉴스 3 사회뉴스 2 경제뉴스 4 스포츠 뉴스3 연예/스포츠 뉴스 경제뉴스 6 사회뉴스 3 사회/경제뉴스 위 예제처럼 카테고리를 클릭하면 리스트들이 각 분류에 맞게 정렬되는 것을 해볼것입니다. 어렵지 않아요. 1. 마크업 구조 보기 카테고리 전체기사 경제/금융 사회 연예 스포츠 뉴스 목록 경제뉴스 1 스포츠뉴스 1 사회뉴스 1 경제뉴스 2 ..

이번 강좌에서는 섬네일 이미지를 누르면 큰 이미지가 변환되도록 해보겠습니다. 1. 마크업 코드 2. jQuery 코드 $(document).ready(function(){ $("#thumnail a").click(function(e) { e.preventDefault(); var largeImgPath = $(this).attr("href"); var largeImgAlt = $(this).find("img").attr("alt").substr(0,4); $("#largeimg img").attr({src:largeImgPath,alt:largeImgAlt}); }); }); 먼저, e.preventDefault() 를 보도록 하지요. 이것은 무엇이냐 하면, 대상을 클릭했을때 발생하는 이벤트를 방지하는 ..

웹서핑을 하다 보면 스크롤바를 따라다니는 슬라이드 메뉴를 자주 볼수 있습니다. 오늘은 슬라이드 메뉴를 jQuery로 만드는 방법을 알아보도록 하지요. jQuery가 처음이신 분들은 강좌1 부터 보시는걸 권장합니다. 1. 슬라이드 메뉴의 Key Point 어떤 대상을 움직이려면 대상의 position 값은 absolute 또는, relative 값이 되어야 합니다.(css 에서 설정합니다.) 2. 마크업 보기 (주저리 주저리..컨텐츠 내용) (슬라이드 메뉴 내용) 예제에서는 이런 구조로 마크업 되어 있으며, slidemenu의 css 속성값은 아래와 같습니다. #slidemenu{background:#12cf3d;position:absolute;width:100px;top:50px;right:10px;} ..

이번 강좌에서는 펼침목록 만들기를 해보겠습니다. jQuery 를 처음 접하시는 분은 강좌 1부분부터 보시는걸 권장합니다. 그럼 예제1 부분에서 h3 엘리먼트 영역을 클릭시 아래의 엘리먼트 영역이 사라지는 것을 보도록 하지요. 소스 코드는 아래와 같습니다. $(document).ready(function(){ // 예제1 코드 $("#first h3").toggle(function(e){ // 선택자에 toggle이라는 이벤트를 주었습니다. e.preventDefault(); // 아직은 신경쓰지 않으셔도 되는 부분 $(this).next().slideUp(); //next()와 slideUp() 이라는 메서드가 보입니다. },function(e){ e.preventDefault(); $(this).nex..

오늘부터 저와함께 하루에 한두개정도씩 jQuery를 가지고 놀아 보겠습니다. 처음부터 현란한 예제로 시작하는것보다 간단한 예제를 가지고 시작해서 응용하실수 있도록 하겠습니다. 처음에만 간략하게 jQuery에 대해 설명해 드리며, 다음 예제부터는 쓸대없는 주석은 달지 않도록 하겠습니다. 우선 jQuery는 일종의 자바스크립트 라이브러리로써, 현재 다른 라이브러리로써는 prototype이라든가 네이버의 '진도'가 있습니다. 라이브러리라 함은 쉽게 설명하면, 프로그래밍언어에서 자주 사용하는 함수나 메서드등을 재사용이 가능하도록 모아놓은 것을 말합니다. 그럼 이제부터 예제를 시작합니다. 1. jQuery를 사용하기 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti..