Bootstrap5 및 Django를 사용한 탐색 모음 스타일 + 로고
웹 사이트의 로고를 만들기 위해서는 로고의 사용 위치에 따라 필요한 사이즈를 찾는 것이 중요하다.너는 거의 사이트의 어느 곳에서든 로고를 표시할 수 있지만, 대부분의 경우 로고의 사이즈는 상응하는 조정이 필요하다.
한 사이트의 로고의 적당한 사이즈는 250픽셀 (너비) x150픽셀 (높이) 이지만, 마찬가지로, 당신이 표시하고자 하는 위치에 따라 사이즈를 바꾸어야 할 수도 있습니다.
이 강좌를 계속하기 전에, 나는 몇 가지 가설을 할 것이다.
간단한 Django 웹 응용 프로그램을 만들고 이 사이트의 HTML 템플릿을 사용하기 시작했다고 가정합니다.만약 그렇지 않다면, 너는 이 게시물들을 참고할 수 있다.
Chapter 1 - Django Setup - (How to create a Django web app)
Chapter 2 - Django Basics - (Optional)
Chapter 3 - Homepage - (How to create a homepage and get started with HTML templates in Django)
네비게이션 표시줄과 로고를 추가하는 템플릿을 습득했다면 계속 읽어 보십시오.
Bootstrap에서 제공하는navbar 템플릿을 사용할 것입니다. 그러나 모든navbar 템플릿을 사용할 수도 있고, 자신의 템플릿을 만들 수도 있습니다.
다음은 홈 템플릿에 추가할 탐색 모음의 HTML 코드입니다.내 예에서 홈 템플릿을 인덱스라고 부른다.그것은 빈 html 템플릿입니다.
색인html
<!-- path=> main1/templates/main1/index.html -->
<!-- path=> main1 is the name of my Django app -->
<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="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<h1 class="title1">Navbar Tutorial</h1>
<!-- baltlogs.com -->
내비게이션 표시줄이 지금 매우 거칠어 보인다.로고를 추가하기 전에 먼저 디자인을 해 봅시다.
프로젝트 디렉터리에 정적 폴더를 만들고, 이 폴더에 css라는 폴더를 만들고, 이 폴더에 홈 페이지라는 css 파일을 만듭니다.css
정적 파일을 제공하는 방법을 알고 있다면 다음 강좌를 건너뛸 수 있습니다.
CSS 파일을 포함한 정적 파일에 서비스를 제공하는 방법을 알고 싶으면, 계속하기 전에 다음 강좌를 보십시오.
Login + Registration Page in Django using HTML, CSS, JavaScript (Part II) – (How to serve static files)
새로 만든 CSS 파일(homepage.CSS)을 열고 다음 코드를 추가합니다.
홈 페이지css
/* path => static/css/homepage.css */
.navbar{
background-color: #F6F5D7;
margin:0%;
padding: 0%;
border: 1px solid rgb(0, 0, 0);
}
.title1{
font-family: 'sans-serif';
}
/* baltlogs.com */
색인을 엽니다.다음 코드를 추가합니다.이 코드는 일부 스타일을 처리하기 위해 가이드를 가져올 것입니다. 홈 페이지도 가져올 것입니다.css
색인html
<!-- path=> main1/templates/main1/index.html -->
{% load static %}
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- CSS Custom File -->
<link href="{% static 'css/homepage.css' %}" rel="stylesheet">
<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="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<h1 class="title1">Navbar Tutorial</h1>
<!-- baltlogs.com -->
- 코드의 첫 번째 줄은 정적 파일을 가져오는 데 필요한load static 표시를 보여 줍니다.
- 첫 번째 링크 레이블을 부트 CSS 패키지로 가져옵니다.
이 가져오기를 찾을 수 있습니다. Bootstrap
이것은 다음 그림의 첫 번째다.
CSS 패키지만 사용하기 때문에 그 패키지만 가져옵니다.JavaScript 패키지를 사용하려는 경우 원하는 대로 가져옵니다.
- 두 번째 링크 레이블은 방금 만든 사용자 정의 CSS 파일(homepage.CSS)을 가져옵니다.이 파일은 우리만의 스타일을 추가할 것이다.
변경 사항을 저장하고python 관리를 발표합니다.터미널 창에 실행 서버를 만듭니다.
이 사이트는 아래 그림과 같아야 한다.
이전의 것과 비교하면 이것은 진보이다.제목이 새 글꼴로 변경되었습니다.탐색 모음 아래에는 경계라는 검은 선이 있습니다.그러나 한 가지 변화는 일어나지 않았다.비록 홈페이지에 서로 다른 배경색을 추가했지만, 내비게이션 표시줄의 흰색 배경을 볼 수 있다.css 파일.
부트 코드가 CSS 파일의 코드를 덮어썼기 때문입니다.
HTML 파일을 열고 navbar 요소에서 다음 코드를 제거합니다.
탐색 표시줄과 배경 표시등을 제거합니다.
색인html
{% load static %}
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- CSS Custom File -->
<link href="{% static 'css/homepage.css' %}" rel="stylesheet">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<h1 class="title1">Navbar Tutorial</h1>
HTML 템플릿에 로고를 추가합니다.
색인을 엽니다.html을 다시 사용하고 다음 코드를 추가합니다.
색인html
{% load static %}
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- CSS Custom File -->
<link href="{% static 'css/homepage.css' %}" rel="stylesheet">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"><img class="logo" src="{% static 'media/logo.png' %}" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<h1 class="title1">Navbar Tutorial</h1>
이것이 바로 로고 파일의 경로입니다.
% 정적 미디어/ID입니다.파푸아뉴기니
파일을 저장하고 Django에서 로고를 찾을 수 있도록 경로를 생성합니다.
이전에 만든 정적 폴더에서 미디어 폴더를 만들고 로고를 폴더에 배치합니다.그림의 이름을 로고로 지정하고 정확한 확장자를 추가합니다. 예를 들어.파푸아뉴기니.물론 파일의 이름을 변경할 수 있기 때문에 마음대로 변경할 수 있지만, 로고를 찾을 수 있도록 HTML 파일의 경로도 변경해야 한다는 것을 기억하십시오.
python 관리를 발표합니다.터미널 창에서 서버를 실행하고 사이트를 보십시오.
내 상표가 너무 크다.그것은 300px (너비) x175px (높이) 이다.나는 홈페이지에서 그것의 크기를 조정할 것이다.css 파일.
홈 페이지를 엽니다.css.만약 네비게이션 표시줄에 너무 큰 로고가 있다면, 그 크기를 가지고 놀기 시작해라.
홈 페이지css
/* path => static/css/homepage.css */
.navbar{
background-color: #F6F5D7;
margin:0%;
padding: 0%;
border: 1px solid rgb(0, 0, 0);
}
.title1{
font-family: 'sans-serif';
}
.logo{
height: 50px;
width: 80px;
}
/* baltlogs.com */
나는 나의 로고의 정확한 사이즈가 80px(넓이)x50px(높음)라는 것을 발견했다.로고와 웹 사이트에 표시하려는 위치에 따라 크기가 다를 수 있습니다.
탐색 모음 링크의 글꼴과 스타일 변경, 로고의 배경색 변경 등 다른 CSS 속성을 추가하여 로고와 탐색 모음의 스타일을 추가로 설정할 수 있습니다.
Django에 대한 자세한 내용:
Login/Registration Page with HTML,CSS,& JS Series - PART I
Login/Registration Page with HTML,CSS,& JS Series - PART II
Django 3..2..1..Takeoff Book
Personal Website
Reference
이 문제에 관하여(Bootstrap5 및 Django를 사용한 탐색 모음 스타일 + 로고), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/balt1794/navbar-styling-logo-using-bootstrap5-django-12f3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
