제주에서 작은 IT 사업을 하고 있는 유지 아빠가 보고 듣고 느끼는 진솔한 이야기를 나누는 공간입니다.

jQuery 7

부트스트랩 5 베타 버전 출시 Bootstrap v5.0.0-beta1

현재 웹에서 가장 많이 사용하는 CSS 프레임워크이자 대표주자인 부트스트랩이 5.0 베타 버전이 출시되었습니다. 6년만에 블로그를 다시 시작하면서 부트스트랩으로 다시 글을 시작하게 되었습니다. 사실 필자는 부트스트랩에 대한 책도 하나 저술했고, 그 책이 사실 부트스트랩을 다룬 한국내 첫 책이자 가장 잘 팔린(?) 책이었습니다. 그 책은 부트스트랩 3.X 버전 이었고 부트스트랩에 대해서 나름 잘 설명한 책이었습니다. 라고 자찬하고 싶습니다. 사실 부트스트랩을 알고 나서는 필자가 제작하는 모든 웹 사이트는 부트스트랩을 기초로 만들고 있습니다. 부트스트랩 이후에 상당히 많은 CSS 프레임워크들이 세상에 출현했고, 나름 의미 있는 사용자 층을 이루고 있지만, 실상 부트스트랩 만한 CSS 프레임워크도 없습니다. ..

싱글 페이지 웹 사이트의 필수품 smint

한 페이지 사이트를 만들때 반드시 필요하다~~~ 요즘 내용이 많지 않는 웹 사이트인 경우에는 1page 사이트를 만드는 경우가 많은데 지금 소개하는 smint는 이럴 때 아주 유용한 고정메뉴라고 할 수 있습니다. jQuery 기반으로 작동하며, 구성 또한 간단합니다. 실제 작동하는 모습을 보시면 아~~ 이런 것 이구나! 라고 알 수 있습니다. 바로 아래의 URL 또는 그림을 클릭해서 사이트로 이동해 보세요. http://www.outyear.co.uk/smint/

웹 & IT 2013.06.15

2KB 밖에 안되는 아주 가벼운 jQuery용 모달 윈도우

요즘 사이트에는 팝업 윈도우 보다는 모달 윈도우 라고, 브라우저 내부에서 뜨는 윈도우를 많이 선호합니다.여기에서 소개하는 POP EASY 도 모달 윈도우 인데, 크기가 2KB 밖에 되지 않는 아주 가볍고, 사용자자 커스터마이징이 가능한 아주 훌륭한 기능이 많이 들어 있는 모달 윈도우 입니다. 4가지의 주요 기능이 있는데, 다음과 같습니다.POP UPS(가장 흔하게 사용하는 팝업 윈도우 입니다.) Linking Modals( 로그인 폼 또는 회원 가입 폼을 모달 윈도우에서 처리하게 합니다.) Videos ( 동영상을 모달 윈도우 내부에서 보여주게 합니다.) iFrames ( iFrame 을 사용해야 하는 경우 사용할 수 있습니다.) 아래의 이미지 또는 URL를 클릭하면 해당 웹 사이트로 이동하며, 자세한 ..

웹 & IT 2013.06.15

jQuery 라이트박스 플러그인 소개

요즘 가장 많이 사용하는 Javascripts Framework가 jQuery 입니다. 이중에서 가장 많이 사용하는 효과가 라이트박스라고 하는 모달 윈도우를 들 수 있겠는데요. 누구나 쉽게 jQuery를 효과를 줄 수 있는 플러그인들이 있어 소개합니다. 이 기사의 출처는 http://graphicalerts.com/20-awesome-best-jquery-lightbox-plugins/ 입니다. 여기서 주목할만 한 것은 Fancybox입니다. ^^ 가장 깔끔하네요. jQuery Lightbox Plugin (balupton edition) More Information on jQuery Lightbox Plugin (balupton edition) Lightbox2 More Information on L..

JQuery 를 이용한 Floating Layer 작업 (중앙에서부터 오른쪽 정렬)

JQuery 에 대한 간단한 설명을 드렸는데요, 이번에는 가장 간단하게 JQuery 를 이용해서 주로 퀵메뉴에 쓰이는 Floating Layer 를 한번 구현해 보겠습니다. 우선 사이에 또는 이렇게 입력해 주시고, 위와 같은 자바 스크립을 입력해 줍니다. 또는 외부에서 저장해서 불러와도 됩니다. 여기서 보면 클래스 명을 .float 라고 지정해 주었는데 CSS 에서 아래와 같이 지정해 줍니다. .float {position:absolute; top:20px; left:5px;} 이렇게 하면 위에서 부터 20픽셀, 왼쪽에서 5픽셀 떨어진 위치에서 브라우저의 스크롤 따라 레이어가 움직입니다. HTML 내에서는 내용 라고 해주면 됩니다. 여기서 보면 레이어의 위치가 왼쪽 기준으로 만들어져 있습니다. 하지만 보..

웹 & IT 2010.02.16

최강의 자바스크립 함수 JQuery

요즘 대세가 JQuery 를 이용한 자바스크립 액션들이 많이 있습니다. 이번 JQuery에 대한 자세한 설명은 http://jquery.com/ 여기 가면 알 수 있습니다. JQuery 는 간단하게 말해서 자바스크립 함수 모음입니다 여기서 말하듯이 The Write less, Do more, Javascript Library | 코드는 적게, 기능은 많게 .. 라는 모토 처럼 최소한의 자바스크립으로 최대한의 작업을 해주는 지상 최강의 자바스크립 함수 모음입니다. 현재 버전은 1.4 입니다만, 점차 업그레이드 할 가능성도 많고, 현재 많은 사이트에서 사용하고 있습니다. 사용법은 간단합니다. JQuery 함수를 다운받아서 직접 사이트내에서 직접 Include 하는 방법이 있고, 다른 방법은 이렇게 외부에서 ..

웹 & IT 2010.02.16