HTML, CSS, JavaScript를 사용하는 Django의 로그인 + 등록 페이지(파트 III)

시리즈의 마지막 게시물에서는 HTML, CSS 및 JavaScript를 함께 연결하겠습니다. JavaScript는 웹 사이트를 보다 동적이고 대화식으로 만드는 데 사용됩니다.

이 경우 Google 호스팅 라이브러리에서 jQuery 라이브러리를 사용하여 양식 간을 전환하는 방법을 추가합니다. jQuery는 이러한 특수 효과를 구현할 수 있는 Javascript 라이브러리입니다.

Javascript 코드를 구현하기 전에 HTML 및 CSS 파일 모두에 몇 줄의 코드를 추가해 보겠습니다.

Login_page.html

login_page.html을 열고 아래와 같이 두 단락 태그의 클래스 이름으로 "alternate"를 추가하여 코드를 수정합니다.

<!-- Login/Registration Page - HTML -->

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">

<div class="login">
    <div class="form">
        <form class="registration-form">
            <input type="text" placeholder="name" />
            <input type="password" placeholder="password" />
            <input type="text" placeholder="email" />
            <button>Create</button>
            <p class="alternate"><a href="#">Log In</a></p>
        </form>
        <form class="login-form">
            <input type="text" placeholder="username" />
            <input type="password" placeholder="password" />
            <button>Login</button>
            <p class="alternate"><a href="#">Register</a></p>
        </form>
    </div>
</div>

<!-- baltlogs.com -->

나중에 JavaScript를 사용하여 템플릿의 이 요소를 제어할 수 있도록 단락 태그에 대한 클래스 이름을 추가했습니다. CSS 파일에서 HTML 요소의 클래스 이름을 참조하여 HTML 템플릿의 스타일을 지정하는 방식과 유사한 방식으로 이 작업을 수행합니다. 또한 단락 태그 내부에는 일부 중첩된 하이퍼링크 태그(a)가 있습니다.

CSS 파일에 다음 코드를 추가하여 단락 태그와 중첩된 하이퍼링크 태그의 스타일을 지정해 보겠습니다.

로그인.css

/* path -> static/css/login.css */

@import url(https://fonts.googleapis.com/css?family=Lato:300);

.login {
  width: 500px;
  padding: 10% 0 0;
  margin: auto;
}

.form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  }

.form input {
    font-family: "Lato", sans-serif;
    outline: 0;
    background: #e7e4e4;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
  }

.form button {
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #262725;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
  }

.form button:hover,.form button:active,.form button:focus {
    background: #3d3d3d;
  }

.form .alternate {
    margin: 20px 0 0;
    font-size: 16px;
  }
.form .alternate a {
    color: #3d3d3d;
    text-decoration: underline;
  }
.form .registration-form {
    display: none;
  }

body {
    background: #3d3d3d; 
    font-family: "Lato", sans-serif;
  } 

/* baltlogs.com */

중간에 몇 줄의 코드를 추가했습니다. 도트 연산자를 사용하여 양식 요소에 액세스합니다. 중첩된 요소에 액세스하려면 도트 연산자도 사용합니다. 예를 들어 .form .alternate .a는 중첩된 하이퍼링크 요소를 참조합니다.

변경 사항에는 하이퍼링크가 포함된 단락 태그에 대한 글꼴 크기 및 일부 상단 패딩 추가가 포함됩니다. 등록 및 로그인 하이퍼링크의 색상에 밑줄이 그어지고 어두운 색상으로 변경되었습니다.

변경 사항을 저장하고 서버를 실행하여 변경 사항이 적용되는지 확인합니다.



마지막으로 양식 간을 전환하는 데 필요한 JavaScript 코드를 추가해 보겠습니다.

여러 가지 방법으로 템플릿에 JavaScript 코드를 추가할 수 있습니다. 필요한 코드는 몇 줄에 불과하므로 HTML 템플릿 맨 아래에 포함할 것입니다.

그러나 일반적으로 JavaScript 코드가 있는 폴더를 만든 다음 CSS 코드와 동일한 방식으로 템플릿으로 가져오는 것이 좋습니다. 이 튜토리얼에서는 이미 CSS 코드에 대한 가져오기를 수행했으므로 다른 방법으로 시도해 보겠습니다.

Login_page.html

login_page.html을 열고 그림과 같이 상단과 하단에 다음 코드 줄을 추가합니다.

<!-- Login/Registration Page - HTML -->

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="login">
    <div class="form">
        <form class="registration-form">
            <input type="text" placeholder="name" />
            <input type="password" placeholder="password" />
            <input type="text" placeholder="email" />
            <button>create</button>
            <p class="alternate"><a href="#">Log In</a></p>
        </form>
        <form class="login-form">
            <input type="text" placeholder="username" />
            <input type="password" placeholder="password" />
            <button>Login</button>
            <p class="alternate"><a href="#">Register</a></p>
        </form>
    </div>
</div>

<script>
    $('.alternate').click(function () {
        $('form').animate({ height: "toggle", opacity: "toggle" }, "slow");
    });
</script>


<!-- baltlogs.com -->

스크립트 태그는 하단에서 필요한 코드를 포함하고 상단에서 특수 효과를 추가하는 데 필요한 라이브러리를 가져올 외부 스크립트 파일을 가리키는 데 사용됩니다.

.클릭()

이벤트가 트리거될 때마다 함수가 실행됨을 의미하는 핸들러로 사용됩니다. 일반 영어로 말하면 클래스 이름이 "alternate"인 HTML 요소(이 경우 단락 요소에 해당)를 클릭하면 어떤 일이 발생한다는 의미입니다.

.생명 있는()

양식 요소에 대한 사용자 지정 애니메이션을 수행합니다. 이 경우 등록 또는 로그인을 클릭할 때 양식이 전환됩니다. 높이, 불투명도 및 지속 시간과 같은 괄호 안에 들어가는 것은 애니메이션에 포함하려는 속성일 뿐입니다.

페이지를 보다 동적으로 만들기 위해 추가할 수 있는 많은 효과가 있습니다. 위에 사용된 것들은 매우 기본적이고 간단하지만 자유롭게 놀고 추가할 수 있습니다.

jQuery가 제공하는 몇 가지 기능을 보려면 유용한 링크를 확인하세요.

이 시리즈의 끝입니다. 댓글에 생각이나 질문을 남겨주세요.

함께 읽어주셔서 감사합니다!

장고에 대해 자세히 알아보기:



Login/Registration Page with HTML,CSS,& JS Series - PART I

Login/Registration Page with HTML,CSS,& JS Series - PART II

Django 3..2..1..Takeoff Book

Personal Website