1265
No
Header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
<title>동영상과 다르게 부트스트랩 적용 Head 부분만 붙이면 됩니다.</title>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
<!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Top.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<!-- Static navbar -->
<div class="col-xs-3 col-md-2"></div>
<div class="col-xs-12 col-md-8" >
<nav class="navbar navbar-inverse">
<h2 style="color:#fff;" class="text-center">Camera 정보 사이트</h2>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
<ul class="nav navbar-nav">
<li class="active"><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="#">LG</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
</body>
</html>
Bottom.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<nav class="avbar navbar-inverse navbar-fixed-bottom">
<div class="container text-center" style="color:#fff;">
<ul style=" list-style:none;">
<li><h3> 회사소개 : macaronics.net </h3></li>
<li><h3> 전화번호 : 02 - 356- 8989 </h3></li>
</ul>
</div>
</nav>
IncludeTest.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="Header.jsp" %>
</head>
<body>
<div class="row">
<!-- Static navbar -->
<div class="col-xs-3 col-md-2"></div>
<div class="col-xs-12 col-md-12" >
<%@ include file="Top.jsp" %>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-2"></div>
<div class="col-xs-12 col-md-12 text-center">
<h1>캐논</h1>
<img src="img/a.jpg">
</div>
</div>
<%@ include file="Bottom.jsp" %>
</body>
</html>
소스 : https://github.com/braverokmc79/jsp_sin
유튜브 동영상 출처 :
강사 : 신형섭(잭임연구원)
저작권 : (주)소프트캠퍼스 http://www.softcampus.co.kr 더많은 무료 강의는 사이트에서 확인하실수 있습니다.
댓글 ( 4)
댓글 남기기