demun(대문블로그)

퍼블리셔/jQuery2019. 6. 5. 11:21

문서를 만들다보면 해당페이지로 이동후 원하는 위치까지 스크롤이 되는 경우를 원할때가 있습니다. 이때 문서가 html 이든 jsp(do), asp 든 상관없이 원하는 액션이 되길 원합니다. 이런 액션이 종종 있어서 아예 만들어봤습니다. 필요한 부분 index.html: 이동하기전 보여져야할 페이지(링크가 있는 페이지) target.html: 최종 이동할 페이지(스크롤할 영역이 있는 페이지) main.js: 해당영역까지 부드럽게 스크롤이 될 스크립트 아래 페이지의 내용은 이렇습니다. 링크를 보시면 'target.html#section1' 형식입니다. '해당페이지#해당영역아이디' index.html Go to section scroll-section1 Go to section scroll-section2 Go..

퍼블리셔/jQuery2015. 5. 22. 09:10

지금에서야 IE6 을 지원하는 레이어팝업이 무슨 소용이 있겠냐만은.....이번 실무가 그렇다보니 어디 좋은게 없나 찾아보다가 적당한것이 있어 알려드립니다. http://swip.codylindley.com/ 에 보시면 popup window 가 있고, DOM window 가 있는것을 알 수 있습니다. popup window 는 일반 윈도우 팝업창을 띄우는것이 DOM window 가 일반 레이어 팝업입니다. 테스트해본결과 이 DOM window 레이어팝업은 IE6에서도 정상작동되는것을 확인 했습니다. http://swip.codylindley.com/DOMWindowDemo.html 에 보시면 팝업에 대한 데모, 옵션 등등을 볼 수 있습니다. 제일먼저 jquery 를 로드하고, jquery.DOMWindo..

퍼블리셔/jQuery2014. 10. 1. 09:23

이전에는 bpopup 을 사용했었는데 IE 버젼에서 오작동이 있는 바람에 다른 플러그인을 찾아봤습니다. 홈페이지를 살펴보니 IE 10을 지원한다는 말이 없었습니다. 잘 되다가도 어떤 상황에서는 안되는데 원인을 모르겠으며, ie10 에서 나오는 문제였다 조건은 이렇습니다.IE 8이상 버젼을 지원해야 한다(IE7은 선택)모바일을 지원하면 좋다ajax 또는 ifram이든 html 페이지를 불러와야 한다동영상등을 팝업으로 띄울수 있어야 한다 추천하는 플로그인을 바로 Magnific Popup -> http://dimsemenov.com/plugins/magnific-popup/ 예제는 홈페이지에서 클릭하면서 볼 수 있으며 상단의 documention 을 클릭하면 자세한 내용을 볼 수 있다. http://dims..

퍼블리셔/jQuery2014. 7. 28. 06:00

bPopup bpopup 에 문의를 하는 경우가 많아 한번더 자세히 기술합니다. 이전 bpopup 에 대한 글 간단한 구문 한가지만 넣고 사용하면 어디에나 사용할 수 있을 듯 십습니다. 이 방법은 bpopup 홈페이지에서 사용하는 방법으로 보다 간단한 코드를 가지고 여러 상황에 맞게 사용할 수 있습니다. 먼저 폴더 구조는 아래와 같습니다. ├─html │ bpopup.html │ test.html │ ├─images │ image.jpg │ └─js jquery.bpopup.min.js html 폴더 : bpopup.html 에서 ajax 형식으로 test.html 을 불러옵니다. images 폴더 : image.jpg 가 있습니다. 유이의 이미지 입니다. js 폴더 : bpopup.min.js 가 있습..

퍼블리셔/jQuery2014. 5. 27. 06:00

블로그를 하다보면 부드러운 화면이동을 하고 싶을 때가 있습니다. 특히나 긴글일경우 스크롤을 하기가 부담스럽죠. 또 글이 길거나 차례같은것이 있어서 클릭하면 원하는 위치로 이동을 하고 싶을때가 있습니다. 기존의 스크롤을 해주는 플러그인들은 복잡한 설정법이라든가 스타일이 많이 들어가 있다든가 하는것이 대부분인데요. 오늘 소개하는것은 아주 간단합니다. 저만 잘 따라오시면 html, css, javascript 를 몰라도 누구나 따라할 수 있습니다. 초보자들도 따라할 수 있도록 쉽게 설명해드리겠습니다. 먼저 홈페이지를 소개합니다. Smooth Scroll -> https://github.com/cferdinandi/smooth-scroll 데모페이지 ->http://cferdinandi.github.io/smo..

퍼블리셔/jQuery2014. 3. 19. 08:00

