demun(대문블로그)

퍼블리셔/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을 이용하는 방법..

퍼블리셔/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..

퍼블리셔/jQuery2011. 12. 21. 06:00

티스토리에서 툴팁기능을 사용해보기. 물론 티스토리가 아니더라도 툴팁기능을 이용할 수 있습니다. 또 툴팁을 사용하는 기능은 여러가지가 있습니다. 그중 제가 html5로 마크업하면서 괜찮다고 생각되는 툴팁 플러그인이 있어 소개하고 적용하는 방법을 알려드릴려고 합니다. 이름하여 Poshy Tip jQuery Plugin 입니다. 이는 jQuery 를 사용해야 합니다. 아주 많은 기능이 있습니다. Poshy Tip jQuery Plugin 의 데모페이지를 보시면 다양한 기능을 알수 있습니다. 여기서는 Poshyd의 툴팁기능중 하나만 적용해보면 나머지는 자동으로 알수 있으니 우선 한가지만 적용하는 방법을 알려드립니다. 나머지 기능은 다 같으니 얼마든지 응용가능합니다. 먼저 관련 파일을 다운로드 하세요. 다음 다운..

퍼블리셔/jQuery2011. 12. 1. 06:00

예전에도 상단으로 올라가고 내려가고 하는 버튼이나 자바스크트에 대해서 몇번 글을 쓴적이 있습니다. 예전에 쓴글은 아래의 링크를 확인하시면 도움이 되실겁니다. 오늘은 jquery plugin을 이용한 것인데요. 평상시에는 안보이다가 스크롤을 아래로 하면 상단으로 올라갈 수 있는 버튼이 보입니다. 이걸 적용해 보는 방법을 알아보겠습니다. 이동버튼에 관한 글 블로그 상하단 이동하기(anchor,앵커) 상.하단 부드럽게 이동하기 위로 이동버튼 간단하게 삽입하기 이번에는 jQuery 코드가 들어간건데요. 평상시에는 안보이다가 스크롤을 아래로 하면 위로버튼이 생성이 됩니다. 현재 제 블로그 하단에 보면 아래와 같은 이미지가 보입니다. 이걸 클릭하면 부드럽게 상단으로 올라갑니다. 사용하는 방법을 알려드리겠습니다. 먼..

퍼블리셔/jQuery2011. 2. 27. 06:00

스클롤을 따라다니는 플로팅 메뉴는 검색을 해보시면 많이 있는것을 알수 있을겁니다. 각자의 환경에 맞쳐서 사용하시면 됩니다. 제가 소개하는 floating menu 는 jquery 를 사용하는 메뉴입니다. 참고로 jquery 를 사용하면 정말 많은 효과를 줄수 있습니다. 그리고 소개하는 플로팅 메뉴는 크로스 브라우징 환경에 있어 모든 브라우져에서 정상작동합니다. 예제 페이지를 참고하세요. 스크롤을 내렸다 올렸다 해보세요. https://d2o0t5hpnwv4c1.cloudfront.net/018_Floating_Menu/demo/dhtml_float_menu_final_nettut.html 제 블로그에 적용되어 있는것입니다. 현재 우측에 따라다니는 메뉴가 보이지요? 이제 적용하는 법을 알려드리겠습니다. 플..

퍼블리셔/jQuery2010. 12. 25. 06:00

얼마나 잘 만든 브라우져이길래 IE6은 png 이미지 파일을 회색으로 보이게 할까요.ㅎㅎㅎㅎ 많은 사람들이 ie 6을 사용하기에 이점을 무시할수는 없습니다. ie6의 경우 아예 렌더링 엔진 자체가 없습니다. ie7이 되서야 Triden 엔진을 사용합니다.고로 ie6에서는 png 이미지 파일을 회색배경으로 보이게 하는 버그가 있습니다. 이 문제를 해결하기 위해 많은 자바스크립트 파일이 존재하는것으로 알고 있습니다. 그중에서 제가 사용해본결과 가장 좋은넘을 소개합니다. 바로 DD_lelatedPNG 입니다. 다른것은 background-position을 이용하지 못하는 등 제약이 있지만 이는 그런 제약도 없습니다. 물론 다 되는것은 아닙니다만 많이 사용하는것중에 전 이것이 제일 나아보입니다. 사용법 DD_l..

퍼블리셔/jQuery2010. 6. 22. 06:00

이전에 알려드린 수평메뉴바는 자바스크립트를 이용합니다. 하지만 이번에 소개하는 수평메뉴는 제가 현재 달고 있는메뉴인데요. ie6도 지원합니다. 지금 제가 이것 저것 만지면서 손을 잘못 본거 같은데요. 다른거와 다른게 이건 좀 햇깔립니다^^; 해보시면 압니다.ㅎㅎㅎㅎ 다른 좋은것들도 있습니다. 우선 데모화면을 우선 보시고 그중에 적용하고 싶은것이 있으면 적용하세요. 미리보기 => http://www.lwis.net/free-css-drop-down-menu/ 스샷추가 제가 대략보니 그중에서 MTV 에서 사용하는 수평메뉴가 가장 나은거 같습니다. 현재 그걸 적용해보겠습니다. 간단하게 적용하는 방법을 알려드리겠습니다. 우선 익스플로러도 적용을 하려면 jquery 파일도 같이 사용해야합니다. 아래의 파일을 다운..

퍼블리셔/jQuery2010. 6. 11. 06:00

수평메뉴바는 일반적으로 스킨에 나오는 메뉴바 보다도 더욱 활용가치가 있습니다. 저의경우 현재는 카테고리도 메뉴바에 올려넣고, 보여주고 싶은 글도 넣었습니다. 링크는 얼마든지 마음껏 활용하세요. css 를 활용하면 얼마든지 수정도 가능합니다. 여기서는 일일이 수정하는것은 힘드니까 초보자도 사용할수 있도록 코드를 삽입하는것만으로도 사용이 가능하도록 글을 써보겠습니다. 원문은 아래 사이트입니다. 다양한것이 있으니 참고하시기 바랍니다. 원문출처 : http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/ 수직메뉴는 아래글 참고. 멀티 드롭다운 메뉴 달기(Vertical CSS Menus) => http://demun.tist..

퍼블리셔/jQuery2010. 6. 7. 06:00

블로그를 하다가 스크롤을 하고 다시 올라갈려면 스크롤을 다시 해야지요. 이럴때 간단하게 위로 이동버튼이 있으면 아주 좋습니다. 이전에 네임앵커라고해서 달아서 사용해봤는데 모든 브라우져에 호완이 되어야하는데 그렇지만도 않은거 같습니다. 그리고 html 과 장소에 따라서는 css 도 수정을 해줘야하지요. 하지만 이번에 소개하는것은 간단이 업로드와 한두줄의 html 추가로 간단이 위로 이동 버튼을 달수 있습니다. 현재 제가 사용해보니 괜찮은거 같아 소개합니다. 자 그럼 시작합니다. html 추가. html 편집창에서 사이에 아래코드를 삽입하세요. 그런다음 아래의 이미지와 js파일을 다운로드해서 이름을 수정하지 말고 그대로 파일업로드를 해주세요. 1차 끝 ~~~~~ 현재는 제가 업로드를 해놨기 때문에 사실 js..