Be myself

모든 페이지에 사이드바와, 상단바, 그리고 하단의 푸터 까지 일일이 만들어 주기는 너무 귀찮고 수정에 번거로움이 있습니다. 그래서, 이 것들을 layout 이라는 이름으로 만들어 저장해 두고, 템플릿 상속 기능을 통해 모든 페이지에 일괄적으로 적용되도록 하려고 합니다. 이를 위해, 첫번째로 레이아웃을 먼저 만들 어 주겠습니다. 제가 사용할 것은 사이드바 - accordian footer 탑바 - nav 정도가 우선 될 것 같습니다. 우선, flask 의 기존 플젝과 연결되는 플젝 입니다. 기존에 만들어둔 venv 에서 templates 라는 폴더를 만들어 줍니다. 템플릿을 불러올 때, (html 파일) flask 는 알아서 templates 에서 불러옵니다. 폴더명 맞게 설정! 그리고 나서 layout...

파일을 업로드하는 html 소스는 많이 있습니다.. 근데 데이터베이스로 저장을 하려는데 생각처럼 쉽게 되지 않네요,, 다른 부분은 어느정도 쉽게 코드 해석이 되었는데,,이제부터 진짜 각잡고 공부를 해야 할 것 같습니다.... 저의 목표는 파일을 업로드 하면, 전처리 과정을 거친 뒤, 정해진 데이터베이스로 저장이 되고, 나중에 검색엔진을 넣어서 데이터베이스에서 검색해서 출력까지 하는것이 목표입니다. 그래서,,업로드 부터 시작해보려 합니다.. 우선 소스코드를 살짝 먼저 보면 from flask import Flask, render_template, request from werkzeug.utils import secure_filename app = Flask(__name__) # 업로드 HTML 렌더링 @a..

하이퍼링크를 삽입해 보겠습니다. 본문에 제목을 적고, 상세 내용을 적어주는데, 상세 설명 중, 위키피디아처럼? 이동시키는 방법입니다. ICN Raw DATA 인천공항공사 통계자료 official DataTables documentation. html 소스코드를 살펴보면, 본문제목 본문내용 여기에 원하는 내용을 넣어주면 됩니다. 다른 조건들은 크기조정, 글씨 색 등의 조건 입니다. 여기서 링크를 넣고 싶다? official DataTables documentation 링크를 걸어줄 문구 링크를 걸어줄 문구에, href 에 넣어준 링크로 이동하도록 조건을 걸어주고, 이 조건을 target명이라 지정해 준 것입니다.

지난 포스팅에서 웹페이지를 만들고 테이블을 넣는 작업까지 해 보았습니다. 아래와 같은 테이블이 완성되었는데요, 보기가 좋지 않습니다. 1. 각 칸의 넓이 조정 2. 테이블 선 3. 격줄로 색상 다르게 4. 마우스 커서를 가져가면 그 부분이 하이라이팅 되도록 이 네가지를 해보겠습니다. 테이블의 머리글부터, 첫 행까지만 코드를 보겠습니다. ICN DATA 국가 국가명 화물도착 화물출발 Date Year Month 0 일본 일본 6124 4120 2019-01-01 2019 1 테이블에 할당된 함수는 다음과 같습니다. 우선 테이블에 테이블 클래스 이름을 tableicn 이라고 지정하고 table-bordered table-hover table-striped width=604 style=width:700pt b..

부트스트랩의 여러가지 컴포넌트를 사용해 웹페이지를 만들 수 있다. 하지만, 그러면 html 소스코드 작성하고 css 따로 작성해서 연동하는 것과의 차이를 잘 모르겠다! 그래서 일단 무료 템플릿을 사용해 빠르게 웹페이지를 구현할 수 있는 부트스트랩 템플릿을 사용해서 웹페이지를 만들어 보려 한다. 우선, 원하는 템플릿을 검색해서 다운 받는다. 구글에 부트스트랩템플릿 을 검색하면 많이 나옵니다.! 저는 startbootstrap.com/ 여기서 대시보드를 다운받았습니다. Free Bootstrap Themes, Templates, Snippets, and Guides Start Bootstrap develops free to download, open source Bootstrap 4 themes, templ..

2021.04.26 - [프론트엔드/bootstrap] - [bootstrap]칼럼사이즈조정, 어떻게 pc와 모바일에 적용되는가? [bootstrap]칼럼사이즈조정, 어떻게 pc와 모바일에 적용되는가? 2021.04.26 - [프론트엔드/bootstrap] - [bootstrap] 부트스트랩 그리드, 12그리드시스템 Title html 페이지의 기본 구성 요소가 적혀 있다. 여기서 편집을 통해 페이지를 구" data-og-host="silvering0.tistory.c.. silvering0.tistory.com A B C 이전에는 사이즈에 대한 언급을 1번만 했다. 하지만 복합적으로 사용이 가능하다. col- lg-3 col-md-4 col-sm-6 이렇게 lg, md, sm 에 대해 모두 선언을 동시..

2021.04.26 - [프론트엔드/bootstrap] - [bootstrap] 부트스트랩 그리드, 12그리드시스템 [bootstrap] 부트스트랩 그리드, 12그리드시스템 파이참에서 bootstrap 을 통해 html5 로 새로운 프로젝트를 만들어 주면 다음과 같은 소스코드가 나온다. Title html 페이지의 기본 구성 요소가 적혀 있다. 여기서 편집을 통해 페이지를 구 silvering0.tistory.com 이전과 같은 소스코드를 살펴 보겠다. A B C 여기서 보면 col-md-4 라는 것이 있는데, 이는 칼럼을 중간사이즈로 4로 나눈다. 라는 것이다. 각 칼럼이 4의 사이즈를 갖는 것은 쉽게 이해가 가능하다. md? 중간사이즈? 코드를 실행해 보면 화면 구성은 다음과 같다. 하지만 화면 폭을..

파이참에서 bootstrap 을 통해 html5 로 새로운 프로젝트를 만들어 주면 다음과 같은 소스코드가 나온다. html 페이지의 기본 구성 요소가 적혀 있다. 여기서 편집을 통해 페이지를 구성할 수 있다. 12 그리드 시스템을 제공한다. ???? A B C title 을 바꿔주고, getbootstrap.com/docs/5.0/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com 여..