아주 훌륭한 로그인창은 아니지만...로그인창을 만들어 보겠다
일단 로그인 창은 거의 form
태그를 사용하기 때문에 form
에 대해서 잘 알고 있어야 한다.
html구조부터 시작
<form action="">
<h1>로그인</h1>
<div class="form_group">
<label for="id">아이디
<input type="text" id="id">
</label>
</div>
<div class="form_group">
<label for="pw">비밀번호
<input type="text" id="pw">
</label>
</div>
<div class="form_group">
<button>로그인</button>
</div>
<div class="menu">
<a href="">가입하기</a>
<a href="">비밀번호를 잊어버리셨나요?</a>
</div>
</form>
form
태그로 모두를 감싸주고 안에는 form_group으로 또 하나씩 그룹지었다.
아이디 구역과 비밀번호 구역그리고 로그인 버튼까지 3구역으로 나누었고 마지막 밑에 있는 도움말은 menu라는 클래스로 구분하였다.
틀 완성
이제부턴 css
form {
margin: 60px auto;
width: 24rem;
}
.form_group{
margin-bottom: 0.5rem;
}
form
태그가 넓이를 가져야 로그인창을 가운데로 배치할 수 있기 때문에 넓이를 주고
margin: 0 auto
로 form이 가운데 올 수 있게 한다
margin: 0 auto는 콘텐츠가 창 가운데 올수 있게 한다.
하지만 넓이를 먼저 꼭!!! 주어야 한다는 점
각자의 form_group이 자리를 넉넉히 차지할 수 있도록 margin값을 주었다.
label{
display: block;
}
input {
box-sizing: border-box;
padding: 0.5rem;
width: 100%;
border: 1px solid #ddd;
}
label이 한줄을 다 차지할 수 있게 display:block
을 준다
그리고 input값에 box-sizing을 해줘야 form
태그 내에서 넓이를 딱 맞게 가질 수 있다.
button {
width: 100%;
padding: 0.5rem;
background: #000;
color: #fff;
font-size: 1rem;
border: none;
}
.menu{
display: flex;
justify-content: space-between;
align-items: center;
}
버튼에도 넓이를 100%준다. 그리고 버튼이 원래 가지고 있던 border는 없애준다.
밑에 도움말들은 menu라는 클래스로 감싸주었었는데 menu클래스에 flex를 주어서 justify-content: space-between
을 통해 두개의 아이템이 서로 간격을 가질 수 있게 한다.
완성😄