반응형
html 문서 중앙에 위치한 로그인 페이지를 만들어 보려 합니다.
문서의 디자인을 지정해주는 스타일이 길어질 것 같아서 따로 CSS문서를 만들고 html 페이지에서 불러들여 사용하는 방법으로 코딩을 하였습니다. 로그인 폼이 중앙에 위치하도록 display 속성에 flex 요소를 사용하였습니다.
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>
<!-- 외부에서 스타일 불러오기 -->
<link rel="stylesheet" href="css/login.css?v=1234">
</head>
<body>
<!-- html 전체 영역을 지정하는 container -->
<div id="container">
<!-- login 폼 영역을 : loginBox -->
<div id="loginBox">
<!-- 로그인 페이지 타이틀 -->
<p id="loginBoxTitle">로그인</p>
<!-- 아이디, 비번, 버튼 박스 -->
<div id="inputBox">
<p><span>아이디 </span><input type="text" name="uid" class="form-control"></p>
<p><span>비밀번호 </span><input type="password" name="upw" class="form-control"></p>
<button> 로그인 </button>
</div>
</div>
</div>
</body>
</html>login.css
* { padding: 0; margin: 0; }
html, body {
height: 100%;
background: #e4e4e4;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
}
#loginBox {
width: 300px;
text-align: center;
border: 2px solid #7baced;
background-color: #ffffff;
}
#loginBoxTitle {
background-color:#7baced;
color:#ffffff;
padding: 5px;
}
#inputBox {
margin: 10px;
}
#loginBox input {
width: 200px;
height: 24px;
margin: 0 0 5px 0;
padding: 2px 5px;
}
#inputBox span {
display: inline-block;
margin-right: 5px;
text-align: right;
width: 60px;
}
#inputBox button {
padding: 3px 5px;
}결과 페이지
코드 설명
html, body {
height: 100%;
background: #e4e4e4;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
}html 문서에서 container 박스의 높이를 100% 로 지정해 주었습니다. 여기서 html, body 도 height 값을 100%로 지정해 주는 것이 중요합니다 ( 이전 글 참조 )
#container의 display를 flex로 지정해 주었습니다. flex는 css3에서 새롭게 추가된 display 방식으로 레이아웃의 배치 기능에 중점을 두어 페이지 레이아웃 디자인을 쉽게 처리할 수 있게 되었습니다. flex에 대한 내용도 무척 방대함으로 기회가 되는대로 따로 설명드리겠습니다. 우선 container에 사용된 flex의 속성들을 간단히 설명해 드리겠습니다.
- display: flex;
- flex-direction: row;
: 아이템들이 배치되는 축의 방향성을 지정해 줍니다.
: row 아이템들을 가로로 방향으로 배치, column 아이템들을 세로 방향으로 배치합니다. - justify-content: center;
: 메인 축을 기중으로 아이템들을 정렬합니다. 메인 축이 (flex-direction: row :가로 기준 ) 이니까 가로 방향의 center에 위치합니다.
: felx-start, flex-end, center, space-between, space-arount, space-evenly 등 이 있습니다. - align-items: center;
: 수직축 방향으로 아이템들을 정렬시키는 속성입니다.
: stretch, flex-start, flex-end, center, baseline 등으로 변화를 줄 수 있습니다.
#container에서 위의 4가지 속성으로만 파란색 로그인 박스를 html 페이지 중앙에 위치시켰습니다.
나머지 스타일 소스들은 input의 사이즈 또는 여백 주기 등의 간단한 디자인적 요소입니다. 개인의 취향에 맞게 디자인을 변경해 사용하시면 됩니다.
반응형
'프로그램' 카테고리의 다른 글
| apache 2.2.25 와 PHP 5.2.17 구버전 컴파일 설치 운영 II (0) | 2022.11.12 |
|---|---|
| apache 2.2.25 와 PHP 5.2.17 구버전 컴파일 설치 운영 (1) | 2022.11.12 |
| [html, css] height 100% 높이 레이아웃 간단한 정리 (0) | 2022.10.25 |
| html 이란 무엇알까 배워야하는 프로그램일까? (0) | 2022.10.20 |
| [html, css] height 100% 높이의 레이아웃잡기 (0) | 2021.12.15 |
댓글