로그인 UI 만들기

 

html, css를 사용해 로그인 페이지 제작

 

Log in

이메일 email 비밀번호 lock

Forgot your password?

Sign Up

이름 person 이메일 email 비밀번호 lock

페이지 구성

 1. form 

정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다

https://developer.mozilla.org/ko/docs/Web/HTML/Element/form

<form> - HTML: Hypertext Markup Language | MDN

2.  fieldset

웹 양식의 여러 컨트롤과 레이블을 묶을 때 사용합니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset

<fieldset>: 필드셋 요소 - HTML: Hypertext Markup Language | MDN

3. label

tk용자 인터페이스 항목의 설명을 나타냅니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/label

<label> - HTML: Hypertext Markup Language | MDN

4. input

웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input\

<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN

5. 구글 아이콘 추가하는 방법

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

사이트에 들어가서 원하는 이모틴 선택 후 

 

head 추가

원하는 위치에 추가

 

6. button

클릭 가능한 버튼을 나타냅니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/button

<button>: 버튼 요소 - HTML: Hypertext Markup Language | MDN

 

@charset "UTF-8";
section{
  margin: 0 auto;
  width: 1200px;
}
.box{
  
  display: flex;
  justify-content: space-between;

}
div div{
  width: 550px;
  background-color: #fff;
  text-align: center;
  height: 500px;
  border-radius: 1rem;
  
  display: block;
}
div .login{

}
div .signup{


}
div h2{
  
  font-size: 1.5vw;
  font-weight: bolder;
  padding: 40px;
  
}
div form{

  display: flex;
  justify-content: center;
}
div form fieldset{

  border: none;
}
div form fieldset label{
  
}
div form fieldset input{
  height: 58px;
  width: 400px;
  border-radius: 0.5rem;
  display: block;
 

  font-size: 1vw;
  background-color: #f7f7f7;
}
div form fieldset span{
  position: relative;
  left: -173px;
  top: 48px;
  font-size: 29px !important;
}
div form fieldset button {
  
  padding: 15px 58px;
  margin: 20px 0;
  background: #000;
  border-radius: 0.5rem;
  color: #fff;
}
div p{
  
  color: #595959;
}