페이지 출력 화면
코드
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 |