장고를 사용하여 10분 만에 만드는 CSS 환경

프롤로그

CSS 공부 환경을 장고로 만듭니다.

Django가 도입되었다면 10분 상정입니다.

내용에 영향을 미치지 않을까 생각하지만 실행 환경입니다.
OS : Windows10
파이썬 : 파이썬 3.7.6
장고 : 3.1

절차

폴더 작성, 프로젝트 작성, 앱 작성

C:\work\02_実施>mkdir 20200919_htmlcss
C:\work\02_実施>cd 20200919_htmlcss
C:\work\02_実施\20200919_htmlcss>django-admin startproject htmlcss
C:\work\02_実施\20200919_htmlcss>cd htmlcss
C:\work\02_実施\20200919_htmlcss\htmlcss>python manage.py startapp test_app
C:\work\02_実施\20200919_htmlcss\htmlcss>dir
 ドライブ C のボリューム ラベルがありません。
 ボリューム シリアル番号は D48D-C505 です

 C:\work\02_実施\20200919_htmlcss\htmlcss のディレクトリ

2020/09/19  19:38    <DIR>          .
2020/09/19  19:38    <DIR>          ..
2020/09/19  19:38    <DIR>          htmlcss
2020/09/19  19:38               685 manage.py
2020/09/19  19:38    <DIR>          test_app
               1 個のファイル                 685 バイト
               4 個のディレクトリ   8,932,749,312 バイトの空き領域

앱 인식 (apps에 정의 된 앱 이름을 setting.py에 추가)

C:\work\02_実施\20200919_htmlcss\htmlcss>cd htmlcss
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>type ..\test_app\apps.py
from django.apps import AppConfig

class TestAppConfig(AppConfig):
    name = 'test_app'

htmlcss/setting.py

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'test_app.apps.TestAppConfig',
]

액세스 대상 설정 (프로젝트의 urls.py 및 앱의 urls.py로 설정)

C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad urls.py

htmlcss/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('test_app.urls')),
]

C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>copy urls.py ..\test_app\
        1 個のファイルをコピーしました。
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\urls.py

test_app/urls.py

from django.urls import path, include
from . import views

urlpatterns = [
    path('', views.index),
]

액세스 대상 html 지정 및 작성

C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\views.py

test_app/views.py

from django.shortcuts import render

# Create your views here.

def index(request):
    return render(request, 'index.html')

C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\templates
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html

index.html

<html>
  <head>
  </head> 
  <body>
    <p>hello, world</p>
  </body>
</html>

마침내 CSS (css 인식 및 작성, html에서 호출)

C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py

htmlcss/setting.py

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

import os

STATIC_URL = '/static/'

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

C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\static\css
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\static\css\style.css

style.css

.T1 {
  background-color: #99cc00
}

C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html

index.html

{%load static%}
<html>
  <head>
    <link href="{% static 'css/style.css'%}" rel="stylesheet">
  </head> 
  <body>
    <div class='T1'>
      <p>hello, world</p>
    </div>
  </body>
</html>

웹 서버 시작 및 브라우저에서 확인

C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>start
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>python ..\manage.py runserver
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>start http://localhost:8000

완성! ! !

에필로그

이제 원하는대로 CSS를 장장 시도하십시오.

Reference

이 문제에 관하여(장고를 사용하여 10분 만에 만드는 CSS 환경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/roku28632/items/4570a23d1243379e597c

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다