HTML+CSS+JS+Flask

파일 업로드 / 속성값(jquery)

파일 업로드 파일을 업로드하려면 input 태그에 type 속성을 file로 설정해서 사용할 수 있다! 또한 이미지만 업로드 하는 경우는 accept 속성을 image/*와 같이 설정하면 된다. 만약 image 파일에서 png 확장자만 선택하고 싶다면 accept 속성에 image/png와 같이 설정하면 된다. 속성값 (files) 선택자나 jquery를 이용해서 file input 요소에 접근한 후에 files라는 속성값을 이용해서 파일의 객체를 확인할 수 있다! 여기서는 jquery를 사용해서 해당 파일 객체를 확인하는 방법을 알아보자 아래와 같이 jquery를 임포트하고 file input에 id 값을 주자. 파일을 하나 선택한 후에 콘솔창을 열어보자! $('#file')[0] jquery로 해당 ..

파비콘 설정하기

Flask에 파비콘 적용하기 이미지를 static 폴더에 넣고 만약 파비콘의 이름이 favicon.ico라면 아래처럼 태그 사이에 작성해서 사용할 수 있다! 파비콘 제작 (참고용) 만약 간단한 파비콘을 가져다 쓰고 싶으면 구글에 이모지를 검색해서 사용할 수 있다! 파비콘을 제작하고 싶으면 아래 링크에 접속해서 파비콘을 제작할 수 있다. http://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favi..

크롤링한 데이터 mongoDB에 저장하기

What to do? 네이버 영화 랭킹 홈페이지에 들어가서 영화의 평점 순위, 제목, 평점을 크롤링해서 mongoDB에 저장해보자 db의 이름은 duck, 콜렉션의 이름은 movies로 하자! https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829 랭킹 : 네이버 영화 영화, 영화인, 예매, 박스오피스 랭킹 정보 제공 movie.naver.com 순서 request, bs4, pymongo 라이브러리 설치 크롤링할 데이터를 soup 객체에 저장 pymongo로 mongoDB와 연결 soup 객체에서 원하는 데이터만 추출해서 mongoDB에 저장 소스코드 import requests from bs4 import BeautifulS..

og 태그

og 태그 프로젝트를 카톡/페북 등에 공유했을 때 예쁘게 나오도록 꾸며보자! static 폴더 아래에 이미지 파일을 넣고, 프로젝트 내의 HTML의 사이에 아래 내용을 작성하면 og 태그를 개인 프로젝트에 사용할 수 있다. 사이트의 제목 입력하기 보고 있는 페이지의 내용 요약 입력하기 적당한 이미지를 만들거나 골라서 static 폴더에 ogimage.png로 저장하기! 만약 파일의 형태가 jpg면 jpg로 저장하자. (사이즈가 800x400)인 이미지를 구글에서 검색하자) 아래는 og 태그 탬플릿 코드이다! 참고!! 만약 이미지를 바꿨는데 이전 ogimage가 그대로 나오면 아래 링크를 참고해서 초기화하자! 페이스북 og 태그 초기화 하기: https://developers.facebook.com/too..