Posts

Showing posts with the label jQuery

레이아웃의 다단을 100% 로 맞추기

예전에 Table로 레이아웃을 잡을 때는 어렵지 않게 구현되었던 표현인데 근래들어서 웹표준에 맞게 코딩을 하게 되면서 레이아웃을 DVI태그로 구현해야 하게 되므로써 다소 구현이 어려워진 것 중에 하나가 다단을 구성하는 것이 아닐까 합니다. 그 다단을 구현하는 방법이 여러가지가 있을 것 같은데.. 이번에 소개를 해드리는 것은 javascript로 구현하는 방법입니다. 레이아웃을 구성 시 2단 또는 3단 이상의 다단을 구성할때 상위 Tag에 대해 가로 100%로 자동으로 맞춰지는 javascript 입니다. 예를들어 만약 레이아웃을 4단으로 구성한다고 했을 때 3개의 단에 대해서는 px 또는 %로 고정값을 지정하고 나머지 하나의 단에 대해서만 .pct 클래스를 지정해 주면 .pct 클래스가 자동으로 나머지 넓이에 대해 값을 지정해 주게 됩니다. HTML 전체 div를 multiColumn으로 감싸 줍니다. 물론 class이름은 바꿀 수 있습니다. 1단, 2단, 4단은 css에서 또는 inline으로 넓이를 지정해 주면 됩니다. 여기에 작성된 샘플은 CSS 파일에서 넓이를 지정해 주었습니다. <div class='multiColumn'> <div>1단</div> <div>2단</div> <div class='pct'>3단</div> <div>4단</div> </div> JAVASCRIPT jquery를 활요해서 HTML문서가 처음 로딩될때와 브라우저 창의 크기를 변경할떄 체크를 해서 .pct의 넓으를 재지정해 줍니다. $(function () { contentLayAutoWidth(); }); $(window).resize(function () { contentLayAutoWidth(); }); /* 레이아웃의 다단 단수를 100%로 채움 */ function content

스크롤에 따라 배경이미지의 시차가 다르게 움직이는 Parallax_ImageScroll

홈페이지를 보게되면 화면을 스크롤 할 때 배경의 이미지가 스크롤에 비해 더 조금씩 움직임으로써 역동적으로 보이게 하는 기술을 볼 수 있습니다. 이것을 Parallax(시차)라는 이름으로 많이 사용되고 있는데.. jQuery의 플러그인으로 구현된 것이 있어 소개합니다. 홈페이지 : https://github.com/pederan/Parallax-ImageScroll DEMO : http://codepen.io/pederan/full/Hheuy 라이선스 : MIT Install bower로 설치할 경우 bower install Parallax-ImageScroll npm으로 설치할 경우 npm install parallax-imagescroll 일반 사용법 HTML <div class="img-holder" data-image="anImage.jpg"></div> <section><p>Content that "slides" on top of the images</p></section> <div class="img-holder" data-image="anotherImage.jpg">[optional content to be displayed on top of the images]</div> javascript jQuery와 jquery.imageScroll.js를 먼저 임포트한 후 설정값을 지정해 줍니다. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../jquery.imageScroll.js"></script> <script>