
w3.css
로그인 양식
CSS를 사용하여 반응형 로그인 양식을 만드는 방법을 알아보자.
로그인 폼을 만드는 방법
1단계) HTML 추가
컨테이너 안에 이미지를 추가하고 각 필드에 맞는 입력(매칭 라벨 포함)을 추가한다.
입력을 처리하기 위해 <form> 요소를 감싸자.
PHP 튜토리얼에서 입력을 처리하는 방법에 대해 자세히 알아볼 수 있다.
<form action="action_page.php" method="post"> <div class="imgcontainer"> <img src="img_avatar2.png" alt="Avatar" class="avatar"> </div> <div class="container"> <label for="uname"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required> <label for="psw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit">Login</button> <label> <input type="checkbox" checked="checked" name="remember"> Remember me </label> </div> <div class="container" style="background-color:#f1f1f1"> <button type="button" class="cancelbtn">Cancel</button> <span class="psw">Forgot <a href="#">password?</a></span> </div> </form>
2단계) CSS 추가
/* Bordered form */ form { border: 3px solid #f1f1f1; } /* Full-width inputs */ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /* Set a style for all buttons */ button { background-color: #04AA6D; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } /* Add a hover effect for buttons */ button:hover { opacity: 0.8; } /* Extra style for the cancel button (red) */ .cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } /* Center the avatar image inside this container */ .imgcontainer { text-align: center; margin: 24px 0 12px 0; } /* Avatar image */ img.avatar { width: 40%; border-radius: 50%; } /* Add padding to containers */ .container { padding: 16px; } /* The "Forgot password" text */ span.psw { float: right; padding-top: 16px; } /* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } }
기본 예시
예제 보기모달 로그인 폼을 만드는 방법
1단계) HTML 추가
<!-- Button to open the modal login form --> <button onclick="document.getElementById('id01').style.display='block'">Login</button> <!-- The Modal --> <div id="id01" class="modal"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span> <!-- Modal Content --> <form class="modal-content animate" action="/action_page.php"> <div class="imgcontainer"> <img src="img_avatar2.png" alt="Avatar" class="avatar"> </div> <div class="container"> <label for="uname"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required> <label for="psw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit">Login</button> <label> <input type="checkbox" checked="checked" name="remember"> Remember me </label> </div> <div class="container" style="background-color:#f1f1f1"> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> <span class="psw">Forgot <a href="#">password?</a></span> </div> </form> </div>
2단계) CSS 추가
/* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ padding-top: 60px; } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 5px auto; /* 15% from the top and centered */ border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button */ .close { /* Position it in the top right corner outside of the modal */ position: absolute; right: 25px; top: 0; color: #000; font-size: 35px; font-weight: bold; } /* Close button on hover */ .close:hover, .close:focus { color: red; cursor: pointer; } /* Add Zoom Animation */ .animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s } @-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)} }
⭐ 모달 콘텐츠 외부를 클릭하여 모달을 닫으려면 다음 자바스크립트를 사용할 수도 있다(단순히 “x” 또는 “취소” 버튼을 사용하여 닫는 것이 아니다).
예제
<script> // Get the modal var modal = document.getElementById('id01'); // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script>
기본 예시
예제 보기참고
W3C School - How TO - Login Form