본문 바로가기
TIL(Daily)/ETC

Wen/19/Oct/22 -장고/머신러닝 프로젝트-3

by Hawie 2022. 10. 20.

오늘 프로젝트 3일차..

 

머신러닝 아직 내가 할 수 있는 영역이 아니기 떄문에 

 

나는 Django 와 Front-end 를 주로  수정 및 기능 추가를 하였다.

 

오랜만에 하는 거라 익숙해지는데 시간이 조금 걸렸다.

 

오늘 나는 회원가입페이지,게시글작성 페이지, 로그인 페이지 및 폰트 수정을 하였다.

 

게시글 작성 페이지

 

상당히 더럽다...

아직 갈길이 멀어 보인다

그래도 나는 읽을 정도 되는거 보니 

전 보다는 조금 실력이 나아진거 같다??.?

 

<!DOCTYPE html>
<html lang="en">
<head >

        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"         
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시글 작성</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
</head>
<style>
    *{
        font-family: 'Jua', sans-serif;
        font-family: 'Nanum Gothic Coding', monospace;
    }
    .basic {
        width: 400px;
        height: 300px;
        position: absolute;
        left: 40%; //parent인 document기준으로 50% 이동
        margin-left: -100px;
        top: 10%; //parent인 documnet기준으로 50% 이동
        margin-top: -150px;

        width : 470px;
        height: 720px;
        
        border: 1px solid black;
      } 


</style>

<body class="basic">


    <form action="{% url 'contents:post' %}" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div style="display: flex; flex-direction: column;" >
        <h1>게시글 작성 페이지</h1><hr>
        <div>제목: <input type="text" name="title" placeholder="제목" /></div>
        <hr>
        <div>카테고리: <input type="text" name="category" placeholder="카테고리" /></div>
        <hr>
        <div>태그 : <input type="text" name="tag" placeholder="태그, 입력, 하세요" /></div>
        <hr>
        <div>사진 <input type="file" name="feed_image" placeholder="사진" required="required" value="image" /></div>
        <hr>
        <textarea type="text" name="content" placeholder="내용 입력..." cols="20" rows="10"></textarea>
        <hr>
        <button type="submit">작성 완료</button>
    </div>
    </form>



</body>
</html>

 

 

 

회원가입 페이지 

인스타그램에서 많이 참조 했다.

 

 

{% block content %}
<!doctype html>
<html lang="en">

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
  {% comment %} google pont {% endcomment %}


  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>회원가입</title>
  <link rel="icon" href=""/>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


  <title>회원 가입</title>

  <style>
    {% comment %} pont style {% endcomment %}
    *{
      font-family: 'Jua', sans-serif;
      font-family: 'Nanum Gothic Coding', monospace;
    }
  </style>


</head>

<body style="background: #FAFAFA;">
  <div style="display: flex; flex-direction: column; align-items:center; width: 100%; margin: 2vh 0 20vh 0;  ">
    <div
      style="text-align:center; border:solid 1px rgba(219, 219, 219, 1); width: 400px; height: 620px; margin-top: 30px; background: white">
      <!-- 바로 아랫줄 사진첨부 -->
      <div style="margin-top: 20px; padding: 20px;"> <img src="" alt=""> </div>
      <div style="padding: 0 40px 0 40px; font-weight:bold; color: gray; font-size: 15pt; font-weight: normal;">최고가 되려면 
         가입하세요.</div>
      <div
        style="display: flex; flex-direction: row; text-align: center; place-content: center; margin: 20px 0 20px 0;">
        <hr style="width: 100px;">
        <div style="margin: 5px 20px 0 20px; color: gray;"></div>
        <hr style="width: 100px;">
      </div>
      <div class="wrap">
        <form class="form-area" method="post" action="/sign-up/">
        <form action="{% url 'users:signup' %}" method="POST">
          {% csrf_token %}
          <div class="form-group mt-2 mb-2">
            <input type="email" style="width: 300px; margin-left: 50px; background-color: #fafafa;" class="form-control"
              id="email" name="email" placeholder="이메일">
          </div>
          <div class="form-group mt-2 mb-2">
            <input type="text" style="width: 300px; margin-left: 50px; background-color: #fafafa;" class="form-control"
              id="username" name="username" placeholder="성명">
          </div>
          <div class="form-group mt-2 mb-2">
            <input type="text" style="width: 300px; margin-left: 50px; background-color: #fafafa;" class="form-control"
              id="nickname" name="nickname" placeholder="닉네임">
          </div>
          <div class="form-group mt-2 mb-2">
            <input type="password" style="width: 300px; margin-left: 50px; background-color: #fafafa;"
              class="form-control" id="password" name="password" placeholder="비밀번호">
          </div>
          <div class="form-group mt-2 mb-2">
            <input type="password" style="width: 300px; margin-left: 50px; background-color: #fafafa;"
              class="form-control" id="password2" name="password2" placeholder="비밀번호 확인">
          </div>
          <div style="padding: 0 40px 0 40px; margin: 20px 0 20px 0; color: gray; font-size: 9pt; font-weight: normal;">
            저희 서비스를 이용하는 사람이 회원님의 연락처 정보를 Cabul에  업로드했을 수도 있습니다.</div>
      </div>
      <div>
        {% if error %}
        <div class="alert alert-danger" role="alert">
          {{ error }}
        </div>
        {% endif %}
        <button type="submit" class="btn btn-primary" style="width: 300px;">가입버튼</button>
      </div>
    </div>
    <div
      style="padding: 35px ;text-align:center; border:solid 1px rgba(219, 219, 219, 1); width: 400px; height: 100px; margin-top: 30px; background: white">
      <div>계정이 있으신가요? 그럴리가..? <a href="{% url 'users:login' %}">로그인</a></div>
    </div>
  </div>


  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
