카테고리 없음

✨프리랜서코딩 4탄~HTML 태그 종류나, 웹사이트 만드는 방법!!

라니머니 2025. 4. 17. 06:11
반응형

🔥 Flask란?

Flask는 파이썬(Python)으로 웹사이트나 웹앱을 만들 수 있게 해주는 프레임워크입니다.

쉽게 말해, 파이썬으로 간단하고 빠르게 웹사이트를 만들 수 있게 도와주는 도구예요.

✅ Flask의 특징

  • 가볍고 단순해서 배우기 쉬움 (특히 초보자에게 딱!)
  • 웹 페이지 URL 설정, 버튼 기능, 사용자 입력 처리 등을 쉽게 구현 가능
  • 필요한 기능만 골라 쓸 수 있는 마이크로 프레임워크
  • 백엔드 개발 입문자나 사이드 프로젝트용으로 인기 많음

🔧 간단한 Flask 코드 예시

python
복사편집
from flask import Flask app = Flask(__name__) @app.route("/") def home(): return "Hello, Flask!" if __name__ == "__main__": app.run(debug=True)
  • @app.route("/")는 홈페이지 주소를 뜻해요
  • 위 코드를 실행하면 http://localhost:5000/에 접속해서 “Hello, Flask!” 메시지를 볼 수 있어요

🌐 Flask로 만들 수 있는 것들

  • 개인 블로그
  • 포트폴리오 웹사이트
  • 간단한 쇼핑몰
  • 설문조사 / 게시판 / 챗봇 등 다양한 웹앱

🦄 Django란?

Django는 파이썬 기반의 웹 프레임워크로,
빠르게, 그리고 안전하게 웹사이트를 만들 수 있게 도와주는 도구예요.

“Flask가 가볍고 단순한 도구라면, Django는 풀옵션 갖춘 고급 웹 빌더!”

✅ Django의 주요 특징

항목설명
풀스택 프레임워크 로그인, 회원가입, 관리자 페이지, DB연동 등 대부분 기본 내장
빠른 개발 복잡한 웹앱도 빠르게 구현 가능
보안에 강함 해킹 위험 방지 기능이 기본 탑재 (CSRF, SQL Injection 등)
관리자 페이지 자동 생성 코딩 몇 줄로 관리자 페이지가 뚝딱!
대규모 프로젝트에 적합 실제 기업에서 많이 사용 (인스타그램도 Django 기반)

🌱 Django vs Flask 간단 비교

항목FlaskDjango
학습 난이도 쉬움 중간 ~ 약간 어려움
유연성 높음 규칙 많음
규모 소규모 프로젝트에 적합 중대형 프로젝트에 적합
관리자 페이지 직접 만들어야 함 자동 생성됨
기능 구성 필요한 것만 추가 대부분 포함됨 (All-in-One)

🔧 간단한 Django 코드 흐름

  1. 프로젝트 생성
bash
복사편집
django-admin startproject mysite
  1. 앱 생성
bash
복사편집
python manage.py startapp blog
  1. URL, 뷰(View), 템플릿 연결
  2. 서버 실행
bash
복사편집
python manage.py runserver

📌 Django로 만들 수 있는 것들

  • 대형 웹사이트
  • 커뮤니티 사이트 (예: 게시판, SNS)
  • 전자상거래(쇼핑몰)
  • 포트폴리오, 블로그, 기업 웹사이트

💡 Flask + HTML/CSS 연동

🔐 로그인 시스템 만들기

🗃 데이터베이스 연결 (MySQL, SQLite)

✅ 1. Flask + HTML/CSS 연동

Flask는 templates 폴더 안에 HTML 파일을 넣고, render_template() 함수를 이용해서 화면을 띄웁니다.

📁 폴더 구조 예시

cpp
복사편집
myapp/ ├── app.py ├── templates/ │ └── index.html ├── static/ │ └── style.css

📄 app.py

python
복사편집
from flask import Flask, render_template app = Flask(__name__) @app.route("/") def home(): return render_template("index.html") # templates 폴더 안의 파일을 불러옴 if __name__ == "__main__": app.run(debug=True)

📄 templates/index.html

html
복사편집
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> <title>Flask + HTML</title> </head> <body> <h1>Hello Flask + HTML/CSS!</h1> </body> </html>

✅ 2. 로그인 시스템 만들기 (기본 예제)

라이브러리 설치

bash
복사편집
pip install flask flask-login

핵심 코드 흐름

python
복사편집
from flask import Flask, render_template, request, redirect, url_for from flask_login import LoginManager, login_user, logout_user, login_required, UserMixin app = Flask(__name__) app.secret_key = 'your_secret_key' login_manager = LoginManager() login_manager.init_app(app) # 가상 유저 데이터 users = {"admin": {"password": "1234"}} class User(UserMixin): def __init__(self, id): self.id = id @login_manager.user_loader def load_user(user_id): return User(user_id) @app.route('/login', methods=['GET', 'POST']) def login(): if request.method == 'POST': username = request.form['username'] password = request.form['password'] if users.get(username) and users[username]['password'] == password: login_user(User(username)) return redirect(url_for('dashboard')) return render_template('login.html') @app.route('/dashboard') @login_required def dashboard(): return "로그인 성공! 대시보드 페이지입니다." @app.route('/logout') @login_required def logout(): logout_user() return redirect(url_for('login'))

간단한 로그인 HTML (login.html)

html
복사편집
<form method="POST"> <input name="username" placeholder="아이디"><br> <input name="password" type="password" placeholder="비밀번호"><br> <button type="submit">로그인</button> </form>

