[포트폴리오 프로젝트 1] 프로젝트 구현

Notice

« 2025/04 »
일	월	화	수	목	금	토
		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

Tags more

Archives

Today

Total

관리 메뉴

I T H

[포트폴리오 프로젝트 1] 프로젝트 구현 - UI 템플릿 적용 본문

Spring MyPortfolio Project

[포트폴리오 프로젝트 1] 프로젝트 구현 - UI 템플릿 적용

thdev 2024. 1. 24. 10:12

앞서 진행한 스프링 프로젝트에 대한 기본적인 세팅 및 기능 테스트를 완료한 이후 본격적으로 웹 시스템 개발을 진행하고자 한다.

해당 문서는 스프링 프로젝트를 구현하기 위해 필요한 필수 라이브러리 및 Java Config를 통한 환경설정이 진행된 상태의 프로젝트를 복사하여 화면 구현에 중점을 둔다.
백엔드 구성은 스프링 프레임워크를 사용하고 Java Config를 통해 환경 설정을 진행한다.
프론트엔드 구성은 JSP, jQuery 기반으로 구성한다.

해당 프로젝트에는 아래와 같은 기능이 포함되어 개발될 예정이다.
- 회원가입 및 로그인
- 메인 페이지 : 포트폴리오 및 프로필
- 관리자 페이지 : 시스템 정보를 수정 관리하기 위한 페이지 구성 (사용자 관리, 프로필 관리)
- 게시판 : Q&A 형태의 게시판

디자인 및 퍼블리싱을 대체할 UI 템플릿 (무료 템플릿을 사용)을 하나 다운로드 받아서 사용할 것으로 구글이나 웹 서칭을 통해서 무료 템플릿을 구할 수 있다.
다운로드 받은 템플릿을 그대로 사용해도 되지만 스터디 목적으로 아래 기능이 포함되고자 한다.

- Carousel (캐러셀) 라이브러리를 이용한 메인 화면 내 다수의 이미지 반복 노출 기능 포함하여 화면을 구성
- 그리드 API를 통한 데이터 입/출력 : HTML 문법 중 table 태그를 대체할 라이브러리
- 관리자 기능 : 글 등록, 이미지 업로드 등의 관리자 기능이 포함된 관리자 메뉴 추가

[ 템플릿 적용 ]

- 무료 사용이 가능하면서 jQuery 기반으로 작성된 템플릿을 선정하여 다운로드 받는다.

- https://www.free-css.com/free-css-templates/page274/initio

Initio Free Website Template | Free CSS Templates | Free CSS

www.free-css.com

- 다운로드 받은 파일을 압축해제 하면 아래와 같은 형태로 구성이 되어 있다.

- 여기서 index 파일을 메인페이지로 활용할 것이며, 해당 페이지에서 사용되는 css 파일 및 js 스크립트 파일을 프로젝트에 복사하여 사용한다.

- 아래의 폴더 4개를 resources 폴더 아래에 위치시킨다.

- 이제 인덱스 (메인) 페이지를 프로젝트 메인 페이지로 적용하고자 하는데 단순 복사 붙여넣기가 아닌 css 경로 등 일부 경로 수정이 필요하며, top 영역 및 스크립트 태그 영역을 공통으로 관리하기 위해 별도의 파일로 세팅 후 include 하여 사용하는 방법으로 설정한다.

1. 압축 폴더 내의 메인 페이지인 index.html 파일의 내용 전체를 복사하여 프로젝트 내의 /src/main/webapp/index.jsp 내에 붙여넣기 한다.

2. 붙여넣기 완료 후 순차대로 아래 내용을 수정한다.

- Lang 언어셋을 en에서 kr로 변경

- 스크립트 및 css에서 "assets/"경로를 "resources"경로로 일괄 치환한다.

3. resources 경로 아래에 inc (include의 약자로 칭함) 폴더를 생성하고 header, footer 영역의 html 태그들을 담아 놓을 jsp 파일을 생성한다.