</body>

</html>
{% endblock %}

 

로그인 페이지

 

마지막 작업이라 퀄리티가 조금 높아졌다.(그냥 내 생각이다....)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인</title>

    <style>
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(https://fonts.googleapis.com/css?family=Roboto);

/* zocial */
        /* zocial */
[class*="entypo-"]:before {
    font-family: 'entypo', sans-serif;
  }
  
  *,
  *:before,
  *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
  }
  
  
  h2 {
    
    margin-left:12px;
  }
  
  body {
    {% comment %} background: #272125; {% endcomment %}
    font-family: 'Roboto', sans-serif;
    
  }
  
  form {
    position:relative;
    margin: 50px auto;
    width: 380px;
    height: auto;
  }
  
  input {
    padding: 16px;
    border-radius:7px;
    border:0px;
    background: rgba(255,255,255,.2);
    display: block;
    margin: 15px;
    width: 300px;  
    font-size:18px;
    height: 54px;
  }
  
  input:focus {
    outline-color: rgba(0,0,0,0);
    background: rgba(255,255,255,.95);
    color: #e74c3c;
  }
  
  button {
    float:right;
    height: 121px;
    width: 50px;
    border: 0px;
    background: #e74c3c;
    border-radius:7px;
    padding: 10px;
    font-size:22px;
    color: black;
    
  }
  
  .inputUserIcon {
    position:absolute;
    top:68px;
    right: 80px;
    
  }
  
  .inputPassIcon {
    position:absolute;
    top:136px;
    right: 80px;
    
  }
  
  input::-webkit-input-placeholder {
    {% comment %} color: black {% endcomment %}
  }
  
  input:focus::-webkit-input-placeholder {
    color: #e74c3c;
  }

    </style>



</head>
<body  >
<form action="{% url 'users:login' %}" method="POST">
    {% csrf_token %}
        <h2><span class="entypo-login"><i class="fa fa-sign-in"></i></span> Login</h2>
        <button class="submit"><span class="entypo-lock"><i class="fa fa-lock"></i></span></button>
        
        <span class="entypo-user inputUserIcon">
           <i class="fa fa-user"></i>
         </span>
        <input type="text" class="user" placeholder="urser email"/>
        <span class="entypo-key inputPassIcon">
           <i class="fa fa-key"></i>
         </span>
        <input type="password" class="pass"placeholder="password"/>
        <button>
            <a href="{% url 'users:signup' %}">회원가입</a>
        </button><hr>

        <div class="alert alert-danger" role="alert">    
        <a id="kakao-login-btn" href="/account/login/kakao">

            <img src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" width="222" alt="카카오 로그인 버튼"/>
            <hr>
            {% if error %}
                
            {{ error }}
        </div>
        {% endif %}
        </a>



</form>




</body>
</html>

'TIL(Daily) > ETC' 카테고리의 다른 글

Fri/21/Oct/22 -머신러닝 프로젝트 5  (0) 2022.10.22
Thu/20/Oct/22- 장고 머신러닝 프로젝트-4  (0) 2022.10.21
Tue/18/Oct/22 머신러닝 프로젝트-2  (0) 2022.10.19
Mon/17/Oct/22-머신러닝 프로젝트  (0) 2022.10.17
Fri/14/Oct/22- Github 사용방법 (복습 )  (0) 2022.10.14

관련글

댓글

티스토리툴바