IT story/JSP

[Jsp 강의] L07Template

jason719 2016. 10. 27. 16:08

L07Template

Header와 Footer에 대해 알아보자

아래와 같은 구조로 layout 폴더를 만들어 header와 footer를 생성한다.


main.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tamplate를 알아보자</title>
</head>
<body>
    <header><%-- "명시적"으로 머리에 있는 템플레이트로 지정 --%>
        <%@ include file="./layout/header.jsp"%>
    </header>
    <div id="mainContents">
        <h1>request 객체 정보를 출력해 보자</h1>
        <div class="contents container">
        <%-- class는 html에서 중복가능, 한 태그에 여러개 지정 가능 --%>
        <p><b>컨텍스트 패스 : </b><%=request.getContextPath()%></p>
        <p><b>요청한 방식    : </b><%=request.getMethod()%></p>
        <p><b>요청한 URL  : </b><%=request.getRequestURL()%></p>
        <p><b>요청한 URI  : </b><%=request.getRequestURI()%></p>
        <p><b>서버이름        : </b><%=request.getServerName()%></p>
        <p><b>프로토콜        : </b><%=request.getProtocol()%></p>
        
        </div>
    </div>
    <footer>
        <%@ include file="./layout/footer.jsp"%>
    </footer>
</body>
</html>
cs


/layout/header.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
    /*
    # = id 선택자
    . = class 선택자
    > = 하위 태그 표시 (붙은 태그)
    ' '= 하위의 모든 태그 선택
    */
    body{
        margin: 0;
    }
    #header>ul.menu_bar{
        margin: 10px 0 0 0;
        padding: 0px;
        width: 100%;
        display: inline-block;
    }
    #header>ul.menu_bar>li{
        display: inline-block;
        width: 32%;
        text-align: center;
    }
    #header>ul.menu_bar>li>a{
        display: inline-block;
        padding: 3px 15px;
        color: black;
        
    }
    #header>ul.menu_bar>li>a:HOVER{
        color: #000;
        background: lavender;
    }
    #header>.home_button>a:LINK,
    #header>.home_button>a:VISITED,
    #header>.home_button>a:HOVER,
    #header>.home_button>a:ACTIVE,
    
    #header>ul.menu_bar>li>a:LINK,
    #header>ul.menu_bar>li>a:VISITED,
    #header>ul.menu_bar>li>a:HOVER,
    #header>ul.menu_bar>li>a:ACTIVE{
        text-decoration: none;    
    }
    #header>.home_button{
        display: inline-block;
        margin: 5px 0px;
        border: 1px solid gray;
        padding: 5px 15px;
    }
    #header>.home_button>a{
        color: lavender;
    }
    #header>.home_button:HOVER{
        background: pink;
    }
    #header fieldset.search{
        float: right;
    }
</style>
</head>
<body>
    <%--Header는 FrontEnd 설정+ FrontEnd lib의 Link + 상단 메뉴 
        DIV는 만능 박스--%>
    <div id="header">
    <h1 class="home_button">
    <a href="/main.jsp">JSP 강의</a>
    </h1>
    <fieldset class="search" style="display: inline-block;">
        <legend>검색</legend>
        <form action="#"><%--action 미구현식 경로는 # --%>
            <input type="text" name="serchVal" value="">
            <button type="submit">검색</button>
        </form>
    </fieldset>
    <ul class="menu_bar"><%-- 리스트를 표현할 때 사용 --%>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
        <li><a href="#">메뉴3</a></li>
    </ul>
    </div>
    <hr>
</body>
</html>
cs


/layout/footer.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <%-- 회사정보 --%>
    <hr>
    <div id="footer">
        <ul>
            <li><a href="#">이용약관</a></li>
            <li><a href="#">개인정보 취급방침</a></li>
            <li><a href="#">고객센터</a></li>
        </ul>
        <address>
            <a href="#"><b>JSP_LESSON</b></a>
            <em>Copyright ⓒ</em><a href="#">JSP_LESSON Corp.</a>
            <span>ALL Rights Reserved.</span>
        </address>
    </div>
</body>
</html>
cs


저작자표시 변경금지

'IT story > JSP' 카테고리의 다른 글

[Jsp 강의] L09Cookie  (0) 2016.10.27
[Jsp 강의] L08Session  (0) 2016.10.27
[Jsp 강의] L06Forward  (0) 2016.10.27
[Jsp 강의] L05Redirect  (0) 2016.10.27
[Jsp 강의] L04JSP  (0) 2016.10.27

'IT story/JSP'의 다른글

  • 현재글[Jsp 강의] L07Template

관련글

티스토리툴바