✅ 3. 데이터베이스 연결 (SQLite / MySQL)

📌 SQLite 연결 (가장 쉽고 간단한 방식)

bash
복사편집
pip install flask_sqlalchemy
python
복사편집
from flask_sqlalchemy import SQLAlchemy app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db' db = SQLAlchemy(app) class User(db.Model): id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(80), unique=True) password = db.Column(db.String(120)) with app.app_context(): db.create_all() # 테이블 생성

📌 MySQL 연결

bash
복사편집
pip install pymysql flask_sqlalchemy
python
복사편집
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://아이디:비밀번호@localhost/DB이름'

참고: MySQL은 로컬에 서버 설치 필요 (XAMPP, MySQL Workbench 등)

🎁 정리

항목기술
화면 표시 Flask + render_template() + HTML/CSS
로그인 시스템 flask-login
DB 연결 SQLAlchemy (SQLite or MySQL)

 

🧪 미니 프로젝트: 간단한 회원가입 + 로그인 + 게시판 웹앱

✅ 프로젝트 기능

  1. 회원가입
  2. 로그인 / 로그아웃
  3. 로그인된 사용자만 글 작성 가능
  4. 게시글 목록 및 상세보기
  5. SQLite 데이터베이스 사용

📁 폴더 구조 예시

arduino
복사편집
flask_project/ ├── app.py ├── models.py ├── templates/ │ ├── base.html │ ├── login.html │ ├── register.html │ ├── home.html │ ├── write.html │ └── post_detail.html ├── static/ │ └── style.css

🧩 1. app.py (메인 실행 파일)

python
복사편집
from flask import Flask, render_template, request, redirect, url_for, session from models import db, User, Post from werkzeug.security import generate_password_hash, check_password_hash app = Flask(__name__) app.secret_key = 'secretkey' app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///project.db' db.init_app(app) @app.before_first_request def create_tables(): db.create_all() @app.route('/') def home(): posts = Post.query.order_by(Post.id.desc()).all() return render_template('home.html', posts=posts) @app.route('/register', methods=['GET', 'POST']) def register(): if request.method == 'POST': username = request.form['username'] password = generate_password_hash(request.form['password']) db.session.add(User(username=username, password=password)) db.session.commit() return redirect(url_for('login')) return render_template('register.html') @app.route('/login', methods=['GET', 'POST']) def login(): if request.method == 'POST': username = request.form['username'] user = User.query.filter_by(username=username).first() if user and check_password_hash(user.password, request.form['password']): session['user_id'] = user.id return redirect(url_for('home')) return render_template('login.html') @app.route('/logout') def logout(): session.pop('user_id', None) return redirect(url_for('home')) @app.route('/write', methods=['GET', 'POST']) def write(): if 'user_id' not in session: return redirect(url_for('login')) if request.method == 'POST': title = request.form['title'] content = request.form['content'] db.session.add(Post(title=title, content=content)) db.session.commit() return redirect(url_for('home')) return render_template('write.html') @app.route('/post/<int:post_id>') def post_detail(post_id): post = Post.query.get(post_id) return render_template('post_detail.html', post=post) if __name__ == '__main__': app.run(debug=True)

🧩 2. models.py (데이터 모델 정의)

python
복사편집
from flask_sqlalchemy import SQLAlchemy db = SQLAlchemy() class User(db.Model): id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(80), unique=True, nullable=False) password = db.Column(db.String(120), nullable=False) class Post(db.Model): id = db.Column(db.Integer, primary_key=True) title = db.Column(db.String(200)) content = db.Column(db.Text)

🧩 3. HTML 템플릿 요약 (templates 폴더 안)

  • base.html – 공통 레이아웃
  • home.html – 게시글 목록
  • login.html / register.html – 로그인 & 회원가입 폼
  • write.html – 글쓰기 폼
  • post_detail.html – 게시글 상세보기

🎁 추가 팁

  • flask run 또는 python app.py로 실행
  • localhost:5000 접속
  • SQLite로 작동하므로 설치 없이 실행 가능
  • 로그인, 글 작성, 글 목록, 디테일 기능 확인 가능

✅ [1] 전체 코드 zip 파일 or GitHub 템플릿

  • 직접 실행 가능한 Flask 프로젝트 전체 구성
  • 정리된 폴더 구조 + 코드 주석 포함
  • 실행 가이드 (README.md) 포함

✅ [2] 기능 확장 예정 (다음 단계)

  1. 💬 댓글 기능
    → 게시글 상세 페이지에 댓글 등록/출력 기능
  2. 🔍 검색 기능
    → 게시글 제목/내용으로 검색 가능한 검색창
  3. 🖼 이미지 업로드 기능
    → 글 작성 시 이미지 첨부하고 보여주기 (Flask + werkzeug, uploads/ 저장)

🎉 Flask 미니 프로젝트 zip 파일

이 프로젝트는 다음 기능을 포함합니다:

  • 회원가입 / 로그인 / 로그아웃
  • 로그인한 사용자만 글 작성 가능
  • 게시글 목록 보기 / 상세 페이지
  • SQLite 데이터베이스 (project.db) 사용
  • 심플한 HTML + CSS 적용
  • 💬 댓글 기능
  • 🔍 검색 기능
  • 🖼 이미지 업로드

 

🧠 마무리

파이썬과 HTML은 초보자가 코딩을 시작하기에 딱 좋은 언어입니다. 복잡하게 느껴질 수 있지만, 한 단계씩 따라가다 보면 어느새 작은 웹사이트나 프로그램을 직접 만들 수 있게 될 거예요.

반응형