이번 편에서는 models 를 활용해서 sqlite3에 db table을 만들고 여러가지 data를 넣는 것을 할까 하다가.. 우선 bootstrap을 통해 html부터 꾸며보고자 한다.
bootstrap은 간단히 말하면 web을 꾸밀줄 모르는 사람들에게 편리하게 많은 것을 제공해준다. 심지어 PC가 아니라 모바일 등 화면을 줄여도 그에 맞게 형태가 변화하는 반응형 web을 만들어준다. 좋다..
우선 bootstrap을 활용하기 위해 bootstrap에 접속해보자. 그냥 bootstrap 페이지로 들어가면 현재 기준으로 5.X 버전인데 나는 4.6v을 사용하기로 한다. (버전은 오른쪽 위에서 변경 가능하며, 아래 링크를 통하면 바로 접근이 가능하다)
https://getbootstrap.com/docs/4.6/getting-started/introduction/
접속했으면 왼쪽에 Download를 클릭하면 다시 나오는 보라색 Download를 클릭해서 CSS와 JS를 다운받자
*bootstrap을 통하면 아래 Components에 보이는 여러 모듈들을 가져다 쓸 수 있다. 그냥 Components를 쭉 보면서 원하는 것이 있으면 그 아래 html을 그대로 가져다 붙이기만 하면 적용 완료.. 편하다.
다운받은 파일의 압축을 풀면 아래처럼 css와 js가 있다. 여기 있는 파일들을 django의 디렉토리 어딘가에 넣을 예정이다.
인터넷이 가능한 환경이라면 css js를 넣지 않고 html에 bootstrap web주소를 등록해서도 사용할 수 있지만 참고로 필자는 인터넷을 사용할 수 없는 폐쇠망에서의 실행을 기본 원칙으로 진행하고 있다.
왜냐하면 필자를 포함한 누군가는 인터넷이 되지 않는 폐쇠망(예를들어 기업망?)에서 웹서버를 구축하고 싶기 때문이다.
이제 C:\pyminv\pymin_django2\blog\static에 디렉토리를 만들고 위에서 확인한 css와 js 폴더를 그대로 복사해둔다.
그리고 jquery파일이 필요한데 이건 첨부로 올려두었으니 첨부 파일을 다운받아 js 폴더에 추가로 넣어주자.
해당 파일들은 html에 넣어서 load하는 형태가 될 것이다.
(css와 js를 잘 모른다면 별도로 검색을 통해 알아보자)
바로 실전에 들어가도 좋지만 우선 간략한 기능을 확인하기 위해 이전에 만들었던 base.html을 가볍게 꾸며보자.
아래와 같이 css 파일과 js 파일의 경로를 지정해준다. (제일 위에 load static은 필수) 그럼 이제 html을 읽을 때 django가 아래 스크립트를 읽는다.
{% load static %}
<html lang="ko">
<head>
<title>Blog</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" media="screen">
</head>
<body>
<h1> hello </h1>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
그럼 이제 bootstrap을 이용해서 네비게이션 바를 만들어보자.
bootstrap의 Components 왼쪽 아래에서 Navbar를 클릭한 후 쭉 내리다보면 나름 괜찮아 보이는 Navbar가 있다. 그리고 아래를 보면 html 코드가 있다. 이쯤되면 감이 온다. 해당 code를 복사해서 이전에 만든 base.html에 붙인다.
아래처럼 붙이면 된다.
{% load static %}
<html lang="ko">
<head>
<title>Blog</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" media="screen">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<h1> hello </h1>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
그리고 django를 실행시킨후 http://127.0.0.1:8000/blog/에 접속해본다. 어떻게 출력될까?
(pymin_django2) PS C:\pyminv\pymin_django2> python manage.py runserver
Dropdown link까지 있는 Navbar가 완성되었다. 그냥 copy만 하면 끝나니 정말 쉽다.
bootstrap의 장점은 여기서 끝이 아니다. 전체 화면으로 있던 웹 페이지를 최대한 작게 줄여보자. 그러면 Navbar가 자동으로 줄어들고 창이 일정 크기 이하가 되면 버튼(오른쪽 위)이 생기고 그 버튼을 누르면 Navbar 항목들이 세로로 나타나게 된다. 이런게 다 자동으로 되니 신기하다.
그런데 만들고나니 색깔이 맘에 들지는 않는다.
어떻게 하면 바꿀수 있을지 고민하면서 Navbar 항목을 내리다보니 color schemes 가 있다 아래에 있는대로 변경해주자
<nav class="navbar navbar-expand-lg navbar-light bg-light"> 이부분을 아래처럼 변경해주자.
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
그리고 새로고침을 하면 변경된 색깔의 Navbar를 확인할 수 있다.
이런 식으로 bootstrap에 있는것을 가져다가 붙이기만 하면 원하는 형태의 web을 만들 수 있다. 다음에는 모듈 단위가 아니라 샘플들을 아예 가져와서 적용해보고자 한다.
'Python > Do Something' 카테고리의 다른 글
| python(django) - 장고로 웹페이지 만들기, models, database (5) (0) | 2023.01.17 |
|---|---|
| python(django) - 장고로 웹페이지 만들기, bootstrap modal (4) (0) | 2023.01.17 |
| python(django) - 장고로 웹페이지 만들기 (2) (0) | 2023.01.17 |
| python(django) - 장고로 웹페이지 만들기 (1) (0) | 2023.01.17 |
| python(kivy) - kivy로 안드로이드 App 만들어보기 (3) (0) | 2023.01.17 |