여행하는 코딩끄적끄적

목차 기본 Templates 구성하기 이번에는 기존에 가져온 무료 Bootstrap(부트스트랩) Templates에 댓글(Comment)창을 추가하려고 합니다. 기본 Templates 구조는 블로그 형태 입니다. 무료 Templates를 가져와서 사용하는 방법은 아래 링크를 참조 하시면 됩니다. https://scribblinganything.tistory.com/404 [Bootstrap] Templates 무료 예제로 Flask와 연동하기 목차 Templates 무료 예제 다운(Download) 받기 우선 Bootstrap으로 만든 HTML 무료 예제를 다운 받습니다. 이번 예제에 사용할 Template는 아래 링크에서 가져 왔습니다. https://startbootstrap.com/template/..

목차 Templates 무료 예제 다운(Download) 받기 우선 Bootstrap으로 만든 HTML 무료 예제를 다운 받습니다. 이번 예제에 사용할 Template는 아래 링크에서 가져 왔습니다. https://startbootstrap.com/template/simple-sidebar Simple Sidebar - Bootstrap Sidebar Template - Start Bootstrap Like our free products? Our pro products are even better! Go Pro Today! startbootstrap.com 심플한 디자인이고 각 각 하나의 HTML, JS, CSS 파일로 구성되어 있습니다. "startbootstrap-simple-sidebar-gh-p..

목차 [Bootstrap]HTML 버튼(button) 오른쪽 정렬 HTML 문서를 작성하면 버튼(Button), 라벨(Label), 입력창(Input)을 마음대로 배치하고 싶은데, 생각한 위치로 가지가 않는 경우가 많습니다. 가령 오른쪽으로 정렬할 경우 버튼을 오른쪽 끝에 붙여서 아래로 하나 둘씩 배치하고 싶은데 일반적인 방법이 css의 float를 사용하는 방법인데 코드>> 로그인 로그인 이 경우 아래 그림 처럼 아래 위가 아닌 오른쪽에 붙어서 배치가 됩니다. 결과>> 코드 라인1 : bootstrap button class 를 사용해서 버튼을 만들고 style을 이용해서 float로 오른쪽에 배치하였습니다. 이방법이 인터넷에 일반적으로 오른쪽 정렬 방법으로 올라와 있습니다. [Bootstrap]HTM..

목차 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바랍니다 (https://scribblinganything.tistory.com/298) HTML - Bootstrap 사용해서 공간 배치하기 (Grid) Bootstrap의 Grid를 사용한다는 의미는 웹 화면의 Front end를 엑셀처럼 열과 행으로 나눠서 사용하겠다는 의미 입니다. Bootstrap에서 제공하는 클래스(Class)의 클래스명을 row와 column을 사용해서 정의할 수있습니다. row : 행 지정 column : 열 지정 행의 경우 웹화면에서 스크롤을 내려서 계속 만들 수 있지만 열의 경우 12개의 열로 고정되어 있습니다. 아래 그림은 최대치로 열을 설정..

목차 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바랍니다 (https://scribblinganything.tistory.com/298) HTML - Bootstrap 사용해서 공간 배치하기 (Container) Web에서 Frontend 디자인에서 레이아웃을 설정하는 것은 어려운 일입니다. 사이즈를 고정하면 웹브라우져의 화면에 따라 유연하게 반응하기 어렵습니다. Container 클래스 값을 적용하는 것만으로 쉽게 배치 문제를 해결할 수 있습니다. Container 클래스의 종류는 아래와 같습니다. container container-sm container-md container-md container-xl Bootstra..

사용방법에 대해 간략한 소개 Bootstrap 에서는 많은 무료 예제 Front end (Html + CSS)를 제공한다. 예제를 비쥬얼 스튜디어에서 실행해서 HTML을 즉각적으로 확인하면서 변경할 필요가 있다. 이를 위해 필요한 확장 툴 "Live Server"가 필요 하다. 다음은 설치 부터 사용에 대한 방법을 알려주겠다. 설치 순서 및 확인 1. 그림1과 같이 Visual Studio를 실행하고 왼쪽에 조각난 네모그림(확장)을 클릭하면 필요한 확장 툴을 찾을 수 있는 검색창이 나온다. 검색창에 "live server" 라고 검색한다. 2. 그림1처럼 설치가 완료 되면 오른쪽 하단과 같이 "Go Live"라는 텍스트가 생긴다. 3. 그림2와 같이 Bootstrap 예제 화면에 접속한다. (https:..

HTML에서 Bootstrap의 margin, padding 사용방법 Padding 이나 Margin을 넣고 싶은 태그에 Class 를 선언하고 클래스 값을 입력한다. 값의 첫번째 문장은 margin이냐 padding이냐를 결정한다. 아래와 같이 m은 margin을 의미하고 p는 padding을 의미한다. m - for classes that set margin p - for classes that set padding 다음으로 위치를 정하는 letter를 넣는다. 위,아래,왼쪽,오른쪽을 여기서 정할 수 있다. 아래 letter를 보고 결정하면 된다. t - for classes that set margin-top or padding-top b - for classes that set margin-bot..

블로그 만들기(3)에서 만들었던 내용에서 bulletin_wr.html을 bootstrap과 css 를 사용해서 이쁘게 꾸미려고 한다. 우선 bootstrap과 css를 전문적으로 배운적이 없기 때문에 인터넷 검색을 통해서 작성했으니 감안하고 확인하길 바란다. 이전에 꾸미지 않은 상태의 화면은 블로그 만들기(3)에서 확인하길 바란다. 그리고 코드를 수정해서 아래와 같이 변경하였다. 변경후 bulletin_wr.html>> 결과 화면에 대한 주석>> 결과 화면에서 Home 과 search 부분은 파이썬에서 구현 된 것은 없다. HTML에 미리 만들어 놓고 나중에 파이썬과 연결할 생각이다. 제목 부분은 input으로 받고 내용은 summernote를 적용하였다. 코드 bulletin_wr.html>> Hom..

bootstrap을 간단하게 말하자면 트위터에서 개발한 일종의 라이브러리/템플릿 정도로 보면 된다. 우리가 웹사이트를 개발할때 사람들에서 보여지는 front end를 개발해야 하는데 이부분이 미적감각도 있어야 하고 javascript css 등 신경써야할 부분이 많다. 이런 노동들을 줄이고자 많은 bootstrap template를 유료 또는 무료로 사용할 수 있다. 여기서는 간단히 로그인 페이지를 무료 template를 가져와서 flask와 연동해서 만들어 보겠다. https://getbootstrap.com/docs/5.0/examples/ 위 링크에서 example를 다운로드 한다. 그중에 bootstrap-5.0.0-beta1-examples\bootstrap-5.0.0-beta1-examples..