본문 바로가기

HTML

(7)
CSS 기초 예제 movies - 예제 웹페이지 https://verdantjuly.github.io/mypage_movies/ - 예제 코드 https://github.com/verdantjuly/mypage_movies/blob/main/index.html 스파르타 코딩클럽 웹개발 종합반 수강 후 연습
팬명록 : 스파르타 코딩클럽 웹개발 종합반 5주차 오늘은 드디어 웹개발 종합반의 마지막 수업이다. 파이팅! 1. app.py from flask import Flask, render_template, request, jsonify app = Flask(__name__) from pymongo import MongoClient import certifi ca = certifi.where() client = MongoClient('mongodb+srv://sparta:test@cluster0.0uiki8z.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca) db = client.dbsparta @app.route('/') def home(): return render_template('index.html')..
버킷리스트 : 스파르타 코딩클럽 웹개발 종합반 5주차 0-1. 프로젝트 기본 세팅 (참고자료) 1) 폴더 열기 2) app.py 생성 3) 가상환경 설정 4) templates > index.html 5) 라이브러리 설치 pip install flask pymongo dnspython bs4 0-2. API 만들기 규칙 1) 데이터 명세 2) 클라이언트와 서버 연결 확인하기 3) 서버부터 만들기 4) 클라이언트 만들기 5) 완성 확인하기 1.서버 만들기 app.py from flask import Flask, render_template, request, jsonify app = Flask(__name__) from pymongo import MongoClient import certifi ca = certifi.where() client = MongoCl..
스파르타피디아 : 스파르타 코딩클럽 웹개발 종합반 4주차 오늘은 계속 미뤄왔던 스파르타피디아 프로젝트를 열어 봤다. 저번에 6시간 동안 철자 오류 하나에 시간을 허비하고 나서는 조금 멍한 기분이라 집중을 하기 어려웠다. 공부 효율을 늘이기 위해 오류를 줄여나가야겠다. 0. 프로젝트 세팅 참고자료 (바로가기) 1) 폴더 열기 2) app.py 생성 3) 가상환경 설정 4) templates > index.html 5) pip install flask pymongo dnspython bs4 * 모르는 기능을 먼저 구현해 보고, 내가 아는 기능을 구현하기 * 데이터 쌓기 > 데이터 가져오기 순으로 만들기 1. 메타 태그 ex) 카카오톡에 url 올리면 제목과 사진이 밑에 나온다. import requests from bs4 import BeautifulSoup UR..
Flask 기초 : 스파르타 코딩클럽 웹개발 종합반 4주차 앞서 만들었던 python 파일을 웹페이지로 만들기 위해 여기 저기 알아보면서 본 단어다. Flask.... 뭔가 실마리를 찾을 수 있을 듯 하다. 1. Flask 기초 프레임워크 Flask 2. app.py 만들기 통상적으로 flask에서 기본 파일은 app.py로 만들어 준다. 3. 가상환경 만들기 가상환경 : 프로젝트별로 라이브러리를 담아 놓는 통 1) 터미널 > 새 터미널 2) python3 -m venv venv ⊞ windows : python -m venv venv 3) 터미널 닫고 다시 열어서 (venv) 확인 4. Flask 설치 pip install flask 5. flask 시작 코드 입력 후에 터미널에서 파일 실행 클릭 from flask import Flask app = Flask..
Javascript JQuery Fetch 기초 : 스파르타 코딩클럽 웹개발 종합반 2주차 오늘은 개발일지를 적는 2번째 날이다. 스파르타 코딩클럽의 웹개발 종합반 2주차 수업을 들었다. Javascript JQuery Fetch 에 대한 내용이었으며 실습을 통해 API에서 정보를 받아오는 웹페이지를 만들 수 있었다. 1. 주요 개념 정리 및 공부 준비 1-1. Javascript JQuery Fetch 용어 { } 딕셔너리 [ ] 리스트 Javascript : 동작을 명령 JQuery : 누군가가 만들어 놓은 코드 조각 (Javascript로 길게 써야 하는 것을 간단하게 쓸 수 있다) Fetch : 서버에서 데이터를 가져와서 활용 API : 데이터를 주는 은행 창구 JSON : 서버에서 클라이언트로 데이터를 내려 줄 때 dictionary 형식으로 내려 주는 것 1-2. Console 웹페..
HTML , CSS 기초 : 스파르타 코딩클럽 웹개발 종합반 1주차 오늘은 내가 개발일지를 처음 적는 날이다. 앞으로 매일 배운 내용과 소감을 간단하게 정리하려 한다. 스파르타 코딩클럽의 웹개발 종합반 1주차 수업을 들었다. 주로 HTML에 관한 내용이었으며, 실습을 통해 나만의 웹페이지를 만들 수 있었다. 1. HTML 저장 단축키 ⊞ Windows : Ctrl + S  Mac : Command + S 2. HTML5 HTML의 기본 양식 html:5 라고 입력한 뒤 선택 후 Enter 를 누르면 실행된다. 3. 주요 HTML 태그 주요 HTML 태그 h1 제목 (구글 검색에 1번으로 노출) span 글자를 감싸기 class 범위를 지정 div 박스 4. HTML 로 만든 화면 보기 1. 빈 공간에서 오른쪽 마우스 클릭 2. Open with live server 3..