- header.jsp 파일에 아래 내용을 가져와서 붙여 넣는다.

- Index.jsp 파일의 상단 부분 중 <head> 태그를 가져오는 것이다

<head>
	<meta charset="utf-8">
	<meta name="viewport"    content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author"      content="Sergey Pozhilov (GetTemplate.com)">
	
	<title>Initio - Free, multipurpose html5 template by GetTemplate</title>

	<link rel="shortcut icon" href="resources/images/gt_favicon.png">
	
	<!-- Bootstrap -->
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css" rel="stylesheet">
	<!-- Icons -->
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
	<!-- Fonts -->
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alice|Open+Sans:400,300,700">
	<!-- Custom styles -->
	<link rel="stylesheet" href="resources/css/styles.css">

	<!--[if lt IE 9]> <script src="resources/js/html5shiv.js"></script> <![endif]-->
</head>

- footer.jsp 파일에도 위와 유사하게 아래 내용을 가져와서 붙여 넣는다.

<footer id="footer">
	<div class="container">
		<div class="row">
			<div class="col-md-3 widget">
				<h3 class="widget-title">Contact</h3>
				<div class="widget-body">
					<p>+234 23 9873237<br>
						<a href="mailto:#">some.email@somewhere.com</a><br>
						<br>
						234 Hidden Pond Road, Ashland City, TN 37015
					</p>	
				</div>
			</div>

			<div class="col-md-3 widget">
				<h3 class="widget-title">Follow me</h3>
				<div class="widget-body">
					<p class="follow-me-icons">
						<a href=""><i class="fa fa-twitter fa-2"></i></a>
						<a href=""><i class="fa fa-dribbble fa-2"></i></a>
						<a href=""><i class="fa fa-github fa-2"></i></a>
						<a href=""><i class="fa fa-facebook fa-2"></i></a>
					</p>
				</div>
			</div>

			<div class="col-md-3 widget">
				<h3 class="widget-title">Text widget</h3>
				<div class="widget-body">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, nihil natus explicabo ipsum quia iste aliquid repellat eveniet velit ipsa sunt libero sed aperiam id soluta officia asperiores adipisci maxime!</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, nihil natus explicabo ipsum quia iste aliquid repellat eveniet velit ipsa sunt libero sed aperiam id soluta officia asperiores adipisci maxime!</p>
				</div>
			</div>

			<div class="col-md-3 widget">
				<h3 class="widget-title">Form widget</h3>
				<div class="widget-body">
					<p>+234 23 9873237<br>
						<a href="mailto:#">some.email@somewhere.com</a><br>
						<br>
						234 Hidden Pond Road, Ashland City, TN 37015
					</p>	
				</div>
			</div>

		</div> <!-- /row of widgets -->
	</div>
</footer>

<footer id="underfooter">
	<div class="container">
		<div class="row">
			
			<div class="col-md-6 widget">
				<div class="widget-body">
					<p>234 Hidden Pond Road, Ashland City, TN 37015 </p>
				</div>
			</div>

			<div class="col-md-6 widget">
				<div class="widget-body">
					<p class="text-right">
						Copyright &copy; 2014, Your awesome name here<br> 
						Design: <a href="http://www.gettemplate.com" rel="designer">Initio by GetTemplate</a> </p>
				</div>
			</div>

		</div> <!-- /row of widgets -->
	</div>
</footer>

- 2개의 파일을 분리하였으니 index.jsp 파일에는 해당 2개의 파일을 include 하여 사용하도록 설정한다.

- Header 영역

- Footer 영역

- Index.jsp 상단에 아래 내용을 추가하여 한글 저장이 가능하도록 한다.

[index.jsp]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="kr">

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

