본문 바로가기
Spring boot/Bank App 만들기(deployment)

Bank App 만들기 ( deployment ) - 화면 구현2 ( 레이아웃 분리 )

형디 2024. 8. 7. 12:39
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" %>

 

 

 

 

도전 과제 - 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을 분리하여 웹 페이지를 더 쉽게 관리하고, 유지보수할 수 있다. 사용자 정의 태그와 태그 라이브러리를 사용하면 재사용 가능한 웹 컴포넌트를 생성하여 웹 애플리케이션 개발의 효율성을 높일 수 있다.

728x90

'Spring boot > Bank App 만들기(deployment)' 카테고리의 다른 글

Bank App 만들기 ( deployment ) - Exception Handler 처리 ( HTTP 상태 코드가 뭘까? )  (0) 2024.08.07
Bank App 만들기 ( deployment ) - MainController, mainPage.jsp 구현  (1) 2024.08.07
Bank App 만들기 ( deployment ) - 화면 구현1 ( 템플릿 가져오기 )  (0) 2024.08.07
Bank App 만들기 ( deployment ) - 모델링( Modeling )  (0) 2024.08.07
Bank App 만들기 ( deployment ) - 코딩 컨벤션 ( Coding Convention )  (0) 2024.08.05

'Spring boot/Bank App 만들기(deployment)' Related Articles

티스토리툴바