Python Django 10 - static(css, js, image)

Python Django

Python Django 10 - static(css, js, image)

코딩탕탕 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를 사용할 수도 있다.

호스팅된 라이브러리 | Hosted Libraries | Google Developers

가장 많이 사용되는 오픈소스 자바스크립트 라이브러리를 위한 안정적이고, 안정적이며, 속도가 빠른, 전 세계적으로 제공되는 콘텐츠 배포 네트워크입니다.

developers.google.com