블로그 만들기(3)에서 만들었던 내용에서 bulletin_wr.html을 bootstrap과 css 를 사용해서 이쁘게 꾸미려고 한다. 우선 bootstrap과 css를 전문적으로 배운적이 없기 때문에 인터넷 검색을 통해서 작성했으니 감안하고 확인하길 바란다.
이전에 꾸미지 않은 상태의 화면은 블로그 만들기(3)에서 확인하길 바란다.
그리고 코드를 수정해서 아래와 같이 변경하였다.
변경후 bulletin_wr.html>>
결과 화면에 대한 주석>>
결과 화면에서 Home 과 search 부분은 파이썬에서 구현 된 것은 없다. HTML에 미리 만들어 놓고 나중에 파이썬과 연결할 생각이다.
제목 부분은 input으로 받고 내용은 summernote를 적용하였다.
코드 bulletin_wr.html>>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- include libraries(jQuery, bootstrap) -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bulletin_write</title>
</head>
<body style="padding-top: 5rem;">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container">
<form name="form" method="POST" action="/bulletin_wr01">
<div class="pt-1"></div>
<input type="text" name="title" placeholder="제목을 입력하세요" style="border-radius:5px; width:100%; padding:5px;">
</div>
<div class="pt-1">
<textarea id="summernote" name="contents"></textarea>
</div>
<script>
$('#summernote').summernote({
placeholder: '내용을 입력해주세요',
tabsize: 2,
height: 300
});
</script>
<div class="pt-1 text-right">
<button class="btn btn btn-success" type="submit" style="width:10%; padding:5px;">제출</button>
</div>
</form>
</main>
</body>
</html>
주석 bulletin_wr.html>>
head 부분에서 bootstrap, jquery, summernote를 선언해서 웹에 접근시 다운 받도록 하였다.
바디에 css style로 padding-top을 넣었다. 해당 값을 넣어야 nav에 내용과 main의 내용들이 겹쳐지지 않고 간격을 유지해 준다.
nav에 사용된 bootstrap 값은 무료 예제에서 가져와서 사용하였다. 그외에도 다양한 무료 예제가 있으니 필요한 디자인이 있다면 가져오면 될 것이다.
main에서 클래스를 container로 가져오니 화면에서 중앙부분을 구역으로 정해서 사용했다. div class="pt-1"은 padding top 1pixel을 의미한다.
그리고 이번에 확인한 사실은 summernote script를 id 값을 먼저해주고 다음에 넣어야 페이지 로딩상 문제가 없이 돌아감을 알 수 있었다.
앞으로 페이지를 계속 예제를 통해 만들다 보면 좀 더 자유롭게 사용할수 있지 않을까 싶다....
'파이썬(Python) > 블로그 만들기(python,flask,mongo)' 카테고리의 다른 글
| 블로그만들기(3) - (파이썬, summernote)웹에디터 게시판 글쓰기에 추가하기 (0) | 2021.02.04 |
|---|---|
| 블로그만들기(2) - 게시판 작성한 글 확인하기(파이썬) (0) | 2021.02.03 |
| 블로그만들기(1) - 게시판 글쓰기 만들기(파이썬(python),Mongodb) (0) | 2021.01.27 |