-
Python Django 10 - static(css, js, image)Python Django 2022. 10. 23. 14:29
settings.py의 110번째 줄
# Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/4.1/howto/static-files/ STATIC_URL = "static/" # Default primary key field type # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"어플리케이션(app)에 static이라는 폴더를 만든다.
그 안에 각각 CSS, js, images 폴더를 만들고 관리해야 된다.
각각 css 파일, javascript 파일로 만들어야 된다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="/static/css/test.css" /> </head> <body> <h2>hello 요청에 대한 반응 문서</h2> <img src="/static/images/images.png" id="myImg"/> </body> </html>css를 링크 시킨다. 경로를 지정할 때 앞에 static을 붙여야한다.(이미지, js 포함)
function abcFunc(){ history.back(); }js도 마찬가지다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="/static/css/test.css" /> <!-- <script type=text/javascript> window.onload = function(){ alert("자바스크립트 성공"); } </script> --> <script type="text/javascript" src="/static/js/test.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //alert("자바스크립트 jquery 성공"); $("#myImg").click(function(){ abcFunc(); }); }); </script> </head> <body> <h2>hello 요청에 대한 반응 문서</h2> <img src="/static/images/images.png" id="myImg"/> </body> </html>js 파일에 있는 함수를 호출할 수 있다. css도 적용시킬 수 있다. jquery를 사용할 수도 있다.
<jquery link>
호스팅된 라이브러리 | Hosted Libraries | Google Developers
가장 많이 사용되는 오픈소스 자바스크립트 라이브러리를 위한 안정적이고, 안정적이며, 속도가 빠른, 전 세계적으로 제공되는 콘텐츠 배포 네트워크입니다.
developers.google.com
'Python Django' 카테고리의 다른 글
Python Django 12 - session(redirec 방법) (0) 2022.10.23 Python Django 11 - get + post 방식 (0) 2022.10.23 Python Django 9 - 데이터 이동 forward(DB, 데이터) (0) 2022.10.23 Python Django 8 - controller 사용방법3(Including another URLconf) (0) 2022.10.23 Python Django 7 - controller 사용방법2(class-based views) (0) 2022.10.23