<![CDATA[
<div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/KL4--AJrJHQ?si=ts_ogHWS1VmIuJGD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/etsPyHLON7g?si=yN6oC_tHb4R7817X" 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/KL4--AJrJHQ?si=ts_ogHWS1VmIuJGD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/etsPyHLON7g?si=yN6oC_tHb4R7817X" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p> </p><p style="text-align: start;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>웹 개발을 배우면서 로그인 및 등록 양식을 사용하여 웹 사이트를 만드는 것은 초보자부터 중급 웹 개발자에게 가장 적합한 프로젝트가 될 수 있습니다.</b></span></p><p style="text-align: start;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a style="color: #4db2ec;" href="https://codinglabyt.blogspot.com/search/label/HTML%20and%20CSS" target="_top" class="ke-link">오늘 이 블로그에서는 HTML, CSS</a> 및 <a style="color: #4db2ec;" href="https://codinglabyt.blogspot.com/search/label/HTML%20CSS%20%26%20JavaScript" target="_top" class="ke-link">JavaScript를</a> 사용하여 로그인 및 등록 양식이 포함된 웹사이트를 구축하는 방법을 배우게 됩니다 . <a style="color: #4db2ec;" href="https://codinglabyt.blogspot.com/search/label/Form%20Design" target="_top" class="ke-link">이전에 로그인 및 등록 양식을</a> 사용하여 많은 <a style="color: #4db2ec;" href="https://www.codingnepalweb.com/search/label/Website%20Design" target="_top" class="ke-link">웹사이트를</a> 디자인했지만 이들은 별도의 개체로 만들어졌습니다.</b></span></p><p style="text-align: start;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>주어진 웹사이트 이미지에서 볼 수 있듯이 오늘 만드는 방법을 배우게 될 로그인 및 가입 양식이 포함되어 있습니다. 웹사이트에는 로고가 있는 탐색 모음과 양식을 전환하는 버튼이 있는 탐색 링크가 있습니다. 로그인 및 등록 양식을 전환하려면 양식 하단에 버튼이 있습니다.</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>HTML CSS 및 JS로 된 로그인 및 등록 양식이 있는 웹사이트</b></span></p><p> </p><p><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> </head>   </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><style> </b></span><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><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>    </style> </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>  <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><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><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>index_tag</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>const formOpenBtn = document.querySelector("#form-open"), <br>  home = document.querySelector(".home"), <br>  formContainer = document.querySelector(".form_container"), <br>  formCloseBtn = document.querySelector(".form_close"), <br>  signupBtn = document.querySelector("#signup"), <br>  loginBtn = document.querySelector("#login"), <br>  pwShowHide = document.querySelectorAll(".pw_hide"); <br><br>formOpenBtn.addEventListener("click", () => home.classList.add("show")); <br>formCloseBtn.addEventListener("click", () => home.classList.remove("show")); <br><br>pwShowHide.forEach((icon) => { <br>  icon.addEventListener("click", () => { <br>    let getPwInput = icon.parentElement.querySelector("input"); <br>    if (getPwInput.type === "password") { <br>      getPwInput.type = "text"; <br>      icon.classList.replace("uil-eye-slash", "uil-eye"); <br>    } else { <br>      getPwInput.type = "password"; <br>      icon.classList.replace("uil-eye", "uil-eye-slash"); <br>    } <br>  }); <br>}); <br><br>signupBtn.addEventListener("click", (e) => { <br>  e.preventDefault(); <br>  formContainer.classList.add("active"); <br>}); <br>loginBtn.addEventListener("click", (e) => { <br>  e.preventDefault(); <br>  formContainer.classList.remove("active"); <br>});</b></span></p><p> </p><p> </p><p> </p><p> </p><p>How To Create A Website With Login And Register | HTML & CSS & Javascript</p>
<!-- -->
]]>
첫댓글 https://band.us/band/70730475
https://www.w3schools.com/css/tryit.asp?filename=trycss_default
https://www.google.com/search?client=avast-a-1&q=How+To+Create+A+Website+With+Login+And+Register+%7C+HTML+%26+CSS+%26+Javascript&ie=UTF-8
https://www.google.com/search?q=How+To+Create+A+Website+With+Login+And+Register+%7C+HTML+%26+CSS+%26+Javascript&client=avast-a-1&sca_esv=585196409&tbm=isch&sxsrf=AM9HkKkGlSXGfSd9ytqcCzhaCt8PV8NfrA:1700896015712&source=lnms&sa=X&ved=2ahUKEwjWyMO2y96CAxWOa_UHHdGDBWkQ_AUoAnoECAMQBA&cshid=1700896037968981&biw=1904&bih=942&dpr=1
https://www.codingnepalweb.com/website-login-registration-form-html-css-javascript/
!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>