Django 입문 Blog – 4. 블로그 앱

by

부트스트랩

부트스트랩에서 제공하는 템플렛 예제를 이용하여 기본 UI를 작성할 예정이기에

부트스트랩에서 제공하는 템플렛 예제를 다운 받는다

Download now

메인 해더부분을 navbar-fixed으로 사용할 것이기 때문에 해당 파일을 다운로드 한다

그리고 HTML파일을 프로젝트 내 새로 만든 blogapp 폴더 내 templates 폴더를 클릭, new HTML FILE을 클릭한 후

main이라고 작성하고 생성해준다 그리고 navbar-fixed의 html 소스를 head와 body를 채워주고 main.html에 붙여넣어준다

그리고 css 파일을 한곳에 모아주기 위해 blogapp 오른쪽 마우스 -> new – Directory 후 static 폴더를 생성한다

이후 static 폴더에 css라는 폴더를 생성한 후 navbar-fixed css를 붙여넣기 해준다

view.py 작성

view.py를 열어 main의 로직 함수를 생성해준다

def main(request):
    return render(request,'main.html')

urls.py 작성

urls.py를 열어 맵핑시켜줍니다

path(‘main/’, blogapp.views.main, name=’main’),

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', blogapp.views.index, name='index'),
    path('main/', blogapp.views.main, name='main'),
]

css

main.html에서 사용하고자 하는 css 파일을 모아준다

alt+f12를 누르거나 terminal을 열어 python manage.py collectstatic을 입력한다

python manage.py collectstatic

그리고 중간에 Try ‘yes’ to continue or ‘no’ to cancel이 나오는데 yes를 눌러 진행해준다

html 펨플릿화

html 상단에 {% load static %}를 작성해주어 static을 불러와준다

그리고 css를 연결시켜주는 link태그 내 href 값을 다음과 같이 변경해준다

    <link rel="stylesheet" href="{% static 'css/navbar-top-fixed.css' %}">

부트스트랩에서 제공하는 css link도 추가해준다. 사용자 css보다 상단에 위치해주어야 한다

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

실행을 시켜보면 다음과 같이 화면이 출력이 되게 된다

첫페이지 index.html

메인 페이지는 Cover라는 예제를 사용한다

템플릿 css를 static -> css 폴더에 붙여넣어주고 index.html에 템플릿 예제 html 소스를 넣어준 후 템플릿화 시켜준다

첫 페이지에서 메인페이지로 이동

index.html에 중앙 버튼의 a태그에 링크를 메인페이지 main.html로 연결해준다

{% url 'main' %}

{% url 지정한이름 %}

main.html 탑메뉴바 링크

main.html로 이동해 탑 메뉴바 소스에서 Fixed navbar의 href를 index로 연결해준다

<a class="navbar-brand" href="{% url 'index' %}">Fixed navbar</a>

home 메뉴에는 다음과 같이 main으로 연결해준다

    <a class="nav-link" href="{% url 'main' %}">Home <span class="sr-only">(current)</span></a>

main.html 탑메뉴바 글쓰기, 로그인, 로그아웃 추가

        <li class="nav-item">
            <a class="nav-link" href="#">글쓰기</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">로그인</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">로그아웃</a>
        </li>

Leave a Comment