반응형
좋은 퍼블리셔를 만났다면 친절하게도 헤더와 푸터를 나눠줬을지도 모르겠다. 하지만 대부분의 그렇지 않은 경우에는 직접 헤더와 푸터를 나눠야한다. 헤더와 푸터를 나누는 이유는 수정(관리)을 용이하게 하기 위해서다.
이제 화면을 보면서 어느 부분이 헤더이고 어느부분이 푸터인지 대충 눈치를 채보자.
위의 이미지처럼 메뉴가 있는 부분까지가 대부분 헤더이다. 그리고 반대로 푸터는 회사 소개와 contact us같은것들을 모아놓은 곳이 푸터인 경우가 많다. 나는 이렇게 나눌 것이자만 어떻게 나눌지는 자기 맘이니 마음대로 나눠보도록 하자. 마음대로 나눠서 이런 저런 난관을 겪다 보면 실력이 늘게 된다. 이번엔 소스를 보도록 하자.
소스는 더 보기 쉽다. 대부분 태그에 header나 footer로 구분된 경우가 많고 퍼블리셔들이 헤더거나 푸터라고 주석을 달아주는 경우도 많다.
<!-- End mainmenu area -->
위 주석을 찾아보자. 거기까지가 헤더이다.
<div class="footer-top-area">
위 태그를 찾아보자. 거기부터가 푸터이다. 그럼 분리된 소스는 어떻게 됐는지 아래 소스들을 확인해보자.
/inc/top.php
<?php session_start();
include $_SERVER["DOCUMENT_ROOT"]."/inc/dbcon.php";
ini_set( 'display_errors', '0' );
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>eElectronics - HTML eCommerce Template</title>
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,700,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<!-- Bootstrap -->
<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="/css/owl.carousel.css">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/css/responsive.css">
</head>
<body>
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="user-menu">
<ul>
<li><a href="#"><i class="fa fa-user"></i> My Account</a></li>
<li><a href="#"><i class="fa fa-heart"></i> Wishlist</a></li>
<li><a href="cart.html"><i class="fa fa-user"></i> My Cart</a></li>
<li><a href="checkout.html"><i class="fa fa-user"></i> Checkout</a></li>
<li><a href="/member/login.php"><i class="fa fa-user"></i> Login</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="header-right">
<ul class="list-unstyled list-inline">
<li class="dropdown dropdown-small">
<a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="key">currency :</span><span class="value">USD </span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">USD</a></li>
<li><a href="#">INR</a></li>
<li><a href="#">GBP</a></li>
</ul>
</li>
<li class="dropdown dropdown-small">
<a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="key">language :</span><span class="value">English </span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">English</a></li>
<li><a href="#">French</a></li>
<li><a href="#">German</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- End header area -->
<div class="site-branding-area">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="logo">
<h1><a href="index.html">e<span>Electronics</span></a></h1>
</div>
</div>
<div class="col-sm-6">
<div class="shopping-item">
<a href="cart.html">Cart - <span class="cart-amunt">$800</span> <i class="fa fa-shopping-cart"></i> <span class="product-count">5</span></a>
</div>
</div>
</div>
</div>
</div> <!-- End site branding area -->
<div class="mainmenu-area">
<div class="container">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="shop.html">Shop page</a></li>
<li><a href="single-product.html">Single product</a></li>
<li><a href="cart.html">Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Others</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div> <!-- End mainmenu area -->
/inc/bot.php
<div class="footer-top-area">
<div class="zigzag-bottom"></div>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="footer-about-us">
<h2>e<span>Electronics</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis sunt id doloribus vero quam laborum quas alias dolores blanditiis iusto consequatur, modi aliquid eveniet eligendi iure eaque ipsam iste, pariatur omnis sint! Suscipit, debitis, quisquam. Laborum commodi veritatis magni at?</p>
<div class="footer-social">
<a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="#" target="_blank"><i class="fa fa-youtube"></i></a>
<a href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
<a href="#" target="_blank"><i class="fa fa-pinterest"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-menu">
<h2 class="footer-wid-title">User Navigation </h2>
<ul>
<li><a href="#">My account</a></li>
<li><a href="#">Order history</a></li>
<li><a href="#">Wishlist</a></li>
<li><a href="#">Vendor contact</a></li>
<li><a href="#">Front page</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-menu">
<h2 class="footer-wid-title">Categories</h2>
<ul>
<li><a href="#">Mobile Phone</a></li>
<li><a href="#">Home accesseries</a></li>
<li><a href="#">LED TV</a></li>
<li><a href="#">Computer</a></li>
<li><a href="#">Gadets</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-newsletter">
<h2 class="footer-wid-title">Newsletter</h2>
<p>Sign up to our newsletter and get exclusive deals you wont find anywhere else straight to your inbox!</p>
<div class="newsletter-form">
<form action="#">
<input type="email" placeholder="Type your email">
<input type="submit" value="Subscribe">
</form>
</div>
</div>
</div>
</div>
</div>
</div> <!-- End footer top area -->
<div class="footer-bottom-area">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="copyright">
<p>© 2015 eElectronics. All Rights Reserved. Coded with <i class="fa fa-heart"></i> by <a href="http://wpexpand.com" target="_blank">WP Expand</a></p>
</div>
</div>
<div class="col-md-4">
<div class="footer-card-icon">
<i class="fa fa-cc-discover"></i>
<i class="fa fa-cc-mastercard"></i>
<i class="fa fa-cc-paypal"></i>
<i class="fa fa-cc-visa"></i>
</div>
</div>
</div>
</div>
</div> <!-- End footer bottom area -->
<!-- Latest jQuery form server -->
<!-- Bootstrap JS form CDN -->
<!-- jQuery sticky menu -->
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/jquery.sticky.js"></script>
<!-- jQuery easing -->
<script src="/js/jquery.easing.1.3.min.js"></script>
<!-- Main Script -->
<script src="/js/main.js"></script>
</body>
</html>
/index.php
<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/top.php";
$sql = "select * from products p where 1=1";
$sql .= " and ismain=1 and status=1";
$order = " order by pid desc";//마지막에 등록한걸 먼저 보여줌
$limit = " limit 5";
$query = $sql.$order.$limit;
//echo "query=>".$query."<br>";
$result = $mysqli->query($query) or die("query error => ".$mysqli->error);
while($rs = $result->fetch_object()){
$rsc[]=$rs;
}
?>
<div class="slider-area">
<div class="zigzag-bottom"></div>
<div id="slide-list" class="carousel carousel-fade slide" data-ride="carousel">
<div class="slide-bulletz">
<div class="container">
<div class="row">
<div class="col-md-12">
<ol class="carousel-indicators slide-indicators">
<li data-target="#slide-list" data-slide-to="0" class="active"></li>
<li data-target="#slide-list" data-slide-to="1"></li>
<li data-target="#slide-list" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="single-slide">
<div class="slide-bg slide-one"></div>
<div class="slide-text-wrapper">
<div class="slide-text">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-6">
<div class="slide-content">
<h2>We are awesome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dolorem, excepturi. Dolore aliquam quibusdam ut quae iure vero exercitationem ratione!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi ab molestiae minus reiciendis! Pariatur ab rerum, sapiente ex nostrum laudantium.</p>
<a href="" class="readmore">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="single-slide">
<div class="slide-bg slide-two"></div>
<div class="slide-text-wrapper">
<div class="slide-text">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-6">
<div class="slide-content">
<h2>We are great</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe aspernatur, dolorum harum molestias tempora deserunt voluptas possimus quos eveniet, vitae voluptatem accusantium atque deleniti inventore. Enim quam placeat expedita! Quibusdam!</p>
<a href="" class="readmore">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="single-slide">
<div class="slide-bg slide-three"></div>
<div class="slide-text-wrapper">
<div class="slide-text">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-6">
<div class="slide-content">
<h2>We are superb</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, eius?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptates necessitatibus dicta recusandae quae amet nobis sapiente explicabo voluptatibus rerum nihil quas saepe, tempore error odio quam obcaecati suscipit sequi.</p>
<a href="" class="readmore">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- End slider area -->
<div class="promo-area">
<div class="zigzag-bottom"></div>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="single-promo">
<i class="fa fa-refresh"></i>
<p>30 Days return</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="single-promo">
<i class="fa fa-truck"></i>
<p>Free shipping</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="single-promo">
<i class="fa fa-lock"></i>
<p>Secure payments</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="single-promo">
<i class="fa fa-gift"></i>
<p>New products</p>
</div>
</div>
</div>
</div>
</div> <!-- End promo area -->
<div class="maincontent-area">
<div class="zigzag-bottom"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="latest-product">
<h2 class="section-title">Latest Products</h2>
<div class="product-carousel">
<?php
foreach($rsc as $p){
?>
<div class="single-product">
<div class="product-f-image">
<img src="<?php echo $p->thumbnail;?>" style="height:272px;" alt="">
<div class="product-hover">
<a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
<a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a>
</div>
</div>
<h2><a href="single-product.html"><?php echo $p->name;?></a></h2>
<div class="product-carousel-price">
<ins><?php echo number_format($p->sale_price);?>원</ins> <del><?php echo number_format($p->price);?>원</del>
</div>
</div>
<?php }?>
</div>
</div>
</div>
</div>
</div>
</div> <!-- End main content area -->
<div class="brands-area">
<div class="zigzag-bottom"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="brand-wrapper">
<h2 class="section-title">Brands</h2>
<div class="brand-list">
<img src="img/services_logo__1.jpg" alt="">
<img src="img/services_logo__2.jpg" alt="">
<img src="img/services_logo__3.jpg" alt="">
<img src="img/services_logo__4.jpg" alt="">
<img src="img/services_logo__1.jpg" alt="">
<img src="img/services_logo__2.jpg" alt="">
<img src="img/services_logo__3.jpg" alt="">
<img src="img/services_logo__4.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div> <!-- End brands area -->
<div class="product-widget-area">
<div class="zigzag-bottom"></div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="single-product-widget">
<h2 class="product-wid-title">Top Sellers</h2>
<a href="" class="wid-view-more">View All</a>
<div class="single-wid-product">
<a href="single-product.html"><img src="img/product-thumb-1.jpg" alt="" class="product-thumb"></a>
<h2><a href="single-product.html">Sony Smart TV - 2015</a></h2>
<div class="product-wid-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product-wid-price">
<ins>$400.00</ins> <del>$425.00</del>
</div>
</div>
<div class="single-wid-product">
<a href="single-product.html"><img src="img/product-thumb-2.jpg" alt="" class="product-thumb"></a>
<h2><a href="single-product.html">Apple new mac book 2015</a></h2>
<div class="product-wid-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product-wid-price">
<ins>$400.00</ins> <del>$425.00</del>
</div>
</div>
<div class="single-wid-product">
<a href="single-product.html"><img src="img/product-thumb-3.jpg" alt="" class="product-thumb"></a>
<h2><a href="single-product.html">Apple new i phone 6</a></h2>
<div class="product-wid-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product-wid-price">
<ins>$400.00</ins> <del>$425.00</del>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-product-widget">
<h2 class="product-wid-title">Recently Viewed</h2>
<a href="#" class="wid-view-more">View All</a>
<div class="single-wid-product">
<a href="single-product.html"><img src="img/product-thumb-4.jpg" alt="" class="product-thumb"></a>
<h2><a href="single-product.html">Sony playstation microsoft</a></h2>
<div class="product-wid-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product-wid-price">
<ins>$400.00</ins> <del>$425.00</del>
</div>
</div>
<div class="single-wid-product">
<a href="single-product.html"><img src="img/product-thumb-1.jpg" alt="" class="product-thumb"></a>
<h2><a href="single-product.html">Sony Smart Air Condtion</a></h2>
<div class="product-wid-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product-wid-price">
<ins>$400.00</ins> <del>$425.00</del>
</div>
</div>
<div class="single-wid-product">
<a href="single-product.html"><img src="img/product-thumb-2.jpg" alt="" class="product-thumb"></a>
<h2><a href="single-product.html">Samsung gallaxy note 4</a></h2>
<div class="product-wid-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product-wid-price">
<ins>$400.00</ins> <del>$425.00</del>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-product-widget">
<h2 class="product-wid-title">Top New</h2>
<a href="#" class="wid-view-more">View All</a>
<div class="single-wid-product">
<a href="single-product.html"><img src="img/product-thumb-3.jpg" alt="" class="product-thumb"></a>
<h2><a href="single-product.html">Apple new i phone 6</a></h2>
<div class="product-wid-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product-wid-price">
<ins>$400.00</ins> <del>$425.00</del>
</div>
</div>
<div class="single-wid-product">
<a href="single-product.html"><img src="img/product-thumb-4.jpg" alt="" class="product-thumb"></a>
<h2><a href="single-product.html">Samsung gallaxy note 4</a></h2>
<div class="product-wid-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product-wid-price">
<ins>$400.00</ins> <del>$425.00</del>
</div>
</div>
<div class="single-wid-product">
<a href="single-product.html"><img src="img/product-thumb-1.jpg" alt="" class="product-thumb"></a>
<h2><a href="single-product.html">Sony playstation microsoft</a></h2>
<div class="product-wid-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="product-wid-price">
<ins>$400.00</ins> <del>$425.00</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- End product widget area -->
<?php
include $_SERVER["DOCUMENT_ROOT"]."/inc/bot.php";
?>
여기서 조심할 것이 있다.
헤더와 푸터에 등록된 js나 css, 이미지파일들의 경로를 절대경로로 바꿔주어야한다. 퍼블리셔들은 대부분 상대경로로 작업을 해주는 경우가 많다. 반드시 절대경로로 바꿔놓자.
반응형
'PHP강좌 > 쇼핑몰만들기강좌' 카테고리의 다른 글
| php+mysql 쇼핑몰 만들기 강좌 - #27. 쿠키를 이용한 최근 본 상품 (0) | 2022.07.29 |
|---|---|
| php+mysql 쇼핑몰 만들기 강좌 - #26. 헤더와 푸터 분리하기(서브페이지) (0) | 2022.06.13 |
| php+mysql 쇼핑몰 만들기 강좌 - #24. 쇼핑몰 템플릿 적용하기 (2) | 2022.06.08 |
| 괜찮은 무료 쇼핑몰 템플릿 (0) | 2022.06.08 |
| php+mysql 쇼핑몰 만들기 강좌 - #23. 쿠폰 발행하기 feat.함수 (0) | 2022.06.08 |