본문 바로가기
Project/myweb_JAVA

02. 인덱스 페이지 및 템플릿 작성

by 개발개발빈이 2022. 7. 19.

 

○ myweb 스타일(.css)

    - Bootstrap Theme "Simply Me" 이용 (링크)

 

Bootstrap Theme "Simply Me"

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

    - css/layout.css

@charset "UTF-8";
/*layout.css*/

  body {
    font: 20px Montserrat, sans-serif;
    line-height: 1.8;
    color: #f5f6f7;
  }
  p {font-size: 16px;}
  .margin {margin-bottom: 45px;}
  .bg-1 { 
    background-color: #A68263; /* Brown */
    color: #ffffff;
  }
  .bg-2 { 
    background-color: #474e5d; /* Dark Blue */
    color: #ffffff;
  }
  .bg-3 { 
    background-color: #ffffff; /* White */
    color: #555555;
  }
  .bg-4 { 
    background-color: #2f2f2f; /* Black Gray */
    color: #fff;
  }
  .container-fluid {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .navbar {
    padding-top: 15px;
    padding-bottom: 15px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    font-size: 12px;
    letter-spacing: 5px;
  }
  .navbar-nav  li a:hover {
    color: #A68263 !important;
  }

 

    - 나는 컨셉을 사막여우로 잡아서 사막여우 사진에서 색을 추출해서 css 변경함

       (참고 : 이미지에서 색추출해주는 사이트 )

 

○ index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/layout.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <title>Index.jsp</title>
</head>
<body>

  <!-- 메인 카테고리 시작 -->
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
        </button>
        <!-- request.getContextPath() 해당 프로젝트 이름 -->
        <a class="navbar-brand" href="<%=request.getContextPath()%>">HOME</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="./notice/noticeList.jsp">공지사항</a></li>        
          <li><a href="./bbs/bbsList.jsp">답변형게시판</a></li>
          <li><a href="./editbbs/editbbsList.jsp">에디터게시판</a></li>
          <li><a href="./pds/pdsList.jsp">포토갤러리</a></li>
          <li><a href="./member/loginFrom.jsp">MEMBER</a></li>
          <li><a href="#contact">CONTACT</a></li>
        </ul>
      </div>
    </div>
  </nav><!-- 메인 카테고리 끝 -->
	
  <!-- First Container -->
  <div class="container-fluid bg-1 text-center">
    <h3 class="margin">Who Am I?</h3>
    <img src="./images/fennecFox_00.jpg" class="img-responsive img-circle margin" 
    	style="display:inline" alt="fennecFox" width="40%">
    <h3>FENNEC FOX</h3>
  </div>
	
  <!-- Contents 시작 -->
  <div class="container-fluid bg-3 text-center">    
    <h3 class="margin">Where To Find Me?</h3><br>
    <div class="row">
      <div class="col-sm-4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <img src="./images/fennecFox_01.jpg" class="img-responsive margin" 
        	style="width:100%" alt="Image">
      </div>
      <div class="col-sm-4"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <img src="./images/fennecFox_02.jpg" class="img-responsive margin" 
        	style="width:100%" alt="Image">
      </div>
      <div class="col-sm-4"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <img src="./images/fennecFox_03.jpg" class="img-responsive margin" 
        	style="width:100%" alt="Image">
      </div>
    </div>
  </div>	<!-- Contents 끝 -->
	
  <!-- Footer -->
  <footer id="contact" class="container-fluid bg-4 text-center">
		
    <a href="#myPage" title="To Top">
      <span class="glyphicon glyphicon-chevron-up"></span>
    </a>
	  
    <h3>Contact Below</h3>
      <a href="./mail/mailForm.jsp">메일보내기</a> &nbsp;&nbsp;
      <a href="./gbook/gbookList.jsp">방명록</a>
	  
    <hr>
    <p>
	  Copyright &copy; 2022 BINSCODE
    </p> 
  </footer>

</body>
</html>

 

○ header.jsp / footer.jsp

    - 모든 페이지에서 header와 footer 부분이 반복해서 필요하기 때문에,

       index.jsp를 위 아래 두 부분으로 나눠서 각각 header.jsp와 footer.jsp로 저장하고,

       각 페이지의 위와 아래에 import해서 사용

 

        ① header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/layout.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <title>Index.jsp</title>
</head>
<body>

  <!-- 메인 카테고리 시작 -->
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
        </button>
        <!-- request.getContextPath() 해당 프로젝트 이름 -->
        <a class="navbar-brand" href="<%=request.getContextPath()%>">HOME</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="./notice/noticeList.jsp">공지사항</a></li>        
          <li><a href="./bbs/bbsList.jsp">답변형게시판</a></li>
          <li><a href="./editbbs/editbbsList.jsp">에디터게시판</a></li>
          <li><a href="./pds/pdsList.jsp">포토갤러리</a></li>
          <li><a href="./member/loginFrom.jsp">MEMBER</a></li>
          <li><a href="#contact">CONTACT</a></li>
        </ul>
      </div>
    </div>
  </nav><!-- 메인 카테고리 끝 -->

 

        ② footer.jsp

  <!-- Footer -->
  <footer id="contact" class="container-fluid bg-4 text-center">
		
    <a href="#myPage" title="To Top">
      <span class="glyphicon glyphicon-chevron-up"></span>
    </a>
	  
    <h3>Contact Below</h3>
      <a href="./mail/mailForm.jsp">메일보내기</a> &nbsp;&nbsp;
      <a href="./gbook/gbookList.jsp">방명록</a>
	  
    <hr>
    <p>
	  Copyright &copy; 2022 BINSCODE
    </p> 
  </footer>

</body>
</html>

 

○ template.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp"%>
<!-- 본문시작 template.jsp -->


	본문 작성영역


<!-- 본문끝 -->
<%@ include file="footer.jsp"%>
저작자표시 비영리 변경금지 (새창열림)

'Project > myweb_JAVA' 카테고리의 다른 글

05. 답변형 게시판 ③ (게시글 삭제, 게시글 수정, 답변 쓰기)  (0) 2022.07.26
04. 답변형 게시판 ② (게시글 목록, 게시글 상세보기)  (0) 2022.07.21
03. 답변형 게시판 ① (테이블 생성, DTO, DAO, 게시글 쓰기, 유효성 검사)  (0) 2022.07.20
01. JAVA기반 My Web 미니 프로젝트 (프로젝트 생성, 환경 설정)  (0) 2022.07.18
00. myweb프로젝트 관련, Maria DB와 Oracle DB 쿼리 차이  (0) 2022.05.21

관련글

댓글

티스토리툴바