웹 프레임워크 Flask - 3 (BootStrap, CSS, font, OpenWeatherMap)

※ bootstrap 사용 시 HTML에 추가 필수!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

 

1. https://getbootstrap.com/

Bootstrap

: Bootstrap을 통해서(NavBar, card, dropdown, ...) 원하는 기능을 웹에 넣을 수 있음

 

1-2. VS Code - bootstrap 4

패키지 설치

: html 문서에 b4를 입력할 경우 원하는 형식의 폼을 자동생성해주는 기능을 가짐

- jQuery CDN(content delivery network): 인터넷 접속(개발시 주로 사용됨) code.jquery.com/

jQuery CDN

: javaScript 라이브러리를 가져오는 용도로 사용되며, 사용자가 많은 곳에서 라이브러리를 가져올 때 발생할 수 있는 트래킹 문제를 jQuery 또는 Google의 CDN을 통해 해결(사용자는 가까운 곳에서 컨텐츠를 받기 때문에 사용효율 증가)

minified 클릭 및 내용 복사

jQuery 문의 내용 일부 수정 (jquery-3.3.1.slim.min.js > jquery-3.5.1.min.js)

 

2. CSS (cascade style sheet) : 장식 역할을 해주고, 필요한 기능을 검색 및 입력, 값 수정을 통해 디자인이 가능

※ jinja2 (HTML)

: python 문법을 Python의 웹 프레임워크인 Flask를 통해 HTML 문서 내에서 사용하도록 만든 Template 엔진

 (모든 문법이 적용되지 않음, for문의 경우에 zip, enumerate 등등 사용이 불가. 단순한 for문만 가능하도록 설계)

{ { ... } } : 변수 선언문, 표현식

{% ... %} : 제어문(if, for, block, ...)

{# ... #} : 주석

 

3. Font

사이트에서 언어 및 폰트를 선택한 후, select this stype 선택

중앙에 있는 link 태그를 복사한 뒤

노출을 원하는 위치에 넣으면 완료

지역, 온도, 아이콘 표시

4. OpenWeatherMap (Google)

가입 후, 무료로 사용가능한 key를 발급받은 다음, 해당 키를 활용해서 날씨 정보를 받아옴

OpenWeatherMap 에서 제시하는 데이터 호출 방식을 requests를 활용하여 json 형태로 받은 후, 내용의 일부를 추출하여 전송 및 띄우는 방식을 활용