Cohe
JSP mini project : mypage 실습 본문
728x90
반응형
1.중심이 되는 index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<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-idth, initial-scale=1">
<title>Welcome to MyWorld</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 2000 //changes the speed
})
</script>
</head>
<body>
<%@include file="include/header.jsp" %>
<div class="container">
<div class="row ">
<div class="box">
<div class="col-lg-6 text-center">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- data-ride="carousel" 자동 슬라이드 기능 -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive img-full" src="img/1.jpg">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/2.jpg"> <!-- img-full 옵션 class -->
</div>
<div class="item">
<img class="img-responsive img-full" src="img/3.jpg">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
<div class="col-lg-6 text-center" >
<h2>배우</h2>
<p>
한지민을 소개합니다.
</p>
<hr>
<h3>화보 영상</h3>
<iframe width="100%" height="372px" src="https://www.youtube.com/embed/1C6dcnVQjSM?autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>></iframe>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Jimin World
<strong>유의 사항!</strong>
</h2>
<hr>
<div class="inner" align="center">
<img class="img-responsive img-center" src="img/intro.jpg" alt=""><!-- img-border -->
<hr class="visible-xs">
<p>1. 모든 자료는 회원 가입 후에 이용하실 수 있습니다.</p>
<p>2. ------------------------------------------------------</p>
<p>3. ------------------------------------------------------</p>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<%@include file="include/footer.jsp" %>
</body>
</html>2. footer, header
footer
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<body>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © By Chae 2024.04.12~</p>
</div>
</div>
</div>
</footer>
</body>
header
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<body>
<!-- header -->
<div class="brand">My Web</div>
<div class="address-bar">Welcome to MyWorld</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="/hong">My First Web</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="http://localhost:8080/mypage/index.jsp">HOME</a>
</li>
<li>
<a href="http://localhost:8080/mypage/member/member.jsp">Member</a>
</li>
<li>
<a href="/myweb/board/list.board">BOARD</a>
</li>
<%
String idCheck = (String)session.getAttribute("user_id");
String icon;
String icon2;
if(idCheck ==null){
%>
<li>
<a href="http://localhost:8080/mypage/user/user_login.jsp">LOGIN</a>
</li>
<li>
<a href="http://localhost:8080/mypage/user/user_join.jsp" style="color:red">JOIN</a>
</li>
<% }
else{%>
<li>
<a href="http://localhost:8080/mypage/user/user_logout.jsp">LOGOUT</a>
</li>
<li>
<a href="http://localhost:8080/mypage/user/user_mypage.jsp" style="color:red">MYPAGE</a>
</li>
<% }%>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- end header -->
</body>
728x90
반응형
'개발 언어 > JSP' 카테고리의 다른 글
| JSP mini project : mypage 실습4 - 회원 정보 수정 (0) | 2024.04.15 |
|---|---|
| JSP mini project : mypage 실습3 - 로그인 (0) | 2024.04.15 |
| 6-1 JSP-JDBC 연동2 (0) | 2024.04.12 |
| 6. JSP-JDBC 연동 (0) | 2024.04.11 |
| 5. javaBean (0) | 2024.04.11 |