원래 과제는 로그인 페이지 만들기 임
index.html 코드
<!DOCTYPE html>
<html>
<head>
<title>버튼 디자인</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<div class="login-form">
<form>
<input type="text" name="email" class="text-field" placeholder="아이디"><br>
<input type="password" name="password" class="text-field" placeholder="비밀번호"><br>
<input type="submit" value="로그인" class="submit-btn">
</form>
<div class="links">
<a href="#">비밀번호를 잊어버리셨나요?</a>
</div>
</div>
</body>
</html>
styles.css 코드
* {
box-sizing: border-box;
font-family: 'Noto Sans KR', sans-serif;
}
body {
margin: 0;
background-color: #1BBC9B;
}
.login-form {
padding: 20px;
background-color: #EEEFF1;
width: 300px;
display: block;
margin: 50px auto auto auto;
border-radius: 5px;
}
.text-field {
font-size: 14px;
border-style: none;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
width: 260px;
color: #9B9B9B;
}
.submit-btn {
font-size: 14px;
background-color: #1BBC9B;
border-style: none;
padding: 10px;
margin: auto auto 20px auto;
border-radius: 5px;
width: 260px;
color: white;
}
.submit-btn:hover {
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
}
.links {
text-align: center;
}
.links a {
font-size: 12px;
color: #9B9B9B;
}
https://bakey-api.codeit.kr/web/enrollments/5f6c3858ee49c8695c63de53/lessons/624/index.html
버튼 디자인
bakey-api.codeit.kr
이걸 이름점 보는 페이지로 바꿔보았다 ㅋㅋ
<!DOCTYPE html>
<html>
<head>
<title>로그인</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<h1><i>흥미딘딘한</i> 이름점 보기~!</h1>
<div class="login-form">
<form>
<input type="text" name="email" class="text-field" placeholder="이름"> <br>
<input type="text" name="email" class="text-field" placeholder="상대방 이름"> <br>
<div class="submit-btn">
<a href="https://media.fmkorea.com/files/attach/new2/20210322/486616/3265746926/3470731859/d78b43952a3f0e33aeccfcca6640bc7d.gif.mp4?d">우리 궁합은?</a>
</div>
</form>
</div>
</body>
</html>
* {
box-sizing: border-box;
font-family: 'Noto Sans KR', sans-serif;
}
input {
border: none;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
text-align: left;
}
.links {
margin-bottom: 20px;
}
.login-form {
width: 300px;
height: auto;
margin:auto;
text-align: center;
background-color: #EEEFF1;
border-radius: 5px;
padding: 20px;
}
body {
margin: 0;
background-color: #1BBC9B;
}
h1 i {
color: green;
}
h1 {
color: black;
text-align: center;
}
.text-field {
font-size: 14px;
}
.submit-btn {
background-color: #1BBC9B;
width: 160px;
text-align: center;
border: none;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.submit-btn:hover {
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
}
a {
font-size: 14px;
color: white;
text-decoration: none;
}
}
https://bakey-api.codeit.kr/web/enrollments/5f6c3858ee49c8695c63de53/lessons/621/index.html
로그인
bakey-api.codeit.kr
'코린이의 코딩배우기' 카테고리의 다른 글
| [클라우드 컴퓨팅] (0) | 2022.01.10 |
|---|---|
| [17]Web App과 Native App (0) | 2022.01.01 |
| [16] OS : 애플리케이션을 도와주는 프로그램 (0) | 2021.12.26 |
| [15]애플리케이션 (0) | 2021.12.26 |
| [14]컴퓨터 사이언스의 기본기-(2) (0) | 2021.12.26 |
댓글