앞에서 살펴본 CSS 다단 칼럼은 원래 그리드 레이아웃을 위한 용도가 아니라 웹 화면을 여러개의 단으로 나누어 표시하기 위한 것이다 다양한 형태의 그리드 레이아웃을 만들려면 jQuery 플러그인을 사용하는 것이 편리하다.
VGrid 플러그인을 사용한 카드 UI
vGrid 플러그인은 그리드 레이아웃을 쉽게 만드는 플러그인으로 브라우저 화면 크기에 따라 화면 요소를 동적으로 옮겨준다 그리드 레이아웃이므로 사각 형태를 가지고 있어서 핀터레스트 같은 카드형 디자인 사이트를 만드는데 사용할 수 있고 여러가지 효과를 손쉽게 적용할 수 있는 장점도 있다
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-wdidth; init-scale=1.0; user-scaclable=no">
<title>vGrid 플러그인</title>
<style>
* {
margin:0;
padding:0;
}
#container div {
width:200px;
background:#fff;
box-shadow: 0px 1px 1px #aaa;
padding:15px;
padding-bottom:15px;
margin:15px;
}
#container div img {
width:100%;
padding-bottom:15px;
margin-bottom:5px;
}
#container div h2 {
font-size:1em;
color:#0d2dff;
}
#container div p {
font-family:"맑은 고딕", 돋움;
font-size:0.8em;
color:#222;
margin:0;
padding:10px;
}
</style>
</head>
<body>
<div id="container">
<div>
<img src="images/tr1.jpg">
<h2>발리 - 따나롯 해상 사원</h2>
<p>만조 때는 바닷물이 밀려들어 사원과 육지가 떨어지고 썰물이 되면 다시 육지와 연결된다. </p>
</div>
<div>
<img src="images/tr2.jpg">
<h2>남원 - 홍명희 혼불 문학관</h2>
<p>홍명희가 만 17년간 집필한 '혼불'에 대한 모든 것이 모여있는 곳. </p>
</div>
<div>
<img src="images/tr3.jpg">
<h2>고창 - 도솔산 선운사</h2>
<p>정유재란 때 피해를 입었으나 광해군 때 재건하여 지금까지 보존해 오는 절.</p>
</div>
<div>
<img src="images/tr4.jpg">
<h2>발리 - 울룬다누 사원</h2>
<p>브라딴 호수 위의 사원. 강과 호수를 관장하는 물의 여신 '데위 다뉘'를 위해 지어진 사원이라네요. </p>
</div>
<div>
<img src="images/tr1.jpg">
<h2>발리 - 따나롯 해상 사원</h2>
<p>만조 때는 바닷물이 밀려들어 사원과 육지가 떨어지고 썰물이 되면 다시 육지와 연결된다. </p>
</div>
<div>
<img src="images/tr2.jpg">
<h2>남원 - 홍명희 혼불 문학관</h2>
<p>홍명희가 만 17년간 집필한 '혼불'에 대한 모든 것이 모여있는 곳. </p>
</div>
<div>
<img src="images/tr3.jpg">
<h2>고창 - 도솔산 선운사</h2>
<p>정유재란 때 피해를 입었으나 광해군 때 재건하여 지금까
지 보존해 오는 절.</p>
</div>
<div>
<img src="images/tr4.jpg">
<h2>발리 - 울룬다누 사원</h2>
<p>브라딴 호수 위의 사원. 강과 호수를 관장하는 물의 여신 '데위 다뉘'를 위해 지어진 사원이라네요. </p>
</div>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.vgrid.min.js"></script>
<script>
$('#container').vgrid({
time:400,
delay:30,
wait:500
});
</script>
</body>
</html>
vGrid 플러그인 외에도 그리드 레이아웃을 만들어주는 jQuery 플러그인은 아주 많다
그중에서 자주 사용하는 플러그인은 다음과 같다
jQuery Wookmark
Masonry
Blockslt
'프론트 개발' 카테고리의 다른 글
| [ FE ] Do it! 프런트엔드 웹디자인 입문 10-1 풀 스크린 배경 이미지 직접 만들기 (0) | 2026.02.25 |
|---|---|
| [ FE ] Do it! 프런트엔드 웹디자인 입문 09-3 플렉스 박스 사용하기 (0) | 2026.02.24 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 09-1 다단 칼럼을 사용해 그리드 레이아웃 만들기 (0) | 2026.02.23 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 08-2 패럴랙스 스크롤링 효과 만들기 (0) | 2026.02.19 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 08-1 원페이지 사이트 만들기 (0) | 2026.02.19 |