본문 바로가기
JSP/기본다지기

JSP 5일차 필기 (Template)

姫鐘 2016. 10. 24. 16:36


페이지 출력 화면




코드


WebContent/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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<%@ 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{
        font-family: Meiryo, 굴림;
        margin: 0;
    }
    #header>ul.menu_bar{
        display: inline-block;
        margin: 10px 0 0 0;
        padding: 0;
        width: 100%;
        background: darkgray;
    }
    #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: #ffdead;
    }
    #header>ul.menu_bar>li>a:HOVER{
        color: #000;/*=#000000*/
        background-color: lavender;
    }
    #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;
        /*
        a태그는 글자속성이므로 블럭을 글자크기 만큼만 가진다.
        글자속성에 padding을 설정하든, margin을 설정하든 글자크기만 가지지만
        inline-block 설정을 지정하면 글자가 아닌 블럭으로 변하며,
        그 이후부터는 글자가 아닌 블럭으로 인식된다.
        
        li태그 안에 text속성이 있을 경우에 li태그는 안에 있는 text속성만 인식을 하여
        text속성에서 padding과 margin을 크게 설정하는 경우 li의 범위를 벗어났으나,
        text속성에 inline-block 설정을 지정하면 text가 아닌 block으로 인식하여
        내부에 존재하는 블록의 padding, margin크기에 맞추어 증가한다. 
        */
    }
    #header>.home_button{
        display: inline-block;
        margin: 5px 0px;
        border:1px solid gray;
        padding: 5px 15px;
        float: left;
        /*
        margin은 컨텐츠 바깥
        padding은 컨텐츠 안쪽
        */
    }
    #header>.home_button>a:LINK,
    #header>.home_button>a:VISITED,
    #header>.home_button>a:HOVER,
    #header>.home_button>a:ACTIVE
    {
        text-decoration: none;
    }
    #header>.home_button>a{
        color: maroon;
    }
    #header>.home_button:HOVER{
        background:pink;
    }
    #header fieldset.search{
        text-align: left;
        display: inline-block;
        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">
            <legend>検索</legend>
            <form action="#"></form><!-- action 미구현시 경로는 # -->
                <input type="text" name="searchVal" value="">
                <button type="submit">検索</button>
        </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


WebContent/layout 폴더 내부

footer.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ 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">
    body{
        font-family: Meiryo, 굴림;
        text-align: center;
    }
</style>
</head>
<body>
    <!-- 회사정보 -->
    <hr>
    <h1>会社情報</h1>
</body>
</html>
cs


WebContent 폴더 내부

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
33
34
35
36
37
38
<%@ 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>
<style type="text/css">
    body{
        font-family: Meiryo, 굴림;
        text-align: center;
        background-color: lightblue;
    }
    #maindiv>.w3s>a:LINK,
    #maindiv>.w3s>a:ACTIVE,
    #maindiv>.w3s>a:VISITED
    {
        color: #dead00;
        text-decoration: none;
    }
    #maindiv>.w3s>a:HOVER{
        color:red;
        background:cyan;
    }
</style>
</head>
<body>
    <%@ include file="./layout/header.jsp" %>
    <h1>本文でございます。</h1>
    <div id="maindiv">
        <h3 class="w3s">
            <a href="http://www.w3schools.com/" target="_blank">www.w3schools.com</a><br>
            <a href="http://cbts.tistory.com/" target="_blank">IT日記帳</a>
        </h3>
    </div>
    <%@ include file="./layout/footer.jsp" %>
</body>
</html>

csㅇ


main.jsp에 header와 footer를 포함시키는 부분.

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

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

저작자표시 비영리 동일조건

'JSP > 기본다지기' 카테고리의 다른 글

JSP 6일차 필기 (Session)  (0) 2016.10.25
JSP 6일차 필기 (Template)  (0) 2016.10.25
JSP 5일차 필기 (Dispatcher)  (0) 2016.10.24
JSP 4일차 필기 (Redirect)  (0) 2016.10.21
JSP 4일차 필기 (간단한 Login 양식)  (0) 2016.10.21

'JSP/기본다지기' Related Articles

티스토리툴바