{% for word in words %} {{ word.word }} {{ word.definition }} {% endfor %} 배경과 배너 등 디자인 요소가 겹치므로 CSS 파일을 분리하여 링크로 넣어주면 같은 CSS를 적용해줄 수 있음! static 폴더에 mystyle.css 파일을 만들고 공통 요소에 대한 CSS를 잘라내어 붙여넣는다 배너 이미지는 같은 폴더에 있으니 바꿔주깅 background-image: url('logo_red.png'); index, detail 두 html 파일안에 아래 코드를 넣는다. 의미는 진자 템플릿 언어를 이용해 static 폴더 안에 mystyle.css에 해당하는 url을 만들어줘! ㄹㅏ고 하는 url_for 사용 DB에 저장된 단어 찾아서 HTML에 나타..
@app.route('/detail/') #이 주소로 가면 def detail(keyword): # API에서 단어 뜻 찾아서 결과 보내기 return render_template("detail.html", word=keyword) #detail/ 뒤에 오는 단어를 word로 보냄 Ajax를 보내서 사전 API에서 데이터를 받아오고 HTML에 채워넣는 방법 let word = '{{ word }}' //워드로 들어온 문자열 끼워넣기 $(document).ready(function () { get_definitions() }) function get_definitions() { $.ajax({ type: "GET", url: `https://owlbot.info/api/v4/dictionary/${word..
if (gu_mise >= 40) { let html_temp = `${gu_name}: ${gu_mise}` $("#gu-list").append(html_temp) } #Ajax 요청 위해 jquery import 구 : 미세먼지 로 리스트 만들기 function get_list() { $.ajax({ type: "GET", url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", data: {}, success: function (response) { let rows = response["RealtimeCityAir"]["row"]; console.log(rows) $("gu-lis..
동적 웹페이지의 종류 Client-side rendering (CSR) : 자바스크립트에 데이터를 포함해서 보낸 후, 클라이언트 쪽에서 HTML을 완성하는 방법 Server-side rendering (SSR) : 서버 쪽에서 템플릿 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법 플라스크에서 SSR을 사용하는 방법 -> Jinja! '템플릿'이 되는 HTML 문서에 데이터가 들어갈 곳을 표시해놓는 역할 API 키 Open API라도 너무 많은 요청을 보내는 등의 악용을 방지하기 위해, API 키를 배부 받아 요청 시에 같이 보내줌 1) 플라스크 서버에서 API로 요청을 보낼 때, 2) 클라이언트에서 API로 요청을 보낼 때 페이지끼리 서로 연결하기 -index.html 메인 페이지 ..
사진 넣기 기능 라이브러리 아래에 안에 $(document).ready(function () { bsCustomFileInput.init() listing() }) 서버에 @app.route('/diary', methods=['POST']) def save_diary(): title_receive = request.form['title_give'] content_receive = request.form['content_give'] file = request.files["file_give"] save_to = 'static/mypicture.jpg' file.save(save_to) doc = { 'title': title_receive, 'content': content_receive } db.diary..
3일간의 연휴 끝에, 팀원 모두가 각자 생각해온 2차 프로젝트 기능 취합! 아래와 같다. 기능 1 - 초기화면 (국내/국외) - 검색(국가or지방(아이콘 표시) / 예산(볼륨) / 내용 검색) - 카드박스 위 : 예산안 통계 바 / 지출 비용 아래 : 제목/좋아요 개수/days - 구인 커뮤니티는 본인 인증 후 가능 - 로그인 모달창 - 메뉴 고정 - 해쉬태그 별 카드박스 -> 사진뭉텅이 슬라이드(속도 낮게) main.html -> -최상단 : 아이디(로그인/회원가입) / 설정 / 마이페이지 -상단 메뉴바 1) 사이트 소개/이용 방법/FAQ(자주 묻는 질문) 메뉴바 2) 정보 공유 메뉴바 3) 커뮤니티 - detail.html -> 왼쪽 상단 사진 위 : 게시글 작성 날짜 오른쪽 상단 메뉴바 1) Bud..
1. 심화 과정 -클라이언트(브라우저,핸드폰) - API(창구) - 서버(컴퓨터의 역할, 하나의 "프로그램") -JQuery : 자바 스크립트의 라이브러리, HTML 조작을 쉽게 해줌 -AJAX : 서버 통신 위함. 클라이언트가 코드 단에서 계속 요청하고 받아옴 -아래 4가지를 파이참 프로젝트에서 패키지 설치함 Flask : 파이썬으로 서버 만드는 프레임 워크(templates,static 폴더 만들기) pymongo : DB와 연결 bs4 requests -app.py와 index.html에 코드 스니펫 붙여넣어주고, 포스팅 : 게시글 작성 리스팅 : 서버에서 긁어오기 2개의 API를 만들 것이다! 1단계 : 생김새 만들기 (HTML & CSS) 2단계 : 만들 기능 파악(포스팅/리스팅 API 2개) ..
팀 별 프로젝트 마무리 후, KTP 작성 Keep 팀원들과 원활한 소통, 의견 제시, 문제 해결, 서로 간 격려를 통해 팀원 모두가 열정적으로, 즐겁게 각자 맡은 역할을 잘 수행하며 팀 프로젝트를 충실히 해 나가고 있다. 아주 만족스럽고 뿌듯하다. Try 프로젝트 전 모델링 기간 충분히 거쳐 UML 상세히 작성 존재하는 브랜치의 역할과 기능 조율해보기 디자인적으로 다양한 자료 참고해보기 Problem 모델링 미숙 역할 분담이 구체적이지 않은 점 깃허브 사용법 미숙한 점 아래는 팀 종합 회고 KTP! https://heendoong.tistory.com/28 1차 KPT 회고 Keep 1. 팀원들의 적극적이고 원활한 커뮤니케이션 태도 2. 자유로운 의견 제시와 수용 3. 서로를 격려하면서 즐거운 팀 분위기..