1. django 사용기 - 부트스트랩 적용기
생각보다 잘 적용되지않는다. css가 적용안되서 text만 나오거나, 설명들을 그대로 따라 붙여도 잘안될때가 있다.
나는 여러번 했는데도 확실한데 생각했지만, 잘 안되는 경우 참고하기 위해 정리. 맨아래에 정리해놓았으니 참고.
이 글을 보고 처음하는 분이 따라하기엔 무리무리. sorry
<부트스트랩 적용>
head 에는 css css선택자 참고
정적파일(static files) : 정적 파일은 CSS와 이미지 파일 (요청에따라 바뀌는게 아님 앱아래 static을 둠)
부트스트램 참고 , 참고2(색만좀다른) 참고startbootstrap
부트스트랩 하나만 선택 --- ctrl+u ----> 아래 블록 된 부분만 <head>사이에 복사해서 붙여넣기
위아래로 js, css 위치함, 이미지도 이런식으로 붙이면됨.
자바스크립트도 복 붙.
맨아래 </body> 바로위에 붙여넣기
이 후에 , url 클릭하면 코드 복사할수있음 (아래 왼쪽사진)
blog/static/blog/bootstrap/css
blog/static/blog/js
위와 같이 폴더생성 파일생성해서 붙여넣는다 . (아래 오른쪽사진)
***아래와 같이 경로를 변경
"{% static ... ' %}" <--- 이와 같은 형태로 경로를 변경해야 함.
<!-- <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="{% static 'blog/bootstrap/bootstrap.css' %}" media="screen">
<link rel="stylesheet" href="{% static 'blog/_assets/css/custom.min.css' %}"> --> html과 css파일을 연결하기 위해서 link 요소를 넣었던 것. link 요소에서 href 속성의 값을 보시면 그냥 파일명만 적혀있는 것
<script src="{% static 'blog/_assets/jquery.min.js' %}"></script>
<script src="{% static 'blog/_assets/popper.min.js' %}"></script>
<script src="{% static 'blog/bootstrap/bootstrap.min.js' %}"></script>
<script src="{% static 'blog/_assets/js/custom.js' %}"></script>
</body>
search_es_list.html 경로도 바꿔준다.
{% load static %} 추가
<##jango설정 ##장고설정 bootstrap이랑 연결할때 설정>
아래 예시 참고. ↓↓↓↓↓↓↓↓↓
<!-- <!DOCTYPE html>-->
{% load static %}
<!--<html lang="en">-->
|
<!-- Custom fonts for this template--> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link rel="stylesheet" href="{% static 'css/sb-admin-2.css' %}">
<script src='{% static "vendor/jquery/jquery.min.js"%}'> </script>
img도 css도 javascripts도 다 ‘{% static “ 경로” %}’ 적어줘야함. |
예시) <link rel="stylesheet" href="{% static 'blog/_assets/css/custom.min.css' %}">
적용안되면 static 경로설정을 해줘야함
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
'/blog/staitc/',
)
내 웹사이트 켜서 ctrl + u 에서 css나 bootstrap등이 내 static/ 경로안에 파일이랑 경로가 연결 됐는지확인
웹사이트에서 F12 --consol보면 에러 여부에 따라 적용됬는지 안됬는지 알수있음
******부트스트랩 붙일때 에러
##에러 net::ERR_ABORTED 404 (Not Found)
0)static경로설정하고도 에러가 계속나면
1)정말 확실하다! 생각하지만 경로가 잘못됐거나 (경로 정말 확실했는데 틀렸음. )
2)css 나 js에 파일내용이 비어있지 않은지 확인
(왜인지 모르겠으나 재확인 ㄱ ㄱ 이동할때 내용이 안가져와지는지.. 비어있음_)
--------> 오류나는 부분 코드 복사 붙여 넣기 다시하기 98%는 해결됨!!!!!
3)이미지는 winSCP로 붙여넣거나 코드도 정안되면 winSCP로 직접 서버에 붙여넣기
댓글