새로작성한글을 참고하세요 bpopup 예제 -> http://demun.tistory.com/2425 글하단에 예제 링크가 있습니다. http://code.demunskin.com/plugins/bpopup/html/bpopup.html 실무에서 레이어팝업을 사용했었는데 좀더 쓸만한것을 찾다가 jquery 플러그인중에서 레이어팝업으로 좋은것을 알려드립니다. 홈페이지 -> http://dinbror.dk/bpopup/ jquery, 필요에 따라서는 easing 플러그인을 로드한다는것이 좀 그렇지만 좋아보여 소개합니다. 1. 기본 팝업 스타일. 처음것은 기본으로 많이 사용하는 팝업입니다. 효과없이 일반적인 레이어팝업이며 설정이 무척 간단합니다. 살짝 스타일을 입혔습니다. 아래처럼 나옵니다. 2. 추가적으로 ..

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

이글은 웹 디자이너를 위한 jquery 에서 추출한 글입니다. 그중에서도 실무에서 써먹을수 있는 것중에서 드롭다운 메뉴를 골라봤습니다. 여기서 말한 드롭다운 메뉴는 이미지가 두개 필요합니다. 하나는 평상시의 이미지고 또하나는 마우스가 오버시 나타나는 이미지입니다. 이미지 경로는 제가 블로그에 업로드한후 수정했습니다. 모르고 그냥 저장을 눌러 다 쓰지도 않은 글이 아마도 발행이 됐을겁니다.ㅎㅎㅎ 다시 수정해서 쓰는 중입니다. 모든 부분은 제외하고 jquery 부분만 설명하겠습니다. 모든 소스 코드는 아래의 파일을 다운로드해서 보시기 바랍니다. 아래처럼 보여집니다. jquery 부분만 설명하겠습니다. 무지하게 간단합니다. 단순이 ul의 자식중에서 animated 되지 않은것은 열고(slideDown), 되는..

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

이글은 웹디자이너를 위한 jquery 에서 추출한 것입니다. 이전에도 아코디언 메뉴에 대한 글을 썻는데요. 자주 써먹은 것중에 하나가 탭메뉴가 아닌가 싶네요. 현재 시점에 제 블로그에도 탭메뉴가 적용이 되어 있는데요. jquery cookbook 에서 나온 코드를 수정해서 적용한것입니다. 탭메뉴에 대한 글은 현재 두개가 있습니다. 하나는 자바스크립트로 구성된 것이구요. 또하나는 jquery cookbook 에서 만든 코드입니다. 자바스크립트 탭메뉴 => http://demun.tistory.com/1696 jquery cookbook 탭메뉴 => http://demun.tistory.com/2125 오늘은 위와는 조금은 다른 웹디자이너를 위한 jquery 에서 말한 탭메뉴입니다. 여기에는 이미지가 두개가..

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

이번에는 가로로 된 아코디언 메뉴입니다. 이글은 웹디자이너를 위한 jquery 에서 추출한 것입니다. 가로로 된 메뉴는 이전에도 한번 다룬적이 있습니다. jquery cookbook 에서 다룬것인데요 거기는 수평 아코디언이라고 했습니다. 수평 아코디언 보기 => http://demun.tistory.com/2083 이글은 이전글과 맥락을 같이 함으로 이전글을 참고하시기 바랍니다. 접었다 폈다하는 아코디언 메뉴 1 => http://demun.tistory.com/2141 접었다 폈다하는 아코디언 메뉴 2 => http://demun.tistory.com/2142 이번에도 이미지가 들어가므로 이미지는 제가 블로그에 업로드한후 경로를 수정했습니다. 가로로 된 아코디언은 라벨 부분이 세로로 표현이 되야하는데 ..

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

이번에는 저번에 이어 좀더 개선된 아코디언 메뉴입니다. 마찬가지로 소스는 웹디자이너를 위한 jQuery 에서 추출한 것입니다. 실무에서 이용할만한 것을 추출해서 소개하고 있습니다. 이번에는 이미지가 들어가서 마우스를 오버했을때를 강조하여 좀더 보기조은 아코디언을 만들었습니다. 한가지 더 이미지가 3개가 포함이 되므로 제가 블로그에 업로드한 후 그걸 배경으로 사용했습니다. 이전글과 연동되므로 이전글을 참고해주세요. 접었다 폈다하는 아코디언 메뉴 1 => http://demun.tistory.com/2141 마우스가 손모양으로 바뀐것과 현재 선택되어진곳은 색깔이 다른것을 알 수 있습니다. 참고할 스타일 설정부분은 아래와 같습니다. dt{ line-height:35px; font-size:large; text..