<!-- HTML -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<link rel="stylesheet" type="text/css" href="../static/mycss.css">
</head>
<body>
<div class="login-box">
<h1>로그인 페이지</h1>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>
지금 만들어진 로그인 페이지는 너무나 단순하다. 일단 화면의 왼쪽 위에 위치하고 있기 때문에, 시각적으로 좋아 보이지 않는다. 먼저 로그인 페이지의 div 부분을 가운데로 옮긴다. 일단 가운데 정렬을 하기 위해서, 내가 사용하고 있는 로그인 창의 크기를 알기 위해서 background-color 키워드를 이용해서, 영역의 색을 칠해준다.
/* CSS */
.login-box {
background-color: red;
}
이 상태를 보면, 현재 로그인 창의 가로길이는 화면 전체를 의미한다. 즉, 로그인 창의 크기를 조절할 필요가 있다.
.login-box {
background-color: red;
width : 240px;
height : 200px;
}
이제 로그인 박스를 가운데로 옮겨주자.
찾아보면 여러가지 방법으로 가운데 정렬하는 방법이 많은데, 여기서는 margin을 이용한 방법을 사용하였다.
margin: auto;margin은 워드 프로세서의 들여쓰기 방식과 비슷하다고 생각한다. 현재 위치한 position 값에서 margin에 설정한 값만큼 이동 시켜주는 것이다. 여기서는 auto 키워드를 사용했는데, 이 auto 키워드는 가능한 많이를 표현해주는 것이고, margin은 기본적으로 4가지의 값을 가지는데, margin-left의 값과 margin-right의 값이 같아지는 지점이 가능한 많이 밀어주는 것이기 때문에, 중앙에 정렬이 되는 것이다.
이제 단색의 배경을 제거해주면 중앙에 정렬된 로그인 페이지가 등장한다.
'HTML,CSS,JavaScript' 카테고리의 다른 글
| 08. CSS, 로그인 페이지 완성하기 (0) | 2022.11.04 |
|---|---|
| 07. CSS, 배경 이미지 추가하기 (0) | 2022.11.04 |
| 05. CSS, 사용하기 (0) | 2022.11.03 |
| 04. CSS, 기초 (0) | 2022.11.03 |
| 03. HTML, 본문 (0) | 2022.11.03 |