간단하게 메인페이지를 만들어 보았다.
추후 기능 구현을 완료하고 수정할 계획이다.
navigation.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/static/img/logo1.png" alt="스랩" width="140" height="69">
</a>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#" style="color: black;">기온별 추천 스타일</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: black;">스타일 랭킹</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: black;">커뮤니티</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: black;">마이페이지</a>
</li>
</ul>
</div>
</nav>
<img src="/static/img/logo2.png" class="img-fluid" alt="스랩">navigation 부분에는
로고 이미지를 a 태그로 감싸줘서 로고를 배치해주고,
ul 태그로 navigation 메뉴를 배치해줬다. 스타일은 간단하게 폰트 컬러만 바꿔줌.
nav 뒤에 빈 박스 이미지를 넣어줘서 레이아웃만 꾸며줬다.
이때 class 명을 img-fluid 로 하면 화면 양 옆이 꽉 찰 수 있다. (부트스트랩 서식 참고!)
이미지는 ppt 로 대충 만들었다 ㅎ
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<%@ include file="./module/head.jsp" %>
<style>
@font-face {
font-family: 'ONE-Mobile-POP';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
font-family: 'ONE-Mobile-POP';
font-size: 20px;
}
</style>
</head>
<body>
<header>
<!-- 상단 네비게이션 -->
<%@ include file="./module/navigation.jsp" %>
</header>
<div class="row"><br></div>
<form class="" style="margin: auto; width: 45%;">
<div class="" style="display: inline-block; margin: auto 3px; width: 180px;">
<p>오늘의 평균 기온은?</p>
</div>
<div class="" style="display: inline-block; margin: auto 3px; width: 300px;">
<input type="text" class="form-control" id="input">
</div>
<div class="" style="display: inline-block; margin: auto 3px; width: 150px;">
<button type="submit" style="margin: auto; background-color: #2B426B; color: white; border-radius: 4px 4px; padding: 5px 20px;">스타일 검색</button>
</div>
</form>
<footer>
<!-- 하단 푸터 -->
<%@ include file="./module/footer.jsp" %>
</footer>
</body>
</html>
웹폰트 적용은 style 태그 안에 눈누에서 복붙한 @font-face 태그를 넣어주고,
* { } 안에 font-family: 'ONE-Mobile-POP'; 를 넣어주면 된다.
무료 폰트 공유 사이트 눈누 참조 ↓
https://noonnu.cc/font_page/676
form 태그의 style 에 너비를 지정해주고, margin 값을 auto 로 적용해서가운데 정렬이 되도록 하였다.
메인페이지는 이렇게만 꾸며두고,
db 생성 및 스타일 검색 기능 구현은 다음 포스트에서 작성할 계획이다.
'spring' 카테고리의 다른 글
| 스프링 개발일지 (1) : 메인 페이지 초기 세팅 (0) | 2022.11.02 |
|---|---|
| 스프링 개발일지 (0) : 프로젝트 구상 (0) | 2022.11.02 |
