L05 Template

2016. 10. 26. 18:16ㆍProgramming/JSP

**배운 것**

1) header 붙이기

<header>
        <%@ include file="./layout/header.jsp" %>
    </header>


2) 자잘한 CSS 문법

같은 줄에 붙이기 + 마진, 보더, 패딩 설정

#header>.home_button{
    display: inline-block;
    margin: 5px 0;
    border: 1px solid gray;
    padding 5px 15px;


헤더의 메뉴바 li의 액션별(LINK/VISITED/HOVER/ACTIVE) 표시 변화 지정

#header>ul.menu_bar>li>a:LINK,





<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
31
32
<%@ 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>template를 알아보자</title>
</head>
<body>
    <!-- header: '명시적'으로 머리에 있는 template로 지정(<-> footer) -->
    <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



<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
<%@ 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></title>
<style type="text/css">
/* 
    # = id 선택자
    . = class 선택자
    > 하위 태그표시(붙은 태그)
    ' ' 하위 태그표시
    */
#header li {
    display: inline-block;
}
#header>.home_button {
    display: inline-block;
    margin: 5px 0; /* 시계 방향 순으로 지정 가능(북 동 남 서) */
    border: 5px solid;
    padding: 5px 15px;
}
#header>ul.menu_bar{
    margin: 10px 0 0 0;
    padding: 0;
    width: 100%;
    display: inline-block;        
    }
    
#header>ul.menu_bar>li{
    display: inline-block;
    width: 32%;
    text-align: center;
    }
    
#header>ul.menu_bar>li>a:LINK,
#header>ul.menu_bar>li>a:VISITED,
#header>ul.menu_bar>li>a:HOVER{
    color: #000;
    background-color: lavender;
}
#header>ul.menu_bar>li>a:ACTIVE
{
    text-decoration: none;
    color: black;
}
#header>.home_button{
    display: inline-block;
    margin: 5px 0;
    border: 1px solid gray;
    padding 5px 15px;
    }
#header>.home_button>a{
    color: red;
}
#header .fieldset.search{
    float: right;
    }
 
</style>
</head>
<body>
    <!--Header 내용: 프론트엔드 설정 + 프론트엔드 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="searchVal" value="">
                <button type="submit">검색</button>
            </form>
        </fieldset>
        <ul class="menu_bar"> <!-- 리스트를 표현할 때 사용 -->
            <li><a href="#">메뉴1</a>
            <li><a href="#">메뉴2</a>
            <li><a href="#">메뉴3</a>
        </ul>
    </div>
    <hr>
</body>
</html>
cs



<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
26
<%@ 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>
    <!--footer 내용: 회사정보 -->
    <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: emphasis(강조) -->
            <em>Copyrightⓒ</em><a href="">JSP_LESSON Corp.</a>
            <span>All Rights Reserved</span>
        </address>
    </div>
</body>
</html>
cs



'Programming > JSP' 카테고리의 다른 글

L06 세션으로 값 전달(2/2) ~로그인/로그아웃  (0) 2016.10.27
L06 세션으로 값 전달(1/2)  (0) 2016.10.27
L04 Redirect(페이지 넘기기)  (0) 2016.10.26
L03 서블릿 메소드(2/2)  (0) 2016.10.25
L03 서블릿 메소드(1/2)  (0) 2016.10.25

관련글

티스토리툴바