Html/Css를 사용하여 로그인 양식 만들기
10773 단어 100daysofcodehtmlcss
1일차: 처음 학교에 갔던 날 ... 선생님이 많은 것을 가르치고 집에 돌아와서 다음과 같이 숙제를 했습니다. 숙제하기 Html + Css를 사용하여 양식 로그인 만들기
먼저 위의 인터페이스를 보고 다음과 같이 코드를 구현했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Login</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
</head>
<body>
<div class="form_hoa">
<div class="box_login">
<form action="" method="POST">
<h2>Login Cpanel</h2>
<div class="row-item">
<label for="email">Email</label>
<input type="email" name="email" placeholder="Enter Email" />
</div>
<div class="row-item">
<label for="password">Password</label>
<input type="password" name="password" placeholder="Enter Password" />
</div>
<div class="row-item">
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
위의 코드는 폼 html로 작성하고 동시에 구글 폰트 라이브러리를 삽입하여 폰트를 예쁘고 예쁘게 만들어주는데, 일반적으로 인터페이스가 안좋아서 다들 못생겼다고 느끼실거에요 :)
다음으로 위의 양식 로그인용 CSS를 다음과 같이 작성합니다.
*{margin:0;padding:0}
body{
width:100%;
margin: 0 auto;
max-width: 1350px;
font-family: 'Oswald', sans-serif;
background: #F0E4E4;
}
.form_hoa{
width: 40%;
margin: auto;
}
.form_hoa>.box_login{
width: 100%;
margin-top: 30%;
background-color: #d5d5d5;
box-shadow: 0 0 2px #000;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
}
.box_login form h2{
text-align: center;
color:#000;
font-size: 30px;
}
.box_login form>div{
padding: 5px 0px;
}
.box_login form label{
padding: 3px 0;
display: block;
font-weight: bold;
}
.box_login form input{
width: 100%;
border:none;
background-color: #fff;
padding: 15px;
border-radius: 5px;
box-sizing: border-box;
}
.box_login form button{
width: 100%;
border:none;
background: #333;
color:#fff;
padding: 11px;
border-radius: 5px;
box-sizing: border-box;
text-align: center;
font-size: 20px;
}
좋아, 그게 다야, HTML/CSS 일 뿐이므로 나 같은 초보자에게는 상당히 복잡합니다. 일반적으로 괜찮습니다 (Day 1 #100DaysOfCode )
포스트: Create a Login Form Using Html/Css
Reference
이 문제에 관하여(Html/Css를 사용하여 로그인 양식 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/skipperhoa/create-a-login-form-using-html-css-4i67텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)