장고 부트스트랩 적용 안됨 - jang-go buteuseuteulaeb jeog-yong andoem

1. django 사용기 - 부트스트랩 적용기

생각보다 잘 적용되지않는다. css가 적용안되서 text만 나오거나, 설명들을 그대로 따라 붙여도 잘안될때가 있다.

 나는 여러번 했는데도 확실한데 생각했지만, 잘 안되는 경우 참고하기 위해 정리. 맨아래에 정리해놓았으니 참고. 

이 글을 보고 처음하는 분이 따라하기엔 무리무리. sorry

<부트스트랩 적용>   

head 에는 css css선택자 참고 

정적파일(static files) : 정적 파일은 CSS와 이미지 파일   (요청에따라 바뀌는게 아님  앱아래 static을 둠) 

부트스트램 참고 , 참고2(색만좀다른)  참고startbootstrap

부트스트랩 하나만 선택 --- ctrl+u ----> 아래 블록 된 부분만  <head>사이에   복사해서 붙여넣기 

위아래로 js, css 위치함, 이미지도 이런식으로 붙이면됨. 

자바스크립트도 복 붙.   

장고 부트스트랩 적용 안됨 - jang-go buteuseuteulaeb jeog-yong andoem

맨아래    </body> 바로위에 붙여넣기

장고 부트스트랩 적용 안됨 - jang-go buteuseuteulaeb jeog-yong andoem

이 후에 , url 클릭하면 코드 복사할수있음 (아래 왼쪽사진)

blog/static/blog/bootstrap/css

blog/static/blog/js 

위와 같이 폴더생성 파일생성해서 붙여넣는다 . (아래 오른쪽사진) 

장고 부트스트랩 적용 안됨 - jang-go buteuseuteulaeb jeog-yong andoem
장고 부트스트랩 적용 안됨 - jang-go buteuseuteulaeb jeog-yong andoem

 ***아래와 같이 경로를 변경

"{% 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로 직접 서버에 붙여넣기