-
[1단계] Spring MVC 웹 앱 10일차. 부트스트랩 적용레거시/레거시-마이 셀파 리부트 2018. 6. 29. 13:56반응형
*본 글은 필자가 진행한 프로젝트 '마이 셀파'의 작업 일기입니다. 재밌게 봐주세요. 코드와 작업 진행 사항은 https://github.com/gurumee92/MySelpaReboot 에서 확인해볼 수 있습니다.
마이 셀파 리부트 1단계 Spring MVC를 활용한 웹 앱
10일차 부트스트랩 적용
오늘은 앱의 UI를 Bootstrap을 이용하여 업데이트 하는 작업을 진행하였습니다. 제가 디자인 쪽으로는 나갈 생각이 없기 때문에 부트스트랩에 간단히 알아보고 로그인 화면을 예제로 부트스트랩을 적용하는 방법을 간단히 살펴볼 예정입니다. 그럼 바로 시작하죠.
부트스트랩
부트스트랩이란 트위터에서 만든 jQuery 기반의 오픈 소스 웹 디자인 프레임워크의 일종입니다. 혹은 디자인 툴킷이란 말을 합니다. html/css/js를 거의 알고 있지 않아도 부트스트랩 홈페이지에서 어떻게 적용하는지만 살펴보고 웹의 디자인을 어느 정도 할 수 있습니다. 참고로 저 같은 경우가 바로 그 예에 해당하는 사람입니다. 잘 모르는데도 설계했던 화면이랑 거의 비슷하게 만들 수 있었습니다.
로그인 화면으로 보는 부트스트랩 적용
본격적으로 적용하기 전에 적용 이전의 화면과 설계 단계의 화면을 살펴보겠습니다.
적용 이전의 화면
설계한 화면
이제 부트스트랩을 적용해보겠습니다. 참고로 오늘은 html 파일만 변경하면 됩니다.
src/main/resources/templates/login/login.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- URL : http://localhost:8080/ -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>마이 셀파 리부트</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<style>
.page{
position:absolute;
top:40%;
left:50%;
transform:translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="page">
<div class="title">
<h1>MySelpa</h1>
</div>
<div class="content form-horizontal align-items-center">
<p th:if="${param.error}"class="text-danger">로그인 정보가 유효하지 않습니다.</p>
<form th:action="@{/}" method="post" >
<div class="form-group">
<label for="username" class="control-label">아이디</label>
<input type="text" id="username" name="username" class="form-control"/>
<label for="password" class="control-label">비밀번호</label>
<input type="password" id="password" name="password" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" value="로그인" class="btn btn-primary btn-block">
</div>
</form>
<div class="form-group">
<form th:action="@{/join}" method="get">
<input type="submit" value="회원가입" class="btn btn-primary btn-block">
</form>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>코드 설명
먼저 부트스트랩을 적용시키려면 다음의 코드를 헤더 부분에 삽입해 주어야 합니다.
<head>
//...
<meta name="viewport" content="width=device-width, initial-scale=1">
//...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">//
</head>이 부분은 CDN 방식으로 웹에서 부트스트랩 코드를 받아온다고 생각하면 됩니다. 이 방법은 서버를 실행하는 컴퓨터가 웹에 연결이 되어 있어야 코드가 적용됩니다. 그리고 부트스트랩 자바스크립트가 실행되도록 body 맨 밑에 다음의 코드를 넣으면 됩니다.
<body>
//...
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>이제 자신이 원하는 컴포넌트에 css를 적용시키면 됩니다,. 부트스트랩 홈페이지의 다음 부분을 참고해서 보면 됩니다,
저는 css만 적용하면 되기 때문에 css 부분을 선택해서 보았습니다. 로그인 화면에서는 form 태그가 주요 컨텐츠이기 때문에 우측 네비게이션에 폼이라는 것을 눌러서 사용법을 봤습니다.
그래서 다음을 적용시켜주면 됩니다.
<div class="content form-horizontal align-items-center">
<p th:if="${param.error}"class="text-danger">로그인 정보가 유효하지 않습니다.</p>
<form th:action="@{/}" method="post" >
<div class="form-group">
<label for="username" class="control-label">아이디</label>
<input type="text" id="username" name="username" class="form-control"/>
<label for="password" class="control-label">비밀번호</label>
<input type="password" id="password" name="password" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" value="로그인" class="btn btn-primary btn-block">
</div>
</form>
<div class="form-group">
<form th:action="@{/join}" method="get">
<input type="submit" value="회원가입" class="btn btn-primary btn-block">
</form>
</div>
</div>그리고 이 태그들을 모두 중앙에 위치시키기 위해 page라는 div 태그로 감싸고 css를 적용시켜주었습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- URL : http://localhost:8080/ -->
<head>
//...
<style>
.page{
position:absolute;
top:40%;
left:50%;
transform:translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="page">
<div class="title">
<h1>MySelpa</h1>
</div>
<div class="content form-horizontal align-items-center">//...
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>이제 어떻게 변했는지 살펴봅시다.
부트스트랩과 css 적용 전과 달리 화면 위치와 컨텐츠 모양이 바뀌었습니다. 꽤 설계한 화면과 비슷해졌죠? 이렇게 적용하면 됩니다. 다른 화면들도 마찬가지로 적용해주시면 됩니다.
마치며...
이렇게 해서 총 10일 간의 프로젝트를 무사히 마치게 되었습니다. 부트스트랩 부분은 워낙 관심 없는 분야라 대충한 감이 있지만 다른 부분들은 제가 아는 한 최대한으로 해서 어떻게 적용해 나갔는지 포스팅에 적으려고 노력했습니다만,,, 언제나 포스팅을 작성한 후에는 뭔가 항상 부족한 느낌을 지울 수 없네요. 아무튼 수고했으니 박수! 참고로 마이 셀파 프로젝트는 이게 끝이 아니라 몇 단계 프로젝트의 규모를 확장시키면서 더 진행할 예정입니다. 지금은 간단히 마이 셀파 웹 앱 부분이 끝났다고 할 수 있지요. 저는 한 1주 정도 조금 더 준비한 후에 프로젝트를 진행할 때 다시 포스팅을 올리겠습니다. 부족하지만 저의 포스팅을 봐주셔서 감사합니다. 제가 설명을 스킵한 곳도 많고 바뀐 부분도 많아서 코드는 최대한 깃헙을 참고해주세요.
참고!
현재 마스터 유저로 주차장을 검색할 때 absolute 설정 때문에 데이터가 많을 시에 스크롤이 안되는 문제가 있는데 이 부분에 대한 건 그냥 넘겼습니다. UI는 어렵네요...
'레거시 > 레거시-마이 셀파 리부트' 카테고리의 다른 글
[1단계] Spring MVC 웹 앱 9일차. 스프링 시큐리티의 적용 (0) 2018.06.28 [1단계] Spring MVC 웹 앱 7~8일차. 화면별 기능 구현(MVC +Thymeleaf) (0) 2018.06.27 [1단계] Spring MVC 웹 앱 6일차. JPA 코틀린 적용하기 (0) 2018.06.24 [1단계] Spring MVC 웹 앱 5일차. Spring Data JPA 적용 (0) 2018.06.22 [1단계] Spring MVC 웹 앱 4일차. Spring JDBC 테스트와 계층 별 클래스 작업 (0) 2018.06.21
