demun(대문블로그)

퍼블리셔/jQuery2012. 2. 10. 06:00

jquery cookbook 에 수평 아코디언 메뉴가 있습니다. 좀더 배우고 익히고자 이렇게 글을 씁니다. 제이쿼리 수평 아코디언 메뉴는 쿡북 예제 사이트에서 코드와 데모 화면을 볼 수 있습니다. 우선 어떤 방식인지 대략 살펴봅니다. 첫번째 화면. 두번째 화면. 세번째 화면. 즉 이미지를 클릭하면 왼쪽, 오른쪽으로 이동하는 아코디언 메뉴입니다. 전체코드는 아래 첨부한 파일을 다운로드 받아서 클릭해보시면 알 수 있습니다. 단 jquery 코드와 이미지 , 그리고 css 설정은 예제사이트의 주소로 했습니다. 전체코드는 내용이 길어 생략합니다. 파일을 다운로드 받아서 보시기 바랍니다. 여기서 jquery 부분을 살펴보겠습니다. 먼저 코드를 보시죠. $.fn.horizontalAccordion = functio..

퍼블리셔/jQuery2012. 2. 9. 06:00

jQuery 를 사용한 드롭다운 메뉴가 참 많습니다. jquery 가 워낙 성능이 뛰어나다보니 많은 제이쿼리 드롭다운 메뉴를 보셧을 겁니다. 그럼 나도 한번 드롭다운메뉴를 만들어보자...라는 취지에서 예전부터 유명했던 jquery.droppy.js 를 소개할까 합니다. 홈페이지를 보시면 예제와 사용법이 있습니다. 그런데 정작 한글로 된 소개글은 하나도 없더군요. 그래서 겸사겸사 소개합니다. 홈페이지 => http://onehackoranother.com/projects/jquery/droppy/ 사용법을 알려들리기 전에 먼저 사이트를 하나더 소개하겠습니다. 위의 홈페이지보다 더 자세히 설명을 해놓은곳이 있어 이걸 예제로 들면 되겠다싶어 소개합니다. 먼저 코드와 예제는 아래의 사이트를 참고하세요. http..

퍼블리셔/jQuery2012. 2. 6. 06:00

이전에는 필터링을 해서 요소를 선택하는 방법을 알아 봤습니다. 때로는 filter() 이나 find()를 사용하기 전으로 돌아가야 할 때가 있습니다. 즉, 이전 상황으로 되돌릴수 있는 방법이 필요합니다. 이런 역활을 하는것이 바로 end() 입니다. 먼저 end() 문법을 보세요. end() jQuery 커멘트 체인에서 사용하여 이전 확장 집합으로 돌아간다. 매개변수 : 없음. 반환값 : 이전 확장 집합. 예를들어 아래와 같은 구문이 있다고 가정합니다. $('img').clone().appentTo('#test1').end().addClass('.test2'); 이것은 img 를 복사(clone)하여 아이디 test1를 추가(appendTo) 합니다. 그런다음 end()가 나오기 때문에 복사(clone)..

퍼블리셔/jQuery2012. 2. 5. 06:00

dom 요소안에서 선택한 요소들중에서 추가적으로 제거하거나 새로운 요소를 만들경우가 있습니다. 이번에는 원하지 않는 요소가 있을경우 필터를 통해 제외하고 선택하는 방법을 알아보겠습니다. jQuery 에는 filter 이라는 매서드가 있습니다. 이 메서드는 지정된 표현식과 일치하지 않는 요소를 제외하는 역활을 합니다. 먼저 설명을 보겠습니다. filter filter(expression) 전달받은 셀렉터 표현식이나 필터링 함수를 이용해서 확장 집합에서 엘리먼트를 필터링한다. 매개변수. expression(String|Function) 확장집합에서 일치하지 않는 엘리먼트를 모두 제거하고자 jQuery 셀렉터 또는 필터링 조건을 결정하는 함수를 명시한다. 이 함수는 집합에 있는 각 엘리먼트마다 호출된다. 호출..

퍼블리셔/jQuery2012. 2. 4. 06:00

jQuery 를 사용하여 DOM에 있는 특정 요소를 선택하는 방법을 알아보겠습니다. 먼저 요소를 예제로 넣고 어트리뷰트 요소가 몇개가 있는지 찾아보겠습니다. 먼저 전체 예제 코드를 보겠습니다. 참고로 jquery 버젼은 최신버젼이든 예전버젼이든 작동하는데는 별문제 없으니 jquery 를 로드한다는 것만 알아두면 됩니다. link link link link link link 결과. 6개의 a 요소가 있다고 메세지 창이 떴습니다. html에는 총 6개의 a 요소가 있습니다. 우선 모든 요소를 선택하도록 $('a') 를 사용했습니다. 마찬가지로 jquery('a') 로 해도 결과는 마찬가지 입니다. a요소가 몇개 있는지 length 속성을 사용했습니다. jquery 는 찾고자 하는 선택요소가 더 많이 있을경우..

