< 네이버 메인 페이지 만들기 >
- [Layout.jsp] : 네이버 메인 화면 레이아웃 만들기
> header, nav, sidebar, footer 등 jsp 파일 action tag로 연결
|
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>
<html>
<head>
<meta charset="UTF-8">
<title>layout.jsp</title>
<link rel="stylesheet" href="../css/main.css" />
</head>
<body>
<%
String fname = "";
String fno = request.getParameter("fno");
out.println(fno);
if(fno == null) {
fname = "news.jsp";
} else {
fname = fno + ".jsp";
}
%>
<div id="container">
<!-- jsp action tag -->
<jsp:include page="header.jsp" /><!-- 단독태그! -->
<jsp:include page="nav.jsp" />
<jsp:include page="<%= fname %>" />
<jsp:include page="sidebar.jsp" />
<jsp:include page="footer.jsp" />
</div>
</body>
</html>
|
cs |
- [main.css] : 재사용 가능한 css 레이아웃 파일 만들기
=> layout.jsp의 style 안쪽 내용을 main.css에 잘라내서 붙이기
=> <link rel="stylesheet" href="../css/main.css" /> 추가
|
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
|
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
#container{
width: 1000px;
margin: auto;
/* border: 1px solid red; */
}
#nav {
padding-left: 100px;
margin: 0 30px;
}
a{
margin: 30px;
}
#leftcontents {
width: 70%;
float: left;
background: yellow;
}
#sidebar {
width: 30%;
float: right;
background: lightblue;
}
#login{
padding: 10px;
width: 100px;
text-align: center;
}
ol, ul {
list-style-type: none;
}
#footer{
/* float 효과를 없애기 위해서 사용 */
clear: both;
background: darkgray;
}
|
cs |
- [header.jsp] : 헤더 이미지 추가
=> action tag 추가!
|
1
2
3
4
5
6
7
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="header">
<img src="../images/naver.png" alt="" />
</div>
|
cs |
- [nav.jsp] : 토픽 별 버튼
|
1
2
3
4
5
6
7
8
9
10
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="nav">
<a href="layout.jsp?fno=news">뉴스</a>
<a href="layout.jsp?fno=enter">연예</a>
<a href="layout.jsp?fno=shopping">쇼핑</a>
<a href="layout.jsp?fno=movie">영화</a>
<a href="layout.jsp?fno=cook">요리</a>
<a href="layout.jsp?fno=ai">AI</a>
</div>
|
cs |
- [newsjsp] : 뉴스 화면
|
1
2
3
4
5
6
7
8
9
10
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="leftcontents">
<h1>뉴스</h1>
<ol>
<li>로또 1등 당첨자 1000만명</li>
<li>우리 회사에 입사해주세요 제발..</li>
<li>1년에 300일 휴일</li>
</ol>
</div>
|
cs |
- [sidebar.jsp] : 사이드 로그인 창
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="sidebar">
<div id="login">
<form action="loginOk.jsp">
<table>
<tr>
<td>ID</td>
<td><input type="text" name="id" id="" /></td>
</tr>
<tr>
<td>PW</td>
<td><input type="text" name="pw" id="" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="로그인" /> <input
type="button" value="회원가입" /></td>
</tr>
</table>
</form>
</div>
</div>
|
cs |
- [footer.jsp] : 아래 레이아웃
ㅇㄹㅇㄹ
|
1
2
3
4
5
6
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="footer">
<span>짝퉁쇼핑몰</span> 없는 거 빼고 다 있음 copyright © <br /> 2022~2023
all rights reserved. 사장님이 미쳤어요 !!!
</div>
|
cs |
* 토픽별 페이지 내용 채우기 (버튼 클릭하면 전환되게)
- [shopping.jsp]
|
1
2
3
4
5
6
7
8
9
10
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="leftcontents">
<h1>쇼핑</h1>
<ol>
<li>샤땡 눈물의 정리 98% 세일</li>
<li>에르* 99.9% 할인</li>
<li>구* 눈물의 바겐세일</li>
</ol>
</div>
|
cs |
- [enter.jsp]
|
1
2
3
4
5
6
7
8
9
10
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="leftcontents">
<h1>연예</h1>
<ol>
<li>A군 음주운전 물의</li>
<li>B군 노래를 잘 불러</li>
<li>C군 해외 활동 중...</li>
</ol>
</div>
|
cs |
- [movie.jsp]
|
1
2
3
4
5
6
7
8
9
10
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="leftcontents">
<h1>영화</h1>
<ol>
<li>웅남이 베트남에서 흥행</li>
<li>C*V 영화 티켓 500원 ...</li>
<li>블라블라~~~</li>
</ol>
</div>
|
cs |
- [cook.jsp]
|
1
2
3
4
5
6
7
8
9
10
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="leftcontents">
<h1>요리</h1>
<ol>
<li>짬뽕 비법 소스 공개</li>
<li>라면 레시피</li>
<li>고가의 김밥</li>
</ol>
</div>
|
cs |
'web' 카테고리의 다른 글
| [jsp] 글 작성 게시물 만들기 (0) | 2023.04.30 |
|---|---|
| [jsp] 쇼핑몰 (제품 리스트/ 제품 상세 페이지/ 장바구니 만들기/ 우편번호 찾기) (0) | 2023.04.30 |
| [jsp] cookie 처리(생성, 읽기, 삭제) + 자바스크립트로! (0) | 2023.04.30 |
| [jsp] jsp 파일 불러오기 - include & action tag (0) | 2023.04.30 |
| [jsp] VO/DAO 실습(Emp/EmpDept) (0) | 2023.04.30 |