깃에 브랜치를 하나 생성한다.

 

git branch를 이용해서 가지가 어떤 것이 있는지 확인 가능하다.

 

checkout을 이용해서 practice로 이동해본다.

 

checkout master를 이용해서 다시 master로 돌아온다.

 

연습용 텍스트파일 만든다

 

practice로 옮겨본다

 

옮기면 텍스트 파일이 없어진다 (다시 master로 돌아오면 텍스트 파일이 다시 나타난다)

 

w3schools에 접속하여 bootstrap

 

b4

 

navbar

 

네비게이션 바 선택

 

try it yourself

 

WebContent에 test 폴더를 만들고 navTest.jsp를 만든다.

 

내용을 붙여넣는다

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-md 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>
<br>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>

</body>
</html>

 

cards

 

원하는 모양 선택

 

부트스트랩을 이미 넣었기 때문에 try it yourself안하고 example복사해도 됨

더보기 
<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

 

<div class="Container">를 추가하고 그 안에 넣자

 

이미지를 빼고 넓이를 변경하자

 

복붙

 

마진을 주자

 

공통적으로 필요한 녀석들을 넣기위한 include

 

nav.jsp를 만들자

 

모든페이지에서 공유해야되는 것들을 넣어보자(html과 body가 잘렸다고 고민하지말자 이후 footer를 만들것)

 

옮긴 후 home의 모습

 

푸터 데모

 

해당 페이지에서검사 클릭

 

마우스 오른쪽 copy element

 

join페이지에 연습삼아 푸터내용을 넣어보자

 

확인

 

footer를 만들어서 내용을 집어넣자

 

footer에 내용을 넣자

 

home페이지의 맨 아래에 붙여 넣자 include하자

 

테스트 해보자

 

회원가입 화면을 만들어보자

 

join에 해당 샘플코드를 넣자

 

넣은 모습

 

수정 해보자

 

UsersJoinProcAction 파일로 가서 주소를 바꿔보자 

 

네비게이션에서 버튼을 누르면 이동하도록 변경

 

UsersJoinAction을 복사해서 UsersLoginAction으로 새로만들고 주소를 user/login.jsp로 바꾼다

 

 

UsersJoinProcAction 포워딩 방식 변경

 

페이지 이동은 무조건 Dispatcher 를 사용하고 (request를 담고 가거나 가지않거나 어쨌든)

주소는 컨트롤러를 타는주소 (cmd)

만약 Action이 있다면 자바스크립트를 이용하자(히스토리백, 메시지창, 페이지이동 효과 등의 기능을 쓸 수 있다.)

 

F12에서 Application을 보면 JSESSIONID가 보인다

세션아이디를 지우면 다른 접속자라고 인식한다

 

UsersLoginProcAction

 

 

 

 

 

 

 

 

'Web > Jsp' 카테고리의 다른 글

이클립스 톰캣 서버 충돌 날 경우 해결법 링크  (0) 2020.05.29
include 하는 두가지 방법 // include jsp // include file  (0) 2020.05.29
MVC패턴 회원가입 구조 예 // 블로그 만들기 1  (0) 2020.05.28
200528 MVC2 / context.xml / Repository / historyback  (0) 2020.05.28
JSP MVC 패턴  (0) 2020.05.27

+ Recent posts

티스토리툴바