퍼블리셔/jQuery2012. 2. 3. 06:00

jquery의 선택자는 css 선택자오 동일합니다. 그래서 css를 알면 jquery선택자에서 매우 유리합니다. jquery는 모질라 파이어폭스,인터넷 익스플로러 7, 사파리와 같은 최신브라우져가 지원하는 차세대 CSS를 사용해 고급 셀렉터를 지원합니다. jQuery가 지원하는 기본 CSS 셀렉터 셀렉터 설명 * 모든 엘리먼트와 일치 E 태그명이 E인 모든 엘리먼트와 일치 E F E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치 E>F E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치 E+F E의 형제 엘리먼트로 바로 다음에 나오는 모든 엘리먼트 F와 일치 E~F E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치 E:has(F) 태그명이 F인 자손을 하나 이상 가지는 태그명이 E..

퍼블리셔/jQuery2012. 2. 2. 06:00

jQuery 를 좀더 학습하기 위하여 jQuery 를 연재하기로 하였습니다. 주관련 예제와 학습은 jQuery Cookbook 를 대상으로 하고 설명은 jQuery in Action 과 같이 병행할 생각입니다. 또하나는 티스토리 블로그이니만큼 연관성이 있는것은 같이 다룰려고 합니다. 첫번째 시간으로 jQuery 코드를 html 에 넣는 기본부터 시작합니다. html 에 jQuery 코드를 넣은 방법은 두가지가 있습니다. 1. jQuery 의 최신 버젼을 삽입하기 위해 구글이 호스팅하는 CDN(content delivery network)를 사용하는 방법. 2. jQuery.com 으로부터 다운로드 받아 직접 서버에 업로드후 호스팅하는 방법입니다. 참고로 구글에서 빠른 호스팅을 하니 CDN을 이용하는 방법..

퍼블리셔/기술2012. 1. 31. 06:00

이전에 제가 온라인 구문강조 하는 방법과 자바스크립트를 이용한 구문강조 기능에 관한 글을 쓴적이 있습니다. 이 방법은 위의 방법과는 다른 방법입니다. 특히 에디트플러스를 이용하는 방법입니다. 그리고 이 방법은 티스토리에서만 해당이 되는것이 아니라 네이버, 다음, 파란....등등 어디에서나 활용할 수 있는 방법입니다. 참고 온라인 구문강조 도구 7곳 티스토리 치환자 본문에 표시하는 방법 티스토리 구문강조(코드하이라이팅)하는 4가지 방법 설치없이 구문강조하고 티스토리 치환자 표시하는 방법 에디트플러스를 이용해서 블로그에 코드를 쓸때 구문강조하는 간단한 방법입니다. 에디트플러스를 이용하는 방법이니 에디트 플러스가 있어야겠지요. 있다치고 에디트플러스에서 복사할 코드를 전부 선택을 합니다. 그다음 마우스 우측버튼..

퍼블리셔/기술2012. 1. 27. 13:00

서식이라는것이 스킨의 스타일에 어느정도는 영향을 받습니다. 그래서 각각 다른 스킨마다 서식이 약간씩 코드를 수정해줘야 합니다. 리본 서식 1 이미지 => http://demun.tistory.com/2065 리본 서식 1 적용법 => http://demun.tistory.com/2061 위의 글에서 적용이 안된다는 분이 있어서 제가 그분의 스킨을 수정해봤습니다. 방법은 두가지가 있는데요. 첫번째것이 가장 확실하고 깔끔합니다. 먼저 리본서식 1 적용법에 대한 글을 먼저 읽어야 이 글을 이해할 수 있습니다. 그럼 방법 중에서 첫번째 방법을 알아보겠습니다. overflow:hidden 속성 제거 이 서식의 적용방법중 주의해야 하는코드가 바로 아래부분입니다. h3.tForm { margin: 0 0 20px -..

퍼블리셔/jQuery2012. 1. 24. 06:00

라바램프 메인메뉴는 jQuery 를 이용하는 아주 인기 있는 메인메뉴입니다. 제가 지금 현재 적용해봤는데요. 이전에 XE 로 레이아웃 스킨을 만들때 적용해봤었습니다. 이번에는 티스토리에 적용을 해봤습니다. 이걸 알려드리겠습니다. LavaLamp => http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ 이걸 좀더 업그레이드 시키고 사용하기 편하게 소개한 글이 있습니다. 아래의 사이트가 가시면 데모와 다운로드를 받을수 있습니다. Lava Lamp 스타일을 만드는 방법 => http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-lava-lamp-style-navigatio..