<body class="home">
<header id="header">
	<div id="head" class="parallax" parallax-speed="2">
		<h1 id="logo" class="text-center">
			<img class="img-circle" src="resources/images/guy.jpg" alt="">
			<span class="title">Anthony Russel</span>
			<span class="tagline">A mystery person<br>
				<a href="">anthony.russel42@example.com</a></span>
		</h1>
	</div>

	<nav class="navbar navbar-default navbar-sticky">
		<div class="container-fluid">
			
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
			</div>
			
			<div class="navbar-collapse collapse">
				
				<ul class="nav navbar-nav">
					<li class="active"><a href="index.html">Home</a></li>
					<li><a href="about.html">About</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">More Pages <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="sidebar-left.html">Left Sidebar</a></li>
							<li><a href="sidebar-right.html">Right Sidebar</a></li>
							<li><a href="single.html">Blog Post</a></li>
						</ul>
					</li>
					<li><a href="blog.html">Blog</a></li>
				</ul>
			
			</div><!--/.nav-collapse -->			
		</div>	
	</nav>
</header>

<main id="main">

	<div class="container">
		
		<div class="row section topspace">
			<div class="col-md-12">
				<p class="lead text-center text-muted">Let me tell you something my friend. hope is a dangerous thing. hope can drive a man insane. you <a href="about.html">measure</a> yourself by the people who measure themselves by you. it only took me <a href="sidebar-right.html">six days</a>. </p>
			</div>
		</div> <!-- / section -->
		
		<div class="row section featured topspace">
			<h2 class="section-title"><span>Services</span></h2>
			<div class="row">
				<div class="col-sm-6 col-md-3">
					<h3 class="text-center">Custom website design</h3>
					<p>I don't think they tried to market it to the billionaire, spelunking, base-jumping crowd. i did the same thing to gandhi, he didn't eat for three weeks. i once heard a wise man say there are no perfect men.</p>
					<p class="text-center"><a href="" class="btn btn-action">Read more</a></p>
				</div>
				<div class="col-sm-6 col-md-3">
					<h3 class="text-center">Wordpress integration</h3>
					<p>I don't think they tried to market it to the billionaire, spelunking, base-jumping crowd. i did the same thing to gandhi, he didn't eat for three weeks. i once heard a wise man say there are no perfect men.</p>
					<p class="text-center"><a href="" class="btn btn-action">Read more</a></p>
				</div>
				<div class="col-sm-6 col-md-3">
					<h3 class="text-center">Application development</h3>
					<p>I don't think they tried to market it to the billionaire, spelunking, base-jumping crowd. i did the same thing to gandhi, he didn't eat for three weeks. i once heard a wise man say there are no perfect men.</p>
					<p class="text-center"><a href="" class="btn btn-action">Read more</a></p>
				</div>
				<div class="col-sm-6 col-md-3">
					<h3 class="text-center">SEO &amp; SEM services</h3>
					<p>I don't think they tried to market it to the billionaire, spelunking, base-jumping crowd. i did the same thing to gandhi, he didn't eat for three weeks. i once heard a wise man say there are no perfect men.</p>
					<p class="text-center"><a href="" class="btn btn-action">Read more</a></p>
				</div>
			</div>
		</div> <!-- / section -->
	
		<div class="row section recentworks topspace">
			
			<h2 class="section-title"><span>Recent Works</span></h2>
			
			<div class="thumbnails recentworks row">
				
				<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
					<a class="thumbnail" href="sidebar-right.html">
						<span class="img">
							<img src="resources/images/s1.jpg" alt="">
							<span class="cover"><span class="more">See details &rarr;</span></span>
						</span>
						<span class="title">Sample title - big data solutions</span>
					</a>
					<span class="details"><a href="">Web design</a> | <a href="">Wordpress</a> | <a href="">Logotype</a></span>
					<h4></h4>
					<p></p>
				</div>
				
				<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
					<a class="thumbnail" href="sidebar-right.html">
						<span class="img">
							<img src="resources/images/s1.jpg" alt="">
							<span class="cover"><span class="more">See details &rarr;</span></span>
						</span>
						<span class="title">Pure ipsum - development services for people</span>
					</a>
					<span class="details"><a href="">Web design</a> | <a href="">Wordpress</a></span>
					<h4></h4>
					<p></p>
				</div>
				
				<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
					<a class="thumbnail" href="sidebar-right.html">
						<span class="img">
							<img src="resources/images/s1.jpg" alt="">
							<span class="cover"><span class="more">See details &rarr;</span></span>
						</span>
						<span class="title">Lorem studios - interior and patio design</span>
					</a>
					<span class="details"><a href="">Web design</a> | <a href="">Logotype</a></span>
					<h4></h4>
					<p></p>
				</div>

				<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
					<a class="thumbnail" href="sidebar-right.html">
						<span class="img">
							<img src="resources/images/s1.jpg" alt="">
							<span class="cover"><span class="more">See details &rarr;</span></span>
						</span>
						<span class="title">Pure ipsum - development services for people</span>
					</a>
					<span class="details"><a href="">Web design</a> | <a href="">Wordpress</a></span>
					<h4></h4>
					<p></p>
				</div>
				
				<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
					<a class="thumbnail" href="sidebar-right.html">
						<span class="img">
							<img src="resources/images/s1.jpg" alt="">
							<span class="cover"><span class="more">See details &rarr;</span></span>
						</span>
						<span class="title">Lorem studios - interior and patio design</span>
					</a>
					<span class="details"><a href="">Web design</a> | <a href="">Logotype</a></span>
					<h4></h4>
					<p></p>
				</div>

				<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
					<a class="thumbnail" href="sidebar-right.html">
						<span class="img">
							<img src="resources/images/s1.jpg" alt="">
							<span class="cover"><span class="more">See details &rarr;</span></span>
						</span>
						<span class="title">Lorem studios - interior and patio design</span>
					</a>
					<span class="details"><a href="">Web design</a> | <a href="">Logotype</a></span>
					<h4></h4>
					<p></p>
				</div>
			</div>

		</div> <!-- /section -->

		<div class="row section topspace">
			<div class="panel panel-cta"><div class="panel-body">
				<div class="col-lg-8">
					<p>A simple, nice-looking <b>call to action box</b>. Boxing is about respect. getting it for yourself, 
					and taking it away from the other guy. no, this is mount everest. </p>
				</div>
				<div class="col-lg-4 text-right">
					<a href="http://www.gettemplate.com/downloads/initio.zip " class="btn btn-primary btn-lg">Download template</a>
				</div>
			</div></div>
		</div> <!-- /section -->

		<div class="row section clients topspace">
			<h2 class="section-title"><span>Clients</span></h2>
			<div class="col-lg-12">
				<p>
					<img src="resources/images/sample_clients.png" alt="">
				</p>
			</div>
		</div> <!-- /section -->

	</div>	<!-- /container -->

</main>


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

<!-- JavaScript libs are placed at the end of the document so the pages load faster -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="resources/js/template.js"></script>

</body>
</html>

[ 결과 화면 ]

- 여기까지 설정이 완료된 이후 메인페이지에 접속한 경우 반영된 템플릿 화면이 정상적으로 출력되는지 확인한다.

- 다음 장으로 가기 전 데이터베이스 생성 및 설정 정보를 변경하여 준다.

'Spring MyPortfolio Project' 카테고리의 다른 글

[포트폴리오 프로젝트 6] 관리자메뉴 - 사용자관리 페이지 구현 (0)	2024.01.24
[포트폴리오 프로젝트 5] 로그인 페이지 구현(spring security포함) (0)	2024.01.24
[포트폴리오 프로젝트 4] 회원가입 페이지 구현 (0)	2024.01.24
[포트폴리오 프로젝트 3] 관리자 페이지 구현 - 프로필 업데이트 (2)	2024.01.24
[포트폴리오 프로젝트 2] 메인페이지 구현 : 캐러셀 사용 (2)	2024.01.24

'Spring MyPortfolio Project' Related Articles