DIV 태그로 벽돌 쌓기
Masonry는 벽돌 쌓기 모양으로 요소를 배열해주는 자비스크립트 라이브러리입니다.
Masonry를 이용하면 이미지를 배열하거나 썸네일이 있는 글목록을 예쁘게 나타낼 수 있습니다.
또한 웹브라우저의 가로폭이 변하면 그에 맞게 배열이 바뀌어 반응형웹에서도 사용하기 좋습니다.
다운로드
Masonry는 다음의 링크에서 다운로드 받을 수 있습니다.
http://masonry.desandro.com/#install
스크립트를 수정할 것이라면 masonry.pkgd.js를, 그대로 사용할 것이라면 masonry.pkgd.min.js를 다운로드 받습니다.
사용법
다운로드 받은 파일을 서버에 업로드하고, HTML 문서에서 불러옵니다.
<script src="masonry.pkgd.min.js"></script>
Masonry 배열을 할 요소를 적당한 이름의 id를 부여한 요소로 둘러싸고, 배열할 요소에 적당한 이름의 class를 부여합니다.
<div id="container"> <div class="item">Lorem</div> <div class="item">Ipsum</div> ... <div class="item">Lorem</div> </div>
배열할 요소의 가로폭을 정하고, float 속성을 부여합니다.
.item { width: 100px; float: left; }
문서가 끝나는 곳에 스크립트 실행을 위한 코드를 넣습니다.
<script> var container = document.querySelector( '#container' ); var msnry = new Masonry( container, { // options columnWidth: 100, itemSelector: '.item', } ); </script>
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Masonry</title> <style> .item { width: 100px; height: 100px; float: left; margin: 5px; background-color: #2195c9; } </style> <script src="masonry.pkgd.min.js"></script> </head> <body> <div id="container"> <div class="item">c</div> <div class="item">c++</div> <div class="item">c#</div> <div class="item">java</div> <div class="item">html</div> <div class="item">javascript</div> <div class="item">css</div> <div class="item">jquery</div> <div class="item">html5</div> <div class="item">xml</div> <div class="item">dtd</div> <div class="item">data</div> </div> <script> var container = document.querySelector( '#container' ); var msnry = new Masonry( container, { // options columnWidth: 110, itemSelector: '.item', } ); </script> </html>
출처 : http://www.cmsfactory.net/node/10403
'my_lesson > _HTML' 카테고리의 다른 글
| HTML TAG[필수태그] 모음 (0) | 2015.07.25 |
|---|---|
| HTML/XML 자주쓰는 ENTITY CODE(개체 문자) (0) | 2015.04.21 |
| HTML Table & Display table (0) | 2015.03.22 |
| HTML Display attribute & Visibility attribute (0) | 2015.03.22 |
| Radio button for lesson (0) | 2015.03.13 |
댓글