이전에 포스팅한 로그인 폼 페이지를 가지고 디자인을 변경해 보겠습니다. 디자인을 변경하기 전 부트스트랩이라는 웹 프레임워크를 사용하였습니다. 부트스트랩에 대하여 자세한 내용은 따로 섹터를 만들어 설명드리고 이 포스팅에서는 다루지 않겠습니다. 하지만 디자인 페이지에 적용한 부분에 대해서는 하단에 간략히 안내해 드리겠습니다.
페이지 관련 소스
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- 나의 스타일 추가 -->
<link rel="stylesheet" href="css/login.css?v=1234">
</head>
<body class="text-center">
<!-- html 전체 영역을 지정하는 container -->
<div id="container">
<!-- login 폼 영역을 : loginBox -->
<div id="loginBox">
<!-- 로그인 페이지 타이틀 -->
<div id="loginBoxTitle">CodeZone Login</div>
<!-- 아이디, 비번, 버튼 박스 -->
<div id="inputBox">
<div class="input-form-box"><span>아이디 </span><input type="text" name="uid" class="form-control"></div>
<div class="input-form-box"><span>비밀번호 </span><input type="password" name="upw" class="form-control"></div>
<div class="button-login-box" >
<button type="button" class="btn btn-primary btn-xs" style="width:100%">로그인</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>login.css
* { padding: 0; margin: 0; }
html, body {
height: 100%;
background: #ffffff;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
}
#loginBox {
width: 300px;
text-align: center;
background-color: #ffffff;
}
.input-form-box {
border: 0px solid #ff0000;
display: flex;
margin-bottom: 5px;
}
.input-form-box > span {
display: block;
text-align: left;
padding-top: 5px;
min-width: 65px;
}
.button-login-box {
margin: 10px 0;
}
#loginBoxTitle {
color:#000000;
font-weight: bold;
font-size: 32px;
text-transform: uppercase;
padding: 5px;
margin-bottom: 20px;
background: linear-gradient(to right, #270a09, #8ca6ce);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#inputBox {
margin: 10px;
}
#inputBox button {
padding: 3px 5px;
}
html 및 css 간단한 설명
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- 나의 스타일 추가 -->
<link rel="stylesheet" href="css/login.d.css?v=1234">login.html 소스에서 Bootstrap CSS 주석 코드 밑에 link 테그가 부트스트랩에서 사용되는 기본 디자인 스타일을 정의해 놓은 페이지입니다. bootstrap.min.css 는 개인적으로 추가한 CSS 파일 ( 여기서는 login.css ) 링크보다 상위에 적용되어야 합니다. 만약 두 개의 소스 위치가 바뀌게 된다면 개인이 지정한 스타일이 적용이 안 되는 경우가 생길 수 있기 때문입니다..
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>부트스트랩 자바스크립트 파일은 </body> 테그가 끝나기 전에 위치하도록 합니다.
페이지 안내 타이틀 CodeZone Login 에 단순히 검은색으로 적용하기보다는 그러데이션 효과를 css에서 적용해 보았습니다.
#loginBoxTitle {
color:#000000;
font-weight: bold;
font-size: 32px;
/* CodeZone Login 을 모두 대문자로 변경 */
text-transform: uppercase;
padding: 5px;
margin-bottom: 20px;
/* CodeZone Login 텍스트에 그라데이션 호과주기 */
background: linear-gradient(to right, #270a09, #8ca6ce);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
아이디와 input 폼을 input-form-box 클래스로 지정해 주고 기본적으로 수평 정렬되도록 display에 flex를 적용하였습니다.
.input-form-box {
display: flex;
margin-bottom: 5px;
}아이디와 비밀번호를 입력하는 input 폼에는 부트스트랩의 기본으로 디자인을 적용시켰습니다.
input 테그에 class="form-control"을 추가하는 것 만으로 input 폼의 부트스트랩의 기본 디자인이 적용됩니다.
<input type="text" name="uid" class="form-control">
하단의 로그인 버튼 또한 class="btn btn-primary btn-xs" 만을 추가해 주기만 해도 화면과 같은 부트스트랩 버튼 스타일이 자동으로 적용됩니다.
<button type="button" class="btn btn-primary btn-xs" style="width:100%">로그인</button>
아래 이미지는 부트스트랩 프레임워크에서 기본적으로 제공하는 버튼 디자인들입니다. class에 적용된 내용들을 수정해 보시면서 부트스트랩으로 디자인을 얼마나 손쉽게 변경할 수 있는지 경험해 보십시오.
이상 로그인 페이지에 부트스트랩을 이용하여 디자인을 적용해 보았습니다.
부트스트랩(Bootstrap)을 이용한 로그인 웹페이지 화면 구현 2
부트스트랩을 이용한 로그인 페이지 화면을 만들어 보았습니다. 로그인 박스 형태이며, 로그인 박스의 좌우 정렬은 중앙에 위치하도록 하였고 브라우저 상당에서부터 150px 정도에 위치하도록
codezone.tistory.com
댓글