vscode 이어서 질문입니다...

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

Bootstrap4를 활용한 기본 레이아웃 구현

작성

216

강사님 혹시 부트스트랩 버전을 동일하게 했음에도

이런식으로 출력이되는 이유는 무엇일까요 ? ㅠ

django react python docker

답변 5

이진석

지식공유자

settings.py 내에 STATICFILES_DIRS 설정으로 askcompany/static 경로는 추가하셨었죠?

그리고, bootstrap-4.6.1-dist 경로명이 2번 들어있습니다.

askcompany/static/bootstrap-4.6.1-dist/bootstrap-4.6.1-dist/css/bootstrap.min.css 가 아니라

askcompany/static/bootstrap-4.6.1-dist/css/bootstrap.min.css 경로가 되도록

윈도우탐색기에서 파일/폴더 위치를 수정해주세요. :-)

97bennie

질문자

아.. 해결된것 같습니다 정말 감사합니다!

이진석

지식공유자

옙. 잘 해결되어 다행입니다. 이제 이와 같은 이슈는 다시 만나면 빠르게 잘 해결하실 수 있을 것입니다. 화이팅입니다. :-)

97bennie

질문자

감사합니다!

알려주신대로

http://localhost:8000/static/bootstrap-4.6.1-dist/css/bootstrap.min.css 를 검색했더니

위와같이 나오는데, 무엇이 잘못되었을까요?

{% load static %}
<!doctype html>

<html>

<head>

<meta charset="utf-8" />
<title>Instagram with askcompany</title>

<link rel="stylesheet" href="{% static "bootstrap-4.6.1-dist/css/bootstrap.min.css" %}" />
<script src="{% static "jquery-3.6.0.min.js" %}"></script>
<script src="{% static "bootstrap-4.6.1-dist/js/bootstrap.min.js" %}"></script>

</head>

<body>

    <div class="border-bottom mb-3">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                        <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white">
     
                        <h5 class="my-0 mr-md-auto font-weight-normal">
                            <img src="{% static "logo.png" %} " alt="Instagram" />                        
                        </h5>

                        <nav class="my-2 my-md-0 mr-md-3">
                        <a class="p-2 text-dark" href="/explore/">
                            <svg aria-label="사람 찾기" class="_8-yf5 " color="#262626" fill="#262626" height="24" role="img" viewBox="0 0 24 24" width="24"><path d="M13.173 13.164l1.491-3.829-3.83 1.49zM12.001.5a11.5 11.5 0 1011.5 11.5A11.513 11.513 0 0012.001.5zm5.35 7.443l-2.478 6.369a1 1 0 01-.57.569l-6.36 2.47a1 1 0 01-1.294-1.294l2.48-6.369a1 1 0 01.57-.569l6.359-2.47a1 1 0 011.294 1.294z"></path></svg>
                        </a>
                        <a class="p-2 text-dark" href="accounts/activity/">
                            <svg aria-label="활동 피드" class="_8-yf5 " color="#262626" fill="#262626" height="24" role="img" viewBox="0 0 24 24" width="24"><path d="M16.792 3.904A4.989 4.989 0 0121.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 014.708-5.218 4.21 4.21 0 013.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 013.679-1.938m0-2a6.04 6.04 0 00-4.797 2.127 6.052 6.052 0 00-4.787-2.127A6.985 6.985 0 00.5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 003.518 3.018 2 2 0 002.174 0 45.263 45.263 0 003.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 00-6.708-7.218z"></path></svg>
                        </a>
                        <a class="p-2 text-dark" href="#">
                            profile
                        </a>
                        </nav>

                        </div>
                </div>
   
            </div>
        </div>
    </div>

    {% block content%}
    {% endblock%}

    <div class="container">

        <footer class="pt-4 my-md-5 pt-md-5 border-top">
            <div class="row">
              <div class="col-12 col-md">
                <img class="mb-2" src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
                <small class="d-block mb-3 text-muted">© 2017–2021</small>
              </div>
              <div class="col-6 col-md">
                <h5>Features</h5>
                <ul class="list-unstyled text-small">
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
                </ul>
              </div>
              <div class="col-6 col-md">
                <h5>Resources</h5>
                <ul class="list-unstyled text-small">
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
                </ul>
              </div>
              <div class="col-6 col-md">
                <h5>About</h5>
                <ul class="list-unstyled text-small">
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li>
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
                  <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
                </ul>
              </div>
            </div>
          </footer>
   
    </div>
   
