본문 바로가기

DEV/Web 개발97

파이썬 웹 프로그래밍 :: html/CSS 스타일, 소개 페이지 제작(2)_TIL#02 ■ JITHub 개발일지(TIL : Today I Learned) 2일차 □ TIL :: HTML/CSS/Javascript/Jquery/Ajax/Flask/MongoDB/... 1. 네비게이션바 상단에 위치 하기 (1) 헤더가 될 부분과 네비게이션바를 ... 안쪽에 ... 태그를 만들어 내부에 작성한다. (2) 헤더 제목, 그리고 네비게이션 바가 될 소스를 넣는다. (3) 헤더를 고정하기 위해 style 지정을 한다. 안에 지정. (*참고 : 링크) - header에는 position : fixed; (헤더를 고정하는 역할) - 페이지를 올렸을 때 헤더가 다른화면에 가려지지 않도록 z-index : 1;을 넣어준다 - body에는 padding-top : 000px; (본문이 헤더에 일정부분 가려지므로.. 2022. 8. 30.
파이썬 웹 프로그래밍 :: html/CSS 스타일, 소개 페이지 제작_TIL#01 ■ JITHub 개발일지(TIL : Today I Learned) 1일차 □ TIL :: HTML/CSS/Javascript/Jquery/Ajax/Flask/MongoDB/... 1. Style - background-size 속성별 기능 2. 자주 사용하는 스타일 (1) background * 배경을 어둡게 하고 싶을 때 유용한 code 아래 붉은 부분을 url 앞쪽에 붙여넣어서 사용한다. (2) flex - 내용 가운데 정렬할 때 기본적으로 아래의 코드를 가져와서 사용하면 편하다. 구역 내 요소의 배열(열 방향/행 방향)을 변경시 아래와 같이 flex-direction : column ↔ row 선택하여 사용 (3) 마우스를 위에 올렸을 때 효과 : 클래스명 > button:hover { /// } .. 2022. 8. 29.
파이썬 웹 프로그래밍 :: aws 활용 웹 퍼블리싱 파이썬 웹 프로그래밍_aws 활용 웹 퍼블리싱 들어가면서.. aws 서버 구매, Flask 서버 셋팅 및 실행, 도메인 연결을 통한 웹 퍼블리싱 마무리 1. 사전 준비 · FileZilla 설치 : https://filezilla-project.org/download.php · gabia 가입 및 도메인 구매 : 할인이벤트(500원/1년)를 진행하는 도메인으로 구매 2. 실습 프로젝트. 버킷리스트 1) app.py from flask import Flask, render_template, request, jsonify app = Flask(__name__) from pymongo import MongoClient client = MongoClient('내 URL 입력') db = client.dbspar.. 2022. 7. 24.
파이썬 웹 프로그래밍 :: 파이썬 플라스크(Flask) 서버 제작, API 생성, Client 연결 파이썬 플라스크(Flask) 서버 제작, API 생성, Client 연결 들어가면서.. Flask를 활용하여 서버를 만들고, 본격 API를 만들어본다. 1. Flask 패키지 설치 및 사용 준비 · 먼저 Flask 패키지를 설치한다. 파이썬 패키지 설치 방법은 링크(https://ggommappooh.tistory.com/17) 문서의 '2. 파이썬 패키지 설치하기'를 확인해본다. · flask 시작 코드(아래 확인 ↓) from flask import Flask app = Flask(__name__) @app.route('/') def home(): return 'This is Home!' if __name__ == '__main__': app.run('0.0.0.0',port=5000,debug=Tr.. 2022. 7. 24.
파이썬 웹 프로그래밍 :: 파이썬 웹 크롤링, 몽고디비(MongoDB) 파이썬 웹 프로그래밍 _ 파이썬 웹 크롤링, 몽고디비(MongoDB) 들어가면서.. 이제 웹에 있는 자료들을 가져와 데이터베이스에 저장하고 이를 활용하고자 한다. 1. html 기본 구조(ajax) · 웹에 저장된 OPEN API 자료를 활용하기 위한 html ajax function 함수 구조 (1) type : 데이터를 'GET' 타입으로 받아올 것인지, 'POST' 타입으로 받아올 것인지? (2) url : 대상이 될 API의 url 주소 (3) data : 교환할 Data (4) success : 함수 실행시 동작되는 기능 $(document).ready(function(){ listing(); }); function listing() { $.ajax({ type: "GET", url: "http.. 2022. 7. 24.
파이썬 웹 프로그래밍 :: jQuery, Ajax를 활용한 웹 화면 생성 파이썬 웹 프로그래밍_jQuery, Ajax 웹 화면 생성 들어가면서.. 본 포스팅을 통해 jQuery와 Ajax에 대한 기본 개념을 설명하고자 한다. 1. jQuery · HTML의 요소를 조작하기 위한 JavaScript를 미리 작성해 둔 라이브러리 중 하나 간단한 코드, 브라우저 간 호환성을 개선 //Javascript document.getElementById("element").style.display = "none"; //jQuery로 보다 직관적이고 간단하게 표현 가능 $('#element').hide(); · 사용 전 import가 필요하다 → 홈페이지(*링크)의 jQuery CDN부분 참고 내 생애 최고의 영화들 영화 기록하기 // onclick="open_box()"로 위의 기능과 연결.. 2022. 7. 22.
파이썬 웹 프로그래밍 :: HTML, CSS 기본개념 파이썬 웹 프로그래밍 _ HTML, CSS 기본 개념 들어가면서.. 본 포스팅을 통해 HTML과 CSS를 사용하기 위한 기초지식을 정리하고자 합니다. 1. HTML은 프레임, CSS은 채색 · HTML은 구역과 텍스트를 나타내는 코드, CSS는 구역을 꾸며주는 것 · HTML 내에서도 style 속성으로 꾸미기가 가능하나, 현재는 이를 한데 모아 볼 수 있는 CSS 파일이 생겨남 · HTML 코드 내에 CSS 파일을 불러와서 적용 (CSS는 대부분 웹디자이너나 퍼블리셔에게 의존) 2. HTML의 구조 · HTML은 크게 head와 body로 구성 (1) head : 페이지의 속성정보 (2) body : 페이지의 내용 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2.. 2022. 7. 12.
반응형

티스토리툴바