본 포스팅에서는 간단한 예시를 통해 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. 리스트 딕셔너리

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: 로그인 하기