1. 기본 레이아웃 구성
imagesloaded.pkgd.min.js위 파일을 사용해 시작합니다.
pinterest_start.html은 [코드 14-1]처럼 구성되어 있고, 실행결과는 [그림 14-2]와 같습니다.
그다지 어려운 구성은 아니므로 자세한 설명은 생략합니다.
<코드 14-1> 시작 페이지
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 초기화 -->
<style>
</style>
<!-- 헤더 -->
<style>
<!-- 풀다운 -->
</style>
<!-- 네비게이션 메뉴 -->
<style>
</style>
<!-- 검색 양식 -->
<style>
</style>
<!-- 종이 스타일 -->
<style>
</style>
<!-- 섹션 -->
<style>
</style>
<!-- 라이트 박스 -->
<style>
</style>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="jquery.masonry.pkgd.min.js"></script>
<script src="jquery.imagesloade.pkgd.min.js"></script>
<script>
</script>
</head>
<body>
<!-- 헤더 -->
<header id="main-header">
<div class="header-search-form">
<form>
<input type="search" class="input-search" />
<input type="submit" class="input-search-submit" value="검색" />
</form>
</div>
<h1 class="header-title">Intesrest</h1>
<div class="header-menu">
<ul class="outer-menu">
<li>
<a href="#">정보</a>
<ul class="inner-menu">
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
</ul>
</li>
</ul>
<ul class="outer-menu">
<li>
<a href="#">사용자</a>
<ul class="inner-menu">
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
</ul>
</li>
</ul>
</div>
</header>
<!-- 네비게이션 메뉴 -->
<nav id="main-navigation">
<ul>
<li><a href="#">Following</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Everything</a></li>
<li><a href="#">Popular</a></li>
<li><a href="#">Gift</a></li>
</ul>
</nav>
<!-- 본문 영역 -->
<section id="main-section">
<div class="paper">
<div class="paper-holder">
<a><img width="190" src="http://placehold.it/190x306" /></a>
</div>
<p class="paper-description">Lorem ipsum dolor sit amet</p>
<div class="paper-content">
<a class="paper-link" href="#">
<img src="http://placehold.it/190x100" />
</a>
<p class="paper-text">Lorem ipsum dolor sit amet</p>
</div>
</div>
<!-- 생략 -->
<div class="paper">
<!-- 생략(위의 paper 클래스들의 반복) -->
</div>
</section>
<!-- 라이트박스 -->
<div id="darken-background">
<div id="lightbox">
<div class="user-information">
<a class="user-information-image" href="#">
<img src="http://placehold.it/70x70" />
</a>
<div class="user-information-text">
<h3>User</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<hr class="lightbox-splitter" />
<img src="http://placehold.it/600x750" />
</div>
</div>
</body>
</html>