본문으로 바로가기

# 8. 화면 구현 - 2(레이아웃 분리)

category Java 2024. 8. 6. 17:51

재사용 가능한 파일로 분리 하기
1. layout/header.jsp
2. layout/footer.jsp
3. view/mainPage.jsp 코드 수정 하기 (JSP 태그 추가)
4. 도전 과제 - JSP 태그 조사하기

 

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>myBank</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <style>
  .fakeimg {
    height: 200px;
    background: #aaa;
  }
  </style>
</head>
<body>

<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>My Bank</h1>
  <p>마이바이티스를 활용한 스프링 부트 앱 만들어보기</p> 
</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>Some Links</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
    <!-- end of header.jsp  -->

 

footer.jsp

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

    
    
    <!--  start of footer.jsp  -->
	<div class="jumbotron text-center" style="margin-bottom:0">
	  <p>Footer</p>
	</div>


</body>
</html>
<!--  end of footer.jsp  -->

 

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	
	<!-- header.jsp  -->
	<%@ include file="/WEB-INF/view/layout/header.jsp" %>	
    	
    <!-- start of content.jsp(xxx.jsp)   -->	
    <div class="col-sm-8">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
</div>
<!-- end of content.jsp(xxx.jsp)   -->

<!-- footer.jsp  -->
<%@ include file="/WEB-INF/view/layout/footer.jsp" %>

 

4. 도전 과제 - JSP 태그 조사하기

JSP(JavaServer Pages) 태그는 JSP 파일 내에서 동적인 웹 페이지를 생성하기 위해 사용되는 특별한 코드 조각입니다. JSP 태그는 HTML 태그 내에 삽입되어 서버에서 실행되며, 페이지가 사용자에게 전송되기 전에 서버에서 HTML로 변환됩니다. JSP 태그는 크게 다음과 같은 대표적인 부분들로 나뉩니다:

1. 지시자(Directives)

  • <%@ directive attribute="value" %> 형식으로 사용됩니다.
  • JSP 페이지에 대한 설정 정보를 제공합니다. 가장 흔히 사용되는 지시자는 page, include, **taglib**입니다.
    • page: 페이지에 대한 정보를 정의하며, 언어, 에러 페이지, 버퍼 크기 등을 설정할 수 있습니다.
    • include: 다른 파일의 내용을 현재 JSP 페이지에 포함시킵니다.
    • taglib: 태그 라이브러리를 페이지에 연결하여 사용자 정의 태그를 사용할 수 있게 합니다.

2. 스크립트 요소(Scripting Elements)

  • 동적인 컨텐츠를 생성하기 위한 Java 코드를 JSP 페이지에 삽입할 수 있게 해줍니다.
    • 표현식(Expressions): <%= expression %> 형태로, 식의 결과를 문자열로 변환하여 출력합니다.
    • 스크립틀릿(Scriptlets): <% code %> 형태로, 임의의 Java 코드를 실행할 수 있습니다.
    • 선언(Declarations): <%! code %> 형태로, 메서드나 변수 등을 JSP 페이지에 선언할 수 있습니다.

3. 액션 태그(Action Tags)

  • JSP 페이지에서 애플리케이션 로직을 수행하기 위한 빌트인 액션을 정의합니다.
    • <jsp:forward>: 현재 페이지에서 다른 페이지로 요청을 전달합니다.
    • <jsp:include>: 다른 페이지의 출력을 현재 페이지에 포함시킵니다.
    • <jsp:useBean>, <jsp:setProperty>, <jsp:getProperty>: JavaBean 컴포넌트를 사용하여 속성을 설정하거나 값을 가져옵니다.

4. 사용자 정의 태그(Custom Tags)

  • 개발자가 직접 태그를 정의하여 사용할 수 있게 해줍니다. 이를 위해 taglib 지시자로 태그 라이브러리를 선언한 후 사용합니다.
  • 재사용 가능한 컴포넌트나 복잡한 출력을 생성하는 데 유용합니다.

JSP 태그를 사용함으로써, Java 코드와 HTML을 분리하여 웹 페이지를 더 쉽게 관리하고, 유지보수할 수 있습니다. 사용자 정의 태그와 태그 라이브러리를 사용하면 재사용 가능한 웹 컴포넌트를 생성하여 웹 애플리케이션 개발의 효율성을 높일 수 있습니다.

'Java' 카테고리의 다른 글

람다식(Lambda expression)  (2) 2024.09.13
13. 회원 가입(트랜잭션, 예외 처리, H2 테이블 생성)  (0) 2024.08.09
Wrapper 클래스  (0) 2024.06.12
Swing - (이미지 겹치는 방법)  (0) 2024.04.29
Swing - (이미지 올리기)  (0) 2024.04.29
댓글 , 엮인글
개발일기
블로그 이미지 haejujung 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바