Backend/Django + Bootstrap 개발 일지

3. 전체적인 웹 사이트 모양 구성

● 블로그 페이지 모양 구현 CSS와 내비게이션 바 가져오고 페이지 내용이 들어갈 부분 구성 blog_list.html 파일을 열어서 기존에 about_me.html 파일에서 만들었던 내비게이션 바를 붙여 넣는다. 화면 크기가 medium일 때 8:4 large일 때 9:3이 되도록 하기 위해 container를 class로 갖는 div를 만들고 위아래 여백을 주기 위해 my-3을 입력한다. Start Bootstrap에서 템플릿 찾기 Bootstrap 공식 홈페이지가 아니더라도 템플릿을 제공하는 홈페이지가 찾아보면 많이 있다. 그 중에 start bootstrap 이라는 사이트를 이용하기로 하였다. https://startbootstrap.com/ Free Bootstrap Themes, Templat..

2. Bootstrap 으로 내비게이션 바 수정, 레이아웃 적용, grid로 구성 관리

● 내비게이션 바 수정 Conponents에서 내비게이션 바 고르기 https://getbootstrap.com/docs/5.1/components/navbar/ Navbar Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. getbootstrap.com Bootstrap 웹 사이트의 Doc 탭을 클릭한 후 Components 를 클릭한 후 Navbar 를 선택한다. copy 버튼을 누른 후 이전에 미리 만들어 둔 a..

1. Bootstrap 이란?, 기본적인 사용법

Bootstrap 이란 ? 스마트폰, pc, 테블릿 딩 다양한 크기의 화면에 대응할 수 있는 툴킷이다. 웹 디자인에 자신이 없어도 손쉽게 이를 해결할 수 있게 해준다. 기본적인 사용법 (CSS 적용) Bootstrap 공식 사이트에 접속후 다운로드 한다. (getbootstrap.com) 그 후 쓰고자 하는 버전을 클릭한 후 Compiled CSS and JS 목록의 다운로드 버튼을 눌러 압축파일을 다운로드 받는다. 미리 만들어둔 index.html 파일에 쓰기위해 압축파일 안에 있는 bootstrap.min.css 와 bootstrap.min.css.map 이 두개만 압축을 해제한 후 프로젝트 폴더안에 관리하기 쉽도록 따로 Bootstrap/css 폴더를 만든 후 집어넣는다. 집어넣은 bootstrap..

개발하고자 하는 웹 사이트 기능 개요

웹 사이트를 개발하기에 앞서서 어떤 기능을 구현 할 것인지 미리 구상 하고 여기에 정리한다. 회원가입 댓글 작성, 수정, 삭제 게시글 검색 권한있는 사람의 글 쓰기 허용, 사용자 권한 설정 소셜 로그인 기능 배포 하여 어디든지 접속 가능 HTTPS 인증