HTML, CSS 및 JavaScript를 사용하여 Django에 로그인 + 등록 페이지(두 번째 부분)

이 시리즈의 첫 번째 부분에서 로그인/등록 페이지의 HTML 파일을 완성했습니다.이 글은 CSS 디자인 페이지 스타일을 어떻게 사용하는지 중점적으로 소개할 것이다.HTML 파일은 div, form, 단락 및 입력 태그를 조합한 것입니다.HTML과 CSS는 호흡이 잘 맞기 때문에 CSS를 넣어서 무슨 일이 일어날지 봅시다.
페이지 스타일을 디자인하기 전에 Django 프로젝트의 정적 파일을 설정해야 합니다.
설정py
설정을 엽니다.그리고 끝까지 아래로 굴러간다.다음 두 줄 코드를 추가합니다.

# path -> example/setting.py 

STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

#baltlogs.com

이 코드 줄들은 프로젝트의 정적 파일을 어디서 찾을 수 있는지 Django에게 알려 줍니다.
정적 URL
Django는 이 경로를 사용하여 웹 사이트의 기본 URL에 추가합니다.예를 들면 http://websitename/static/style.css입니다.이것은 개발 과정에서 정적 파일에 대한 인용입니다.
정적 파일
프로젝트에서 정적 파일의 위치를 가리킵니다.정적 파일을 포함하는 추가 디렉터리가 있으면 다른 경로를 열거할 수 있습니다.Django는 프로젝트에 있을 수 있는 추가 정적 파일에 지정된 경로를 보여 줍니다.
현재 우리는 정적 파일을 저장하기 위해 몇 개의 폴더를 만들어야 한다.
프로젝트의 주 폴더에 폴더 예시와 목록과 같은 단계에서 static이라는 폴더를 만듭니다.
static이라는 폴더에 css라는 폴더를 만듭니다.
마지막으로 css라는 폴더에login이라는 파일을 만듭니다.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;
}
body {
    background: #3d3d3d; 
    font-family: "Lato", sans-serif;     
  }


/* baltlogs.com */

CSS 코드의 일부만 추가했습니다.먼저 CSS 파일을 HTML 템플릿으로 가져온 다음 나머지 코드를 추가합니다.변경 사항을 보고 스타일을 설정하고 있는 요소를 식별하기 위해 이 두 파일을 동시에 열 것을 권장합니다.
예를 들어 위의 코드 세션에서 login이라는 주div 요소를 수정하고 있습니다. 이 요소는 로그인과 등록 폼을 포함합니다.
컨테이너의 너비가 500px로 설정되었습니다.채우기에 대해 저는 short-hand 속성을 사용하여 윗부분과 밑부분의 채우기를 10%로 설정하고 오른쪽과 왼쪽은 0으로 채웁니다. 그림과 같습니다.여백을 "자동"으로 설정하면 요소가 수평으로 가운데에 배치됩니다.
페이지의 배경도 짙은 회색으로 바뀌었다.CSS 속성이 너무 많습니다.나는 여기서 전부 설명할 수 없지만, 마음대로 찾아보세요.
일부 CSS 속성을 정의하려면 픽셀과 백분율의 조합을 사용합니다.우리의 목표는 정답이 없다는 사실을 지적하는 것이다. 당신이 실현하고자 하는 목표에 따라 정의 단위를 바꿀 수 있다는 것이다.
예를 들어 픽셀은 고정된 크기의 단위로 신축할 수 없고 한 사람이 더 호응적인 디자인을 최종 목표로 삼으려면 백분율을 사용한다.너는 밑에 있는 유용한 링크를 보고 더 많은 정보를 얻을 수 있다.
로그인 페이지.html
마지막으로 로그인 페이지를 엽니다.그리고 위쪽에 다음 두 줄의 코드를 추가하여 CSS 파일을 html 템플릿으로 가져옵니다.

<!-- 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><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><a href="#">Register</a></p>
        </form>
    </div>
</div>

<!-- baltlogs.com -->

정적 템플릿 탭을 불러오고 정적 폴더의 경로를 정의했기 때문에 Django는 파일을 어디서 찾을 수 있는지 알고 있습니다.
파일을 저장하고python 관리 명령을 보냅니다.py runserver 명령을 사용하여 변경 사항을 확인합니다.

이 페이지는 보기에는 좀 좋으나, 그다지 좋지는 않다.우리가 몇 줄의 코드를 추가한 후에 페이지가 더욱 좋아 보일 것이니, 인내심을 가지고 기다려 주십시오.
로그인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 .registration-form {
    display: none;
  }

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

/* baltlogs.com */

위 코드를 추가한 후 파일을 저장한 다음 서버를 다시 실행합니다.

너는 위와 같은 페이지를 가지고 있어야 한다. 우리의 이전 페이지와 비교하면, 이것은 상당히 괜찮은 업그레이드이다.CSS 속성을 원하는 대로 변경하고 추가해서 어떻게 되는지 볼 수 있습니다.이것은 가장 좋은 학습 방식이다.
지금은 단지 하나의 표만 있으니 주의하세요.CSS 속성 display:none을 사용하여 레지스트리를 숨깁니다.지금은 숨겨져 있지만 JavaScript 코드를 추가할 때 다시 가져옵니다.JavaScript를 사용하여 사용자가 계정을 만들거나 로그인만 하는지에 따라 양식을 전환합니다.
이 시리즈의 다음 부분이자 마지막 부분에서 이 점을 소개할 것이다.금방 올 거야..
Django에 대한 자세한 내용:
Login/Registration Page with HTML,CSS,& JS Series - PART I
Django 3..2..1..Takeoff Book
Personal Website