[JSP] vscode로 JSP 작업환경세팅 & header / footer 연결

jsp로 header, footer 연결하기

메인 html에 header / footer 따로 떼서 붙일 수 있는 방법은 jquery의 include방법밖에 찾지 못했다.
(이것도 로컬이 아닌 서버 환경에서만 볼 수 있음.)

jsp도 물론 서버에서만 확인 가능하지만 jquery가 아닌 jsp로 직접 header, footer를 따로 만들어서 떼는 방법을 알아보자.

세팅
1. VScode 필요.
2. tomcat 설치.
3. 그외 나머지는 vscode의 확장 프로그램으로 설치.

세팅 - tomcat 설치.

vscode로 JSP 환경구성을 하기 위해서는 tomcat 설치가 필요하다.

아래 블로그를 보고 순서대로 설치.

https://nevertrustbrutus.tistory.com/245

header / footer jsp 로 나누기

일단 내가 작업할 경로는 tomcat_vs 폴더에서 작업

.
└── tomcat_vs
    ├── index.jsp
    ├── sub.jsp
    ├── header.css
    ├── footer.css
    └── common
        ├── header.jsp
        ├── footer.jsp
        └── common.css

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="common/common.css">
</head>
<body>
    <header>
        <jsp:include page="common/header.jsp" />
    </header>
    <main>
        <h1>index.jsp 파일입니다.</h1>
        <a href="sub.jsp">sub.jsp이동</a>
    </main>
    <footer>
        <jsp:include page="common/footer.jsp" />
    </footer>
</body>
</html>

sub.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sub</title>
    <link rel="stylesheet" href="common/common.css">
</head>
<body>
    <header>
        <jsp:include page="common/header.jsp" />
    </header>
    <main>
        <h1>sub.jsp 파일입니다.</h1>
        <a href="index.jsp">index.jsp이동</a>
    </main>
    <footer>
        <jsp:include page="common/footer.jsp" />
    </footer>
</body>
</html>

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link rel="stylesheet" href="../header.css">
<h1>header.jsp 파일입니다.</h1>
<ul>
    <li>header</li>
    <li>header</li>
    <li>header</li>
    <li>header</li>
    <li>header</li>
</ul>

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link rel="stylesheet" href="../footer.css">
<h1>footer.jsp 파일입니다.</h1>
<ul>
    <li>footer</li>
    <li>footer</li>
    <li>footer</li>
    <li>footer</li>
    <li>footer</li>
    <li>footer</li>
</ul>

common.css ==> index.jsp에 링크

@charset "utf-8";
* { margin: 0; padding: 0; box-sizing: border-box; }
li { list-style: none; }
/* header */
ul li { display: inline-block; color: #222; }

/* main */
h1 { color: green; }

header.css ==> header.jsp에 include

h1 { color: red; }

footer.css ==> footer.jsp에 include

h1 { color: orange; }

결과

footer.css의 마지막 h1 { color: orange; }가 모두 적용되었다.

페이지 소스를 보면 css가 모두 걸려있으므로 공통된 태그나 클래스는 가장 아래에 있는 footer.css에 적용된 스타일로 처리된다.

[JSP] vscode로 JSP 작업환경세팅 & header / footer 연결

세팅 - tomcat 설치.

header / footer jsp 로 나누기

결과

참고

티스토리툴바