클라이언트측(html) 서버측(jsp)로 나눠야함.
[makeUser.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MakeUser</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.content {
margin-top: 80px;
}
</style>
</head>
<body>
<!-- menu.html을 삽입할 컨테이너 -->
<div id="menu-container"></div>
<div class="content"></div>
<div class="container">
<h2>사용자 정보 입력</h2>
<form action="makeUserController.jsp" method="post">
<!-- 성별 선택 -->
<div class="mb-3">
<label class="form-label">성별</label><br>
<div class="form-check form-check-inline">
<input type="radio" id="male" name="gender" value="male" class="form-check-input" required>
<label for="male" class="form-check-label">남</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="female" name="gender" value="female" class="form-check-input" required>
<label for="female" class="form-check-label">여</label>
</div>
</div>
<!-- 나이 입력 -->
<div class="mb-3">
<label for="age" class="form-label">나이</label>
<input type="number" id="age" name="age" class="form-control" placeholder="나이를 입력해주세요." required>
</div>
<!-- 다음 버튼 -->
<button type="submit" class="btn btn-primary">다음</button>
</form>
</div>
<!-- jQuery 라이브러리 추가 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery load() 메서드를 이용해 menu.html 불러오기 -->
<script>
$(function() {
$("#menu-container").load("../../menu.html"); // menu.html의 실제 경로에 맞게 수정
});
</script>
</body>
</html>[menu.html]
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>menuBar</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.header {
width: 100%;
height: 60px; /* 고정 높이 */
position: fixed;
top: 0;
z-index: 1000;
background-color: #87CEEB; /* 하늘색 배경 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center; /* 수직 가운데 정렬 */
padding: 0 20px; /* 좌우 패딩 */
}
.nav-link {
color: #000000; /* 검정색 */
font-weight: bold; /* 진한 글씨 */
padding: 5px 10px;
font-size: 0.9rem;
font-family: "Noto Sans KR", sans-serif;
}
.nav-link:hover {
color: #000000;
}
.nav-link.active {
color: #000000;
background-color: #B0E0E6; /* 활성화 시 약간 연한 하늘색 배경 (옵션) */
}
.logo {
color: #000000; /* 검정색 */
font-size: 1.2rem;
font-weight: bold;
text-decoration: none;
margin: 0;
display: flex;
align-items: center;
}
.user-info {
color: #000000; /* 검정색 */
margin-left: auto;
display: flex;
align-items: center;
font-size: 0.9rem;
font-family: "Noto Sans KR", sans-serif;
}
.user-info span {
margin-right: 10px;
font-weight: bold;
font-family: "Noto Sans KR", sans-serif;
}
.logout-button {
padding: 5px 10px;
font-size: 0.9rem;
}
.content-container {
margin-top: 80px; /* 고정 헤더 공간 확보 */
display: flex;
justify-content: space-around;
align-items: flex-start;
height: calc(100vh - 140px);
}
</style>
</head>
<body>
<header class="pb-3 mb-4 border-bottom header">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="${pageContext.request.contextPath}/Main/main.jsp" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none logo">
<svg width="32" height="32" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
</svg>
<span class="fs-4 ms-2">Home</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item"><a href="/Dalle3Site/Main/main.jsp" class="nav-link">메인</a></li>
<li class="nav-item"><a href="/Dalle3Site/Main/Image/Create/makePic.jsp" class="nav-link">이미지 생성</a></li>
<li class="nav-item"><a href="/Dalle3Site/Main/Image/Show/showImage.jsp" class="nav-link">과거 이미지 확인</a></li>
<li class="nav-item"><a href="/Dalle3Site/Main/Image/Edit/editPic.jsp" class="nav-link">이미지 수정</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>※참고로 jsp->html형식으로 바꿀때 include file을 사용할 수 없다. 왜냐하면 이 형식은 jsp형식이기 때문에 javascript에서 함수를 만들어 다른 html을 가져와야 한다. 또한 html저장장소도 ${pageContent.request.conetxtPath}가 아닌 그냥 일반 저장위치로 해야한다. 왜냐하면 ${pageContent.request.conetxtPath}이건 서버측 위치이기 때문에 의미가 오히려 이상해진다.
'연구실 과제 > Dalle3' 카테고리의 다른 글
| Java기반 톰켓이서 파이썬파일 실행하는 방법 (1) | 2025.02.06 |
|---|---|
| centos7에서 flask서버를 통해 google tts api사용 (0) | 2025.02.06 |
| GET방식과 POST방식 차이 (0) | 2025.02.04 |
| 프러퍼티와 메서드 차이 (0) | 2025.02.04 |
| HTML과 JSP차이 (1) | 2025.02.04 |