์ƒˆ์†Œ์‹

์ธ๊ธฐ ๊ฒ€์ƒ‰์–ด

๐Ÿ ํŒŒ์ด์ฌ (Python)

์žฅ๊ณ (Django) ์ •์ ํŒŒ์ผ(static) ์ ์šฉ ๋ฐ ํ…œํ”Œ๋ฆฟ ์ƒ์†

  • -

 

์—ฌ๋Ÿฌ๊ฐœ์˜ ๋น„์Šทํ•œ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๋•Œ, ๋ฐ˜๋ณต๋…ธ๋™์„ ์ค„์—ฌ์ค€๋‹ค. 

*base.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <link rel="stylesheet" href="/static/bootstrap.min.css"/>
    <title>Hello, world!</title>
  </head>
  <body>
    <br>
    <div class= "container">
<!-- ํ…œํ”Œ๋ฆฟ ์ƒ์† ! -->

      {% block contents %}
      {% endblock %}


  </div>
   
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

 

๋ผˆ๋Œ€๊ฐ€ ๋˜๋Š” ๋ถ€๋ชจํƒœ๊ทธ๋“ค์„ ๋‚จ๊ฒจ๋‘๊ณ , ์ฝ˜ํ…์ธ ๊ฐ€ ๋“ค์–ด๊ฐˆ๋ถ€๋ถ„์— {% block contents %}, {% endblock %} ์„ ๋„ฃ์–ด์ค€๋‹ค.

 

*index.html

{% extends "base.html" %}
{% block contents %}
  <div class = "raw">
    <div class = "col-12" >
      <div class = "col-12 text-center">
<h1>๋กœ๊ทธ์ธ</h1>
<br><br>

</div>
<form method = "POST">
  {% csrf_token %}

  <div class="form-group">
    <label for="password">๋น„๋ฐ€๋ฒˆํ˜ธ</label>
    <input type="password" 
    name = "password" 
    class="form-control" id="password" placeholder="๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”">
  </div>

  <span style="color:red;"><strong>{{ error }}</strong> </span>
  <button type="submit" class="btn btn-primary">๋กœ๊ทธ์ธ</button>
</form>

{% endblock %}

{% extends "base.html" %} ๋กœ ์ƒ์†๊ด€๊ณ„๋ฅผ ์„ค์ •ํ•ด์ฃผ๊ณ , {%block contents%} ๋‚ด๋ถ€์— baseํŒŒ์ผ์—์„œ ๋น„์›Œ๋‘์—ˆ๋˜ ๋ถ€๋ถ„์„ ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค.

 

 

1. ํ”„๋กœ์ ํŠธ ํด๋” ํ•˜์œ„์— statics ํด๋”๋ฅผ ๋งŒ๋“ค์–ด ์ค€๋‹ค.

2. settings.py ์— ์•„๋ž˜ ๊ฒฝ๋กœ๋ฅผ ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),  # base_dir์€ ํ”„๋กœ์ ํŠธ ํด๋”
]

3. htmlํŒŒ์ผ์— ์—ฐ๊ฒฐํ•ด์ค€๋‹ค.

<link rel="stylesheet" href="/static/bootstrap.min.css"/>

 

๊ฐ„๋‹จํ•œ ํŽ˜์ด์ง€๋ผ๋ฉด ๋ถ€ํŠธ์Šค์›Œ์น˜์˜ cssํŒŒ์ผ์„ ๋ฐ›๋Š”๊ฒŒ ์ข‹์€๊ฒƒ ๊ฐ™๋‹ค.

(https://bootswatch.com/)

Contents

๋‹น์‹ ์ด ์ข‹์•„ํ• ๋งŒํ•œ ์ฝ˜ํ…์ธ 

๋Œ“๊ธ€ 0

ํฌ์ŠคํŒ… ์ฃผ์†Œ๋ฅผ ๋ณต์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค

์ด ๊ธ€์ด ๋„์›€์ด ๋˜์—ˆ๋‹ค๋ฉด ๊ณต๊ฐ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

SHARE

DARK

MENU

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”