본 포스팅에서는 파이썬의 Beautifulsoup 라이브러리, requests 라이브러리, HTML 태그를 이용하여 웹 크롤링을 진행합니다. 아래의 코드를 실행하면 특정 URL로 부터 웹페이지에 있는 텍스트$멜론의 top100 차트 정보$를 가져올 수 있게 됩니다. 8번째 줄의 get함수는 지정된 URL로 HTTP GET 요청을 보내는 함수입니다. 즉, '지정된 URL에서 정보를 가져오겠다.'라고 웹페이지에 선언하는 것입니다. 8번째 줄의 data의 text 인자에는 지정된 URL의 웹페이지의 모든 텍스트가 들어가있는데, 9번째 줄의 BeautifulSoup에서 HTML parser를 이용하여 내용들을 잘라주는 역할을 수행합니다. from bs4 import BeautifulSoup import requ..

본 포스팅에서는 html에서 form 태그를 통해 원하는 날짜의 박스오피스 순위를 들고와서 다시 화면에 보여주는 코드를 작성해보겠습니다. 먼저 아래와 같이 HTML 코드를 작성해보겠습니다. 코드를 작성하면, input 태그를 통해 텍스트를 입력받고, button을 누르면 input 태그를 통해 받은 텍스트가 "query"라는 이름으로 "movie_boxoffice"라는 웹페이지로 라우팅 되게 됩니다. 박스 오피스 검색 사이트 "YYYYMMDD"형태로 입력하세요. 검색 "movie_boxoffice" 페이지에서 전달받은 영화 날짜의 텍스트$"query"$를 이용하여 해당 날짜의 박스오피스 정보를 가져오는 flask 서버의 코드는 아래와 같습니다. requests 라이브러리의 get 함수의 인자는 영화진흥위..

본 포스팅에서는 간단한 예시를 통해 HTML과 파이썬 Flask 백엔드 서버간의 연동에 대해 알아보겠습니다. 먼저 Flask 서버에 대해 간단하게 알아보겠습니다. Flask 서버는 Python으로 작성된 웹 프레임워크로, 가볍고 간결한 설계로 구성되어 있습니다. 주로 작은 및 중간 규모의 웹 애플리케이션을 빠르게 개발하고 구축하는 데 사용됩니다. Flask는 Jinja2 템플릿 엔진과 Werkzeug 웹 서버를 포함하고 있습니다. 아래는 Flask 서버의 홈페이지에서 랜덤 로또 번호와 고정된 로또 번호 그리고 두 번호 사이에 몇 개나 맞았는지를 출력해주는 코드입니다. from flask import Flask, render_template import random app = Flask$__name__$ ..

css에서 간격을 조절하는 것 중에 "margin"인자와 "padding"인자가 있습니다. "padding"은 태그 안의 요소의 간격을 지정하는 것이라면, "margin"은 태그들 끼리의 간격을 지정하는 것입니다.

html의 태그를 이용하여 정렬을 할 때, 기본적인 방향은 가로 방향입니다. 하지만, css의 옵션으로 "flex"를 주게되면, 정렬 방향이 세로 방향으로 바뀌게 됩니다. "flex-direction" 인자를 통해서 원래 방향인 세로 방향으로 정렬되도록 변경할 수도 있습니다. 한편, css에서 "justify-content"라는 인자와 "align-items"인자가 있는데, "justify-content"라는 인자는 주축$flex$에 대해 어떻게 정렬할 지 선택하는 인자이고, "align-items"는 주축이 아닌 축에 대해 어떻게 정렬할 지 선택하는 인자입니다. 위의 글을 정리한 그림과 코드는 아래와 같습니다. 1 2 3 text text text

html에서 tag를 사용할 때, css의 선택자로 id, class를 사용할 수 있습니다. id 선택자를 사용하는 경우, css에서 "#"으로 접근할 수 있고, class 선택자를 사용하는 경우, css에서 "."으로 접근할 수 있습니다. class, id 선택자를 이용하는 예시 코드는 아래와 같습니다. 로그인 페이지 ID: PW: 로그인 하기