login 탬플릿 만들기 기본적인 디자인

script

by 2hansoul 2022. 1. 28. 18:01

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div_in{
    width: 74%;
    height: 105%;
    border: 2px solid white;
    padding-left: 7px;
    background-color: white;
}

.div_main{
    background-color: #f4f0f0bf;
    position: relative;
    width: 116%;
    height: 100%;
    margin-left: 238px;
	padding-top: 70;
}

.div_login{

}

.input_id{
}

.div_loginmain{
	border: 1px solid #212020;
    width: 28%;
    height: 56%;
    background-color: yellow;
    text-align: center;
    margin-left: 595px;
}

/*input 부분 */
.tempInput {
    border-top: 1px;
    border-left: 1px;
    border-right: 0px;
    width: 259px;
    height: 28px;
    margin-bottom: -7px;
	text-indent: 28px;
	background-color:yellow;
	border-color:black;
}

input:focus{

}
.tempInput1 {
    border-top: 1px;
    border-left: 1px;
    border-right: 0px;
    width: 259px;
    height: 28px;
    margin-bottom: 25px;
	text-indent: 28px; /*text입력시 공간 창출*/
	background-color:yellow;
	border-color:black;
	color: blue;

}


.imgmenu1{
	width: 23px;
    position: relative;
    top: 28px;
    right: 120px;
}



.imgmenu2{
   width: 26px;
    position: relative;
    top: 28px;
    right: 121px;
}

.id_rember{
margin-left: -132px;
margin-top: -10px;
}

.login_btn{
    width: 259px;
    height: 37px;
    border: solid;
    border-radius: 8px;
    background-color: #109b10;
    border-color: #109b10;
    font-family: 'Binggrae';
    font-size: 16px;
    color: white;
    font-weight: bolder;

}
input[type="checkbox"]{

    width: 28px;
    height: 15px;
    left: 2px;
    position: relative;
}
</style>
<script>

</script>
<div class="div_in">
  <div class="div_main">
    <div class="div_loginmain">
      <img  src="../images/menuicon/free-icon-unicorn-4584583.png" style="width: 100;padding-top: 42px;">
      <h2 style="margin-top: 14px;">LOG IN</h2>
      <div class="div_login">
        <form method="POST" name="myform" action="loginact.php" onsubmit="return check()">

        <img  id="loginIMG" src="../images/menuicon/free-icon-user-shape-25634.png" class="imgmenu1">

        <div class="input_id">
          <input type="text"  class="tempInput" name="id" id="id" placeholder="userid">
        </div>

        <img id="passIMG"src="../images/menuicon/premium-icon-padlock-3934062.png" class="imgmenu2">
        <div class="input_pass">
          <input type="password"  class="tempInput1" name="password" id="password" placeholder="password">
        </div>

        <div class="id_rember">
          <input type="checkbox"  name="idsave" id="idsave" class="">아이디 저장하기</input>
        </div>
        <div style="padding-top: 38px;padding-bottom: 10px;">
          <input type="submit" class="login_btn" id="" value="로그인">
        </div>
		<div>
		 <a class="" href="Idsearch.php" style="font-family: 'Binggrae';font-size: 15;">아이디찾기</a>
			<a class="" href="Idsearch.php" style="font-family: 'Binggrae';font-size: 15;">비밀번호찾기</a>
		<a class="" href="join.php" style="font-family: 'Binggrae';font-size: 15;">회원가입</a>
		</div>

        </form>
      </div>
    </div>
  </div>
</div>
</div>
</div>
</html>
<!--빈칸체크-->
<script>
function check() {

	var f = document.myform;


	if (f.id.value == "") {
		alert("아이디를 입력해주십시오");
		f.id.focus();
		return false;
	}

	if (f.password.value == "") {
		alert("비밀번호를 입력해주세요");
		f.password.focus();
		return false;
	}


}
<script>

1. text-indent: 28px; text입력하는 곳 공간 창출

2. input[type="checkbox"]{

    width: 28px;
    height: 15px;
    left: 2px;
    position: relative;
}

input 체크박스에만 css주기 위해 설정

'script' 카테고리의 다른 글

[js] javascript setInterval 타이머 설정해서 링크 이동 (0)	2022.06.09
?var = '날짜' img 이미지 적용하기 정적 컨텐츠 (0)	2022.02.10
javascript 쿽메뉴 만들기(쿽배너) (0)	2022.01.26
javascript 3자리 수 마다 콤마 찍기 (0)	2022.01.21
javascript 현재 날짜 출력하여 뿌려주기 (0)	2022.01.20