<![CDATA[
<div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/p1GmFCGuVjw?si=VK-hKaBg__PiUO1c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/p1GmFCGuVjw?si=VK-hKaBg__PiUO1c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML tag 로그인 및 등록으로 웹사이트를 만드는 방법</b></span></p><p><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!-- Coding By CodingNepal - codingnepalweb.com --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  <head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>Website with Login & Registration Form</title> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- Unicons --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="<a href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" target="_blank" class="ke-link">https://unicons.iconscout.com/release/v4.0.0/css/line.css</a>" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> <style> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Import Google font - Poppins */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@import‎‎ url("<a href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap</a>"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>* { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  box-sizing: border-box; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-family: "Poppins", sans-serif; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.header { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position: fixed; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  height: 80px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  z-index: 100; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 0 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.nav { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  max-width: 1100px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin: 0 auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.nav, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.nav_item { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  height: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  justify-content: space-between; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.nav_logo, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.nav_link, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.button { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.nav_logo { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 25px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.nav_item { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  column-gap: 25px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.nav_link:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #d9d9d9; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.button { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 6px 24px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border: 2px solid #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: transparent; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-radius: 6px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.button:active { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transform: scale(0.98); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* Home */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  height: 100vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background-image: url("bg.jpg"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background-size: cover; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background-position: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home::before { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  content: ""; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  height: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background-color: rgba(0, 0, 0, 0.6); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  z-index: 100; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  opacity: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  pointer-events: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transition: all 0.5s ease-out; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home.show::before { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  opacity: 1; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  pointer-events: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* From */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form_container { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position: fixed; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  max-width: 320px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  top: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  left: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transform: translate(-50%, -50%) scale(1.2); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  z-index: 101; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 25px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-radius: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  box-shadow: rgba(0, 0, 0, 0.1); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  opacity: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  pointer-events: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transition: all 0.4s ease-out; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.home.show .form_container { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  opacity: 1; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  pointer-events: auto; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transform: translate(-50%, -50%) scale(1); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.signup_form { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form_container.active .signup_form { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form_container.active .login_form { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form_close { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  top: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  right: 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #0b0217; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 22px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  opacity: 0.7; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form_container h2 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 22px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #0b0217; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input_box { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-top: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  height: 40px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input_box input { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  height: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  outline: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 0 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #333; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transition: all 0.2s ease; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-bottom: 1.5px solid #aaaaaa; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input_box input:focus { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-color: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input_box i { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  top: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  transform: translateY(-50%); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #707070; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input_box i.email, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input_box i.password { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  left: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input_box input:focus ~ i.email, </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input_box input:focus ~ i.password { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.input_box i.pw_hide { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  right: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 18px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.option_field { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-top: 14px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  justify-content: space-between; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form_container a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form_container a:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  text-decoration: underline; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.checkbox { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  column-gap: 8px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  white-space: nowrap; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.checkbox input { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  accent-color: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.checkbox label { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  cursor: pointer; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  user-select: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  color: #0b0217; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.form_container .button { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  background: #7d2ae8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-top: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding: 10px 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-radius: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.login_signup { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  font-size: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-top: 15px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></style> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  <body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- Header --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <header class="header"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      <nav class="nav"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <a href="#" class="nav_logo">CodingLab</a> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <ul class="nav_items"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <li class="nav_item"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="#" class="nav_link">Home</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="#" class="nav_link">Product</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="#" class="nav_link">Services</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <a href="#" class="nav_link">Contact</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          </li> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </ul> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <button class="button" id="form-open">Login</button> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      </nav> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </header> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <!-- Home --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <section class="home"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      <div class="form_container"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <i class="uil uil-times form_close"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <!-- Login From --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="form login_form"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <form action="#"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <h2>Login</h2> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="input_box"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <input type="email" placeholder="Enter your email" required /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <i class="uil uil-envelope-alt email"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="input_box"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <input type="password" placeholder="Enter your password" required /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <i class="uil uil-lock password"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <i class="uil uil-eye-slash pw_hide"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="option_field"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <span class="checkbox"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <input type="checkbox" id="check" /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                <label for="check">Remember me</label> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              </span> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <a href="#" class="forgot_pw">Forgot password?</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <button class="button">Login Now</button> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="login_signup">Don't have an account? <a href="#" id="signup">Signup</a></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          </form> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <!-- Signup From --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="form signup_form"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          <form action="#"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <h2>Signup</h2> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="input_box"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <input type="email" placeholder="Enter your email" required /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <i class="uil uil-envelope-alt email"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="input_box"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <input type="password" placeholder="Create password" required /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <i class="uil uil-lock password"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <i class="uil uil-eye-slash pw_hide"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="input_box"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <input type="password" placeholder="Confirm‎‎‎ password" required /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <i class="uil uil-lock password"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <i class="uil uil-eye-slash pw_hide"></i> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            </div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <button class="button">Signup Now</button> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="login_signup">Already have an account? <a href="#" id="login">Login</a></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>          </form> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </section> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script src="script.js"></script> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><script> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>const formOpenBtn = document.querySelector("#form-open"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  home = document.querySelector(".home"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  formContainer = document.querySelector(".form_container"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  formCloseBtn = document.querySelector(".form_close"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  signupBtn = document.querySelector("#signup"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  loginBtn = document.querySelector("#login"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  pwShowHide = document.querySelectorAll(".pw_hide"); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>formOpenBtn.addEventListener("click", () => home.classList.add("show")); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>formCloseBtn.addEventListener("click", () => home.classList.remove("show")); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>pwShowHide.forEach((icon) => { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  icon.addEventListener("click", () => { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    let getPwInput = icon.parentElement.querySelector("input"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    if (getPwInput.type === "password") { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      getPwInput.type = "text"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      icon.classList.replace("uil-eye-slash", "uil-eye"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    } else { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      getPwInput.type = "password"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      icon.classList.replace("uil-eye", "uil-eye-slash"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  }); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>signupBtn.addEventListener("click", (e) => { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  e.preventDefault(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  formContainer.classList.add("active"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>loginBtn.addEventListener("click", (e) => { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  e.preventDefault(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  formContainer.classList.remove("active"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  </body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html></b></span></p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="https://www.codingnepalweb.com/website-login-registration-form-html-css-javascript/" target="_blank" class="ke-link">https://www.codingnepalweb.com/website-login-registration-form-html-css-javascript/</a></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default" target="_blank" class="ke-link">https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default</a></b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> HTML tag 로그인 및 등록으로 웹사이트를 만드는 방법 </b></span></p>
<!-- -->
]]>
카페 게시글
♥☞코딩의 메뉴방◈▶
HTML tag 로그인 및 등록으로 웹사이트를 만드는 방법
gyun님
추천 0
조회 3
23.12.18 22:40
댓글 0
다음검색
