login.html
0.01MB
login2.html
0.00MB
login_img2.png
0.03MB
[html] 이미지 사이즈 조절
[html 이미지 사이즈를 내맘대로 조정하기] 블로그나 그밖에 편집기로 이미지 사이즈를 조정하실때 유용한 ...
blog.naver.com
https://www.codingfactory.net/10571
CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성
개요 background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat :
www.codingfactory.net
https://www.codingfactory.net/11004
HTML / img / 이미지 삽입하는 태그
img img는 HTML 문서에 이미지를 삽입하는 태그이다. 주요 속성은 다음과 같다. src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로
www.codingfactory.net
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<style>
body {
margin: 0;
padding: 0;
color: #b13614;
font-size: 15px;
/* 회원가입 */
}
input,
textarea,
button {
color: #4D4C7D;
font-size: 15px;
/* 신청하기 */
}
input:focus,
textarea:focus,
button:focus {
outline: none;
}
textarea {
resize:none;
/* 여러 줄의 긴 문장을 입력할 수 있는 양식 */
}
h3 {
margin: 0 0 12px 0;
color: #4D4C7D;
font-size: 30px;
text-align: center;
text-transform: uppercase;
}
p {
padding: 0 10px;
margin: 0 0 55px 0;
color: #4D4C7D;
text-align: center;
line-height: 1.8;
}
.wrapper {
min-height: 100vh;
display: flex;
align-items: center;
background-color: #363062;
}
.form-container {
max-width: 767px;
margin: auto;
padding: 60px 100px 50px;
background: #ffffff;
/* background-image: url("login_img2.png");
background-repeat: no-repeat; */
}
.form-container img{
/* border: 1px solid black; */
width: 50%;
margin: 0 10 0;
}
.form-group {
position: relative;
display: block;
margin-bottom: 48px;
}
.form-group span {
position: absolute;
top: 11px;
color: #4D4C7D;
font-size: 15px;
cursor: text;
transition: all 0.2s ease;
transform-origin: 0 0;
}
.form-group span.border {
position: absolute;
left: 0;
top: 41px;
width: 100%;
height: 2px;
display: block;
background: #4D4C7D;
transform: scaleX(0);
transition: all 0.15s ease;
}
.form-control {
width: 100%;
height: 43px;
display: block;
font-size: 15px;
border: none;
border-bottom: 2px solid #4D4C7D;
background: none;
}
.form-control:focus,
.form-control:valid {
border-bottom: 2px solid #ffffff;
}
.form-control:focus + span,
.form-control:valid + span {
transform: translateY(-22px) scale(0.8);
}
.form-control:focus + span + .border,
.form-control:valid + span + .border {
transform: scaleX(1);
}
textarea.form-control {
padding: 13px 1px;
}
button[type="submit"] {
width: 162px;
height: 51px;
display: flex;
align-items: center;
justify-content: center;
margin: 60px auto 0;
padding: 0;
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 4px;
background-color: #4D4C7D;
cursor: pointer;
text-transform: uppercase;
transition: background-color 0.2s linear;
}
button[type="submit"]:hover {
background-color: #827397;
color: #ededf5;
}
/* @media(max-width:767px) {
h3 {
font-size: 38px
}
p {
padding: 0;
font-size: 14px;
}
.wrapper {
background: #39459b;
border: 10px solid #4D4C7D;
}
.form-container {
width: 100%;
padding: 24px;
border: none;
box-shadow: none;
}
} */
</style>
</head>
<body>
<div class="wrapper">
<div class="form-container">
<img src="login_img3.png">
<form>
<h3>회원 가입</h3>
<p>양식에 맞추어 회원 정보를 입력해주세요.</p>
<div class="form-group">
<input type="text" class="form-control" required>
<span>이름 :</span>
<span class="border"></span>
</div>
<div class="form-group">
<input type="text" class="form-control" required>
<span>닉네임 :</span>
<span class="border"></span>
</div>
<div class="form-group">
<input type="text" class="form-control" required>
<span>이메일 :</span>
<span class="border"></span>
</div>
<div class="form-group">
<input class="form-control" required>
<span>비밀번호 :</span>
<span class="border"></span>
</div>
<button type="submit">신청하기</button>
</form>
</div>
</div>
</body>
</html>
+) 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<style>
@font-face {
font-family: 'GangwonEdu_OTFBoldA';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
margin: 0;
padding: 0;
font-family: 'GangwonEdu_OTFBoldA';
color: #b13614;
font-size: 15px;
/* 회원가입 */
}
input,
textarea,
button {
font-family: 'GangwonEdu_OTFBoldA';
color: #4D4C7D;
font-size: 15px;
/* 신청하기 */
}
input:focus,
textarea:focus,
button:focus {
outline: none;
}
textarea {
resize: none;
/* 여러 줄의 긴 문장을 입력할 수 있는 양식 */
}
h3 {
margin: 0 0 12px 0;
color: #4D4C7D;
font-size: 30px;
text-align: center;
text-transform: uppercase;
}
p {
padding: 0 10px;
margin: 0 0 55px 0;
color: #4D4C7D;
text-align: center;
line-height: 1.8;
}
.wrapper {
min-height: 100vh;
display: flex;
align-items: center;
background-color: #363062;
}
.form-container {
max-width: 767px;
margin: auto;
padding: 60px 100px 50px;
background: #ffffff;
border-radius: 30px;
background-image: url("login_img.png");
}
.form-container img {
/* border: 1px solid black; */
width: 50%;
margin: 0 10 0;
left: 50px;
bottom: 20px;
position: relative;
}
.form-group {
position: relative;
display: block;
margin-bottom: 48px;
}
.form-group span {
position: absolute;
top: 11px;
color: #4D4C7D;
font-size: 15px;
cursor: text;
transition: all 0.2s ease;
transform-origin: 0 0;
}
.form-group span.border {
position: absolute;
left: 0;
top: 41px;
width: 100%;
height: 2px;
display: block;
background: #4D4C7D;
transform: scaleX(0);
transition: all 0.15s ease;
}
.form-control {
width: 100%;
height: 43px;
display: block;
font-size: 15px;
border: none;
border-bottom: 2px solid #4D4C7D;
background: none;
}
.form-control:focus,
.form-control:valid {
border-bottom: 2px solid #ffffff;
}
.form-control:focus+span,
.form-control:valid+span {
transform: translateY(-22px) scale(0.8);
}
.form-control:focus+span+.border,
.form-control:valid+span+.border {
transform: scaleX(1);
}
textarea.form-control {
padding: 13px 1px;
}
button[type="submit"] {
width: 162px;
height: 51px;
display: flex;
align-items: center;
justify-content: center;
margin: 60px auto 0;
padding: 0;
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 30px;
background-color: #4D4C7D;
cursor: pointer;
text-transform: uppercase;
transition: background-color 0.2s linear;
}
button[type="submit"]:hover {
background-color: #827397;
color: #ededf5;
border-radius: 30px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="form-container">
<img src="login_img3.png">
<form>
<h3>회원 가입</h3>
<p>양식에 맞추어 회원 정보를 입력해주세요.</p>
<div class="form-group">
<input type="text" class="form-control" required>
<span>이름 :</span>
<span class="border"></span>
</div>
<div class="form-group">
<input type="text" class="form-control" required>
<span>닉네임 :</span>
<span class="border"></span>
</div>
<div class="form-group">
<input type="text" class="form-control" required>
<span>이메일 :</span>
<span class="border"></span>
</div>
<div class="form-group">
<input class="form-control" required>
<span>비밀번호 :</span>
<span class="border"></span>
</div>
<button type="submit">신청하기</button>
</form>
</div>
</div>
</body>
</html>