</body>


</html>
 
 
ㄹ
 
 
 
 
제 코드 현상황은 이러합니다...

이진석

지식공유자

안녕하세요.

현재 웹페이지의 html 내역이 원하는 대로 잘 만들어졌는 지 확인하는 과정이 먼저 필요합니다. layout.html 이 소스(source)가 되는 것인데, 소스만 확인하는 것이 아니라 결과물이 잘 만들어졌는 지가 실제 동작에 영향을 미치거든요.

웹 페이지 빈공간에 우클릭하셔서 페이지소스보기를 해보세요. 그러면 아래와 같은 코드가 있어야 합니다.

이 부분이 확인되셨다면, 지정 경로에 bootstrap 파일이 없어서 일수도 있습니다. 파일명이나 버전명 등이 미묘하게 달라서일 수도 있거든요. https://getbootstrap.com/docs/4.6/getting-started/download/ 에서 다운받으셨다면, 파일의 버전이 4.6.1 입니다. 필히, 다운/압축을 푸신 폴더명을 꼭 확인해주세요.

장고의 static은 url에 지정한 대로 static 경로에 같은 경로로 파일이 존재해야만 합니다. :-)

그리고, 다음과 같이 CSS 파일의 URL을 브라우저에 직접 입력하여 해당 static 파일 로딩을 확인해볼 수 있습니다.

http://localhost:8000/static/bootstrap-4.6.1-dist/css/bootstrap.min.css

이 모든 내용을 다 적용하셨음에도 static 파일이 읽혀지지 않는다면, 장고 개발서버를 껐다가 재시작해보세요. python manage.py runserver 창에서 Ctrl-C (컨트롤-C) 를 입력하시면 서버가 중단이 됩니다. 흔히 윈도우에서는 Ctrl-C 는 복사 단축키지만 이는 윈도우 애플리케이션에서만 그렇구요. 일반적인 개발용 애플리케이션에서는 프로그램 중단을 요청(Interrupt)하는 단축키입니다.

그리고, 관련 질문이 이어지실 경우, 새로운 질문 타래를 여시기보다 기존 질문에서 질답을 이어가주시면 좋을 듯 합니다.

화이팅입니다. :-)

97bennie

질문자

layout.html 코드입니다...

97bennie

질문자

{% load static %}
<!doctype html>

<html>

<head>

<meta charset="utf-8" />
<title>Instagram with askcompany</title>

<link rel="stylesheet" href= "{% static "bootstrap-4.4.1-dist/css/bootstrap.min.css" %}" />
<script src="{% static "jquery-3.6.0.min.js" %}"></script>
<script src="{% static "bootstrap-4.4.1-dist/js/bootstrap.min.js" %}"></script>


</head>


<body>

    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm ">
        <h5 class="my-0 mr-md-auto font-weight-normal">
            Instagram
        </h5>

        <nav class="my-2 my-md-0 mr-md-3">
          <a class="p-2  text-dark" href="#">Features</a>
          <a class="p-2  text-dark" href="#">Enterprise</a>
          <a class="p-2  text-dark" href="#">Support</a>
        </nav>
     
      <a class="btn btn-outline-primary" href="#">Sign Up</a>
    </div>

    {% block content%}
    {% endblock%}
</body>


</html>

인프런 커뮤니티 질문&답변

vscode 이어서 질문입니다...

제 코드 현상황은 이러합니다...