검색창 만들기
기존 사이트
일단 메인 검색페이지부터 만들예정인데 이미 만들어진 사이트들을 찾아보았다
심플 이즈 베스트
머리속으로 고민을 해보니 위 사이트와 같이 검색창과 로고를 넣은 깔끔한 페이지가 좋을거 같다 생각을하였다
나는 파란색을 제일 좋아하니 파란색을 메인색상으로 잡았다
네비게이션바
여러가지 페이지를 만들어서 이동하면 메인페이로 다시 돌아가기 힘들다 그래서 상단에 메인페이지로 돌아가거나 여러 목록들을 보여주는 네비게이션바를 만들것이다
부트스트랩 다운
여러가지 디자인을 손쉽게 사용 할 수 프레임워크인 부트스트랩을 다운받는다
다운로드
아래 다운로드 버튼을 누르면 다음과 같은 파일이 받아진다
bootstrap-5.1.3-dist.zip
압축 해제후 bootstrap.min.css, bootstrap.min.css.map파일을 static 폴더에 넣는다
적용
base.html의 헤더에 부트스트랩을 아래와 같이 적용한다
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
</head>
...
로고제작
사이트를 대표하는 logo를 만들어볼것이다
hatchful
위 사이트를 이용하여 로고를 제작하였다
사이트에서 중앙 버튼을 누른다
여러가지 설정 후 홈페이지 이름을 넣었다
여러가지 로고가 나오는데 나는 중앙에 있는 로고가 마음에 들어서 색상만 편집하여 사용하기로 생각했다
편집으로 색상을 바꾸고 email을 쓰면 내 메일로 로고파일이 날아온다 여기서 네비게이션바에 사용할 그림만 따로 분리하였다
앞으로 내 페이지의 마스코트 로고이다 (귀엽다)
네비게이션바 제작
모든페이지에 보여줄 생각이니 base에다가 넣어줄 파일을 만든다
include를 해서 다른 파일을 넣어줄 수 있으니 깔끔하게 보기 좋으려 파일을 분리해준다
./templates/navbar.html
{% load static %}
<head>
<style>
.logo {
width: 30%;
height: 30%;
}
</style>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<div class="container-fluid">
<a class="navbar-brand" display:block href="{% url 'score:main' %}" >
<img class="logo" src="{% static 'logo_notitle.png' %}" alt="로고">
</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
./templates/base.html
...
<body>
{% include "navbar.html" %}
{% block content %}
{% endblock %}
</body>
...상단의 코드처럼 navbar.html을 만들어주고 base.html도 수정해준다
navbar.html에서는 로고를 누르면 main페이지로 연결되도록 만들었다
score:main으로 url을 연결한다
main은 score_view를 불러온다
이렇게 만들고 다른페이지를 만들때 base.html을 확장하는식으로 할 예정이다
요렇게 귀여운 네비바가 완성되었다
검색창
처음에 말했다시피 파란색을 좋아한다 그 중 밝은 파스텔톤 파란색 혹은 하늘색 계열을 좋아한다
배경색상은 #E0ECF8색상으로 정하였다
static에 main.css를 만들어주고
score_view.html을 수정해주었다
./templates/score/score_view.html
{% extends 'base.html' %}
{% block content %}
{% load static %}
<img class="logo" src="{% static 'logo_transparent.png' %}" width="100%" height="100%" alt="로고">
<form action="search" method="get" bolder = "1">
{% csrf_token %}
<div class="d-flex justify-content-center h-100">
<div class="search">
<input type="text" class="search-input" placeholder="소환사명" name="search_text" value="{{search_text}}" autofocus required>
<input type="submit" class="search-icon" value="GG">
</div>
</div>
</form>
{% endblock %}
./static/main.css
body {
font-family: 'Arial', sans-serif;
background-color: #E0ECF8;
margin: 0;
padding: 0;
}
.logo {
display: block;
margin: 0 auto;
width: 200px;
height: 40px;
}
.search{
border: 3px solid red;
border-radius: 30px;
height: 75px;
background-color: #fff;
padding: 10px;
}
.search-input{
color: white;
border:0;
outline: 0;
background: none;
width: 0;
margin-top: 5px;
margin-right:100px;
caret-color:transparent;
line-height: 40px;
transition: width 0.4s linear;
}
.search .search-input{
padding: 0 10px;
width: 550px;
caret-color: white;
font-size: 21px;
font-weight: 300;
color: black;
transition: width 0.4s linear;
}
.search-icon:hover{
background:#1A237E;
color:#fff;
}
.search-icon{
border-radius: 10px;
height: 50px;
width: 50px;
float: right;
display: flex;
justify-content: center;
align-items: center;
color: #E0ECF8;
background-color: #536bf6;
}
일단 만들기에 앞서서 기본 html과 css의 기본지식이 매우 부족하여 gpt와 템플릿 사이트를 적극 이용하였다
score_view.html에서는 순서대로 이미지 -> 검색창을 만들어주었다
검색을 누르면 form태그를 이용해서 search url로 연결되게 만들었다
.search-icon:hover{
background:#1A237E;
color:#fff;
}search 아이콘위에 마우스를 올려놓으면 색상을 바꿔 활성화 된지 눈으로 확인하기 편하게 만들었다
