본 포스팅에서는 Python 기반의 템플릿 엔진으로, 주로 웹 애플리케이션의 프론트엔드와 백엔드 사이에서 동적인 컨텐츠를 생성하는 데 사용되는 Jinja2에 대해 알아보겠습니다. 중요한 키워드인 "템플릿 엔진" 에 대해 알아보겠습니다. "템플릿 엔진"을 chatGPT에게 물어보면 아래와 같이 대답합니다. 템플릿 엔진은 동적인 콘텐츠를 생성하기 위한 마크업 언어와 로직을 조합한 도구입니다. 주로 웹 개발에서 사용되며, 정적인 HTML 코드 내에 동적인 데이터를 삽입하고 제어할 수 있게 도와줍니다. 템플릿 엔진은 서버 측에서 실행되어 클라이언트에게 동적인 HTML을 전송하는 데 사용됩니다. 즉, HTML과 같이 정적인 웹페이지에서 동적인 데이터를 삽입하고 제어할 수 있게 해주는 역할을 수행한다는 것을 알 수..

본 포스팅에서는 파이썬의 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__) ..

JQuery는 JavaScript에서 쉽게 사용할 수 있도록 만든 라이브러리입니다. JQuery를 사용하면 HTML의 컴포넌트들에 대해 쉽게 접근하여 사용할 수 있습니다. 사용 방법은 아주 간단합니다. JQuery 를 사용할 수 있도록 CDN을 선언하여주고, class, id에 따라 접근하여주면 됩니다. 예시 코드는 아래에 있습니다. 아래의 코드는 checkResult라는 버튼을 누르면 "q1", "q2"라는 id 값을 가지는 태그들이 업데이트 되는 코드입니다. 자바스크립트 문법 연습하기! 1. 함수 결과 확인하기! 2. 리스트 테스트 3. 딕셔너리 테스트 4. 리스트 딕셔너리

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