안녕하세요 돌백😊 입니다.
저번포스트 에서는 장고 템플릿 기능을 활용해서, 백엔드 데이터로 화면을 랜더링 하는 방법에 대해 알아봤습니다.
이번엔 저번에 출력한 데이터를 tailwind css 를 사용해서 이쁘게 꾸며 보도록 하겠습니다.
CSS란?
먼저 html 코드로 웹사이트를 제작 하면, 기본적으로 아주 못생긴 글자형 웹페이지가 만들어 집니다. 그 웹페이지를 꾸미고, 레이아웃을 잡는 역할을 하는것이 css 입니다.
하지만, css만으로는 반복적인 코드들이 많이 사용해야되고, 유지관리가 어려울 수 있다는 문제가 있습니다.
이러한 문제점을 해결하기 위해 다양한 css프레임워크와 라이브러리가 있습니다. 그리고 그중 하나가 tailwindcss 입니다.
tailwindcss란?
tailwind css 는 그러한 ss 프레임워크 중 하나로, 유틸리티 기반의 css 프레임워크 입니다.
기존 css 에서 복잡한 클래스나 id 선택자를 작성하는것 대신, 미리 정의된 작은 유틸리티 클래스를 조합하여 스타일을 적용 할 수 있습니다.
예시를 통해 차이를 보여드리겠습니다.
<!-- CSS -->
<button class="my-custom-button">
버튼을 눌러주세요!
</button>
<style>
.my-custom-button {
background-color: blue;
}
</style>
<!-- Tailwind CSS -->
<button class="bg-blue-500">
버튼을 눌러주세요!
</button>
이렇게 class 명에 tailwind css 문법을 작성 해주시면 똑같이 작동 하게 됩니다.
tailwindcss 는 공식 링크를 참고 해주시고 다음에 tailwindcss 에 대해 세부적으로 한번 글을 작성 해보도록 하겠습니다.
Installation - Tailwind CSS
The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.
tailwindcss.com
자 그럼 우선 저희가 만든 스토리 리스트 html 파일 말고, 기본 html 뼈대를 만들고, 거기에 스토리 리스트를 붙여 보도록 하겠습니다.
먼저 templates 폴더 내에 base.html 파일을 생성 해주시기 바랍니다.
그리고 아래와 같이 코드를 입력 해주시기 바랍니다.
{% load static %}
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JJapstagram</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
이렇게 작성 해주시기 바랍니다. 저번에도 그랬지만 아주 생소한 장고 템플릿 태그들이 있는데,
{% load static %} 은 정적파일을 쉽게 불러올수 있게 해주는 태그이고
{% block content %} {% endblock %} 은 장고 템플릿 상속 기능을 활용하기 위함 입니다.
나중에 다른 파일에서 {% extends 'base.html' %} 을 적으면 페이지를 랜더링 할때 base.html 을 상속받고 , 해당 파일에서 작성한 html 내용들이 {% block content %} {% endblock %} 안에 들어가게 됩니다.
아직은 조금 어렵지만, 실습 하다보면 조금씩 이해 될것입니다!
그리고 이제 tailwind css 를 사용 하기 위해 <head></head> 태그 사이에
<script src="https://cdn.tailwindcss.com"></script>위의 코드를 작성 해주시기 바랍니다. 이게 tailwin css cdn 인데, head 태그안에 해당 스크립트를 불러오면 프로젝트 내에서 tailwind css 코드를 사용 할 수 있게 됩니다!
그리고 templates 폴더 안에 nav.html 파일을 생성 해주시기 바랍니다.
<nav class="sticky top-0 left-0 px-4 md:px-10 w-full h-12 border-b bg-white">
<div class="flex justify-between items-center w-full h-full">
<span>JJapstagram</span>
<div>
</div>
</div>
</nav>
html 코드 자체는 별게 없지만, class 안에 tailwind css 코드들이 들어가서 이쁘게 네비게이션 바를 만들었습니다.
아직은 제가 만든 코드를 같이 따라서 만들어 보시기 바랍니다.
그리고 다시 base.html 파일로 돌아가서 block content 위에 아래 코드를 작성 해주시기 바랍니다.
{% include 'nav.html' %}또 생소한 코드가 하나 나왔습니다
{% include ' ' %} 이 템플릿 코드는, 특정 html 파일에서 다른 html 파일을 불러와서 적용할때 사용 합니다.
네 그리고 저번에 만들었던 story_post.html 파일을 열어 주시기 바랍니다.
그리고 내부에 있던 코드를 아래와 같이 바꿔주시기 바랍니다.
{% extends 'base.html' %}
{% block content %}
<div class="flex justify-center w-full px-4 md:px-0 py-2">
<div class="flex flex-col items-center space-y-10 w-full max-w-[450px]">
{% for story_post in story_post_list %}
<div class="flex flex-col w-full h-[700px] border-b">
<div class="flex items-center h-12">
<span class="text-xs">
작성자
</span>
</div>
<div class="w-full flex-1 bg-gray-100 rounded-xl">
</div>
<div class="w-full h-36 py-4 text-sm">
{{story_post.content}}
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}코드가 많이 바꼈죠?
html 구조 자체는 어려울게 없지만 이것도 역시 tailwind css 코드들이 있지만 우선은 똑같이 작성 해주시기 바랍니다.
저희는 view에서 story_post.html 파일을 랜더링 하게 구조를 만들었습니다. 그럼 base.html 파일에 들어있는 html 기본 뼈대를 모든 랜더링 할 html 파일에 작성 해주는것은 너무 번거롭잖아요?
그래서 존재하는게 상속 입니다.
{% extends 'base.html' %} 코드를 작성 하면, block content 안의 내용이 base.html 의 block content 안으로 들어간 형태로 페이지가 랜더링 될 것입니다.
좋습니다! 모든 디자인을 끝내셨어요 자 모두 저장 하시고 브라우저를 켜서
http://localhost:8000/jjapstagram/
로 접속을 하시면!
이렇게 어드민에서 만든 데이터가 인스타그램처럼 세로 스크롤로 리스트업 되게 됩니다
축하드립니다! 🎉🎉
아주 먼길을 지나서 드디어 좀 그럴듯 하게 보이기 시작 했어요!
하지만 아직 몇가지 중요한 기능이 빠졌죠?
이제 포스트를 어드민이 아닌, 웹 페이지에서 등록 하고, 인스타 그램 이기 때문에 이미지를 등록 하는 방법 등에 대해서 다음번에 알아 보도록 하겠습니다
너무 고생 많으셨고 이번엔 새로 설명드릴게 많아서 두서가 많이 없었는데 읽어주셔서 진심으로 감사드립니다.
다음포스팅에서 또 찾아뵙겠습니다!!
이전 포스팅 ( 짭스타그램 3 ):
[ Django ] Django로 간단한 짭스타그램 만들기! (3)
안녕하세요 돌백😊 입니다. 저번에는 장고 어드민을 통해서 스토리 포스트 데이터를 직접 생성 해봤습니다. 🎯이번에는 장고 템플릿을 사용해서 실제 눈에 보여지는 웹 페이지를 구성 해보도
dorlback.tistory.com
'python > Django' 카테고리의 다른 글
| [ Django ] Django로 간단한 짭스타그램 만들기! (3) (8) | 2023.08.23 |
|---|---|
| [ Django ] Django로 간단한 짭스타그램 만들기! (2) (1) | 2023.08.20 |
| [ Django ] Django로 간단한 짭스타그램 만들기! (1) (0) | 2023.08.20 |
| [ Django ] Django로 간단한 짭스타그램 만들기! (0) (0) | 2023.08.20 |
| [ Django ] MVT 개발패턴 이란? (4) | 2023.08.18 |
