1-2.Boostrap써서 로그인 페이지 디자인하기

(이 글은 기본적으로 Eclipse, Sql Developer가 설치, 인코딩 처리, 서버 등록이 완료된 상태를 가정하고 작성되었습니다.)

• 사용 기술 : Java, JSP, Oracle, Bootstrap, CSS, HTML
• 오늘의 기술 : Bootstrap, CSS, HTML
• 사용 툴 : Eclipse

안녕하세요 하모예입니다. 

오늘은 프론트를 만들어 볼거에요.

보기 좋은 떡이 먹기도 좋듯, 훌륭한 기능을 수행하는 웹이 디자인까지 깔끔하다면 더할 나위 없이 좋겠지요. 

그러나 기본적인 HTML, CSS 만으로는 "호감형" 디자인을 구현하기가 쉽지 않습니다. 

이때 활용할 수 있는 좋은 라이브러리가 바로 Bootstrap, 부트스트랩입니다. 

부트스트랩을 활용하면 이쁜 디자인을 손쉽게 구현할 수 있을 뿐만 아니라 융통성있는 페이지를 제작할 수 있습니다.

 

CSS만으로 웹 페이지 디자인을 해본 경험이 있으신 분들은 아시겠지만,

웹 페이지를 열심히 만들었는데 해당 페이지를 띄우는 기계의 크기에 따라서 태그들의 위치가 바뀌거나,

가운데 정렬이 왼쪽정렬이 되어버린다거나 하는 불상사가 발생할 수 있습니다.

부트스트랩은 화면의 크기, 심지어는 모바일 환경까지 고려하여 구성되어 있기 때문에

부트스트랩을 활용하면 깔끔하게 해결할 수 있습니다.

 

부트스트랩은 이미 만들어져 있는 Template, 템플릿을 따와서 Customizing, 커스터마이징을 합니다. 

메뉴바, 로그인, 회원가입 등 기본적인 디자인은 부트스트랩 사이트에서 다운로드할 수 있습니다. 

https://getbootstrap.com/

Bootstrap

제가 설명해드리는 내용 외에 추가적으로 알고 싶은 내용이 있으시다면 w3schools를 참고하시면 좋습니다. 

https://www.w3schools.com/bootstrap/bootstrap_ver.asp

Bootstrap 3 or Bootstrap 4

다양한 템플릿을 제공하는 사이트들이 많지만,

세상에서 가장 간단한 로그인이 제목인 만큼 제일 깔끔하고 무난한 템플릿을 사용하겠습니다.

bootsnipp에 있는 login페이지 중에서 제가 생각했을때 가장 기본적인 템플릿을 따왔습니다.  

https://bootsnipp.com/snippets/7nk08

HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

HTML 코드를 복사하셔서 login.jsp의 body태그 안에 넣어주세요. 

이때 주의하실점은 최상단에 link태그는 head안에 넣어주셔야 한다는 점입니다.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="sidenav">
         <div class="login-main-text">
            <h2>Application<br> Login Page</h2>
            <p>Login or register from here to access.</p>
         </div>
      </div>
      <div class="main">
         <div class="col-md-6 col-sm-12">
            <div class="login-form">
               <form>
                  <div class="form-group">
                     <label>User Name</label>
                     <input type="text" class="form-control" placeholder="User Name">
                  </div>
                  <div class="form-group">
                     <label>Password</label>
                     <input type="password" class="form-control" placeholder="Password">
                  </div>
                  <button type="submit" class="btn btn-black">Login</button>
                  <button type="submit" class="btn btn-secondary">Register</button>
               </form>
            </div>
         </div>
      </div>

 

그다음 CSS 코드를 복사하셔서 head태그 안에 style태그를 만드셔서 넣어주세요. 

body {font-family: "Lato", sans-serif;}
.main-head{height: 150px;background: #FFF;}
.sidenav {height: 100%;background-color: #000;overflow-x: hidden;padding-top: 20px;}
.main {padding: 0px 10px;}
@media screen and (max-height: 450px) {.sidenav {padding-top: 15px;}}
@media screen and (max-width: 450px) {
	.login-form{margin-top: 10%;}
	.register-form{margin-top: 10%;}
}
@media screen and (min-width: 768px){
    .main{margin-left: 40%;}
	.sidenav{width: 40%;position: fixed;z-index: 1;top: 0;left: 0;}
    .login-form{margin-top: 80%;}
    .register-form{margin-top: 20%;}
}
.login-main-text{margin-top: 20%;padding: 60px;color: #fff;}
.login-main-text h2{font-weight: 300;}
.btn-black{background-color: #000 !important;color: #fff;}

HTML 코드와 css코드를 입력했다면 login.jsp에서 Ctrl + F11을 눌러서 서버를 올려봅시다. 

아니 이게 무슨 일이람... 웹으로 보고 싶었는데 Eclipse안에 화면이 떠버리네요

왜 이런일이 생기는 걸까요?

서버를 올렸을때 웹 페이지를 Chrome에서 볼 수 있도록 설정을 바꿔주면 문제는 아주 간단히 해결할 수 있습니다. 

아래 사진처럼 상단 메뉴바 [Window] - [Web Browser] - [Chrome]을 선택해주시고 다시 서버를 올려보면 

크롬에서 우리 페이지를 볼 수가 있어요. 

세상에서 가장 간단한 로그인 페이지의 프론트가 완성되었습니다.

다음 시간에는 클라이언트가 입력한 값을 서블릿에서 받아오는 법에 대해서 알아보겠습니다.