[Django] 5장 정적 파일 및 미디어 파일 설정

✅ 1. 기본 구조Django는 static 디렉토리를 통해 CSS, JS, 이미지 같은 정적 파일을 서빙합니다. djangobloging/ myapp/ static/ myapp/ css/ style.css js/ main.js images/ logo.png templates/ index.html settings.py앱 내부 static/ 폴더 -> 앱전용 파일공용 지원은 프로젝트 루트에 static/ 폴더 따로 만들어 관리✅ 2. settings.py 설정# 정적..

• format_list_bulleted Back-End/Django
• · 2025. 8. 11.
• textsms

[Django] 4장. Django 템플릿 작성 - HTML 템플릿 작성 및 렌더링

✅ 1.템플릿 폴더 구조 설정Django는 기본적으로 templates/ 폴더에서 테블릿을 찾아 화면에 반환합니다.프로젝트/│├─ myapp/│ ├─ templates/│ │ └─ myapp/│ │ └─ example.html│ └─ views.py│├─ manage.py└─ settings.py // settings.pyTEMPLATES = [ { ... 'DIRS': [BASE_DIR / 'templates'], # 프로젝트 전역 템플릿 폴더 ... },]✅ 2. HTML 템플릿 기본 문법example.html {{ title }} {% for item in items %} {{ item }} ..

• format_list_bulleted Back-End/Django
• · 2025. 8. 7.
• textsms

[Go] Go 라이브러리를 사용해 HTML 띄우기

1. Go 웹 서버 설정Go 언어로 웹 개발을 하기위해서 기본적인 레이아웃을 만드는 방법은 HTML 템플릿과 Go http를 사용하면 됩니다. 먼저 Go를 사용해서 웹 서버를 설정해줍니다.package mainimport ( "html/template" "net/http")type PageVariables struct { Title string}func main() { // 정적 파일을 사용하기 위한 핸들러 설정 http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static")))) http.HandleFunc("/", HomePage) http.ListenAndServe(":8080", nil);}func Ho..

• format_list_bulleted Back-End/Go
• · 2025. 3. 6.
• textsms

[HTML] HTML 플렉스 박스와 그리드 레이아웃을 사용한 레이아웃 구성방법

1. 플렉스 박스(flexbox) HTML에서 플렉스박스(flexbox는) 컨테이너 내의 아이템을 배치하는 데 유용한 CSS 레이아웃 모델로, 주로 1차원 레이아웃을 구성할 때 사용됩니다. 플렉스 박스의 기본 사용법은 아래와 같습니다.display: flex를 사용해 플렉스 컨테이너를 설정justify-content: space-between 속성으로 아이템간 여백을 조정align-items: center로 수직 정렬을 조정  See the Pen flexbox by Koras02 (@koras02-the-lessful) on CodePen.">See the Pen flexbox by Koras02 (@koras02-the-lessful) on CodePen. 2. CSS 그리드 (Grid) 레..

• format_list_bulleted Front-End/HTML
• · 2025. 2. 26.
• textsms

[HTML] Canvas와 SVG의 차이점

1. HTML 캔버스(Canvas) 예제HTML의 캔버스  요소를 사용해 비트맵 이미지를 그릴 수 있는 2D 그래픽 API 입니다. 주로 Javascript를 통해서 동적으로 그래픽을 렌터링합니다. 사용 방법:HTML에  요소 추가: HTML 문서에 태그를 추가해. width와 height 속성으로 크기를 지정하고, style 속성으로 테두리를 설정할 수 있습니다.Javascript로 그래픽 그리기: JavaScript를 사용해 캔버스의 2D 컨택스트를 가져와, 다양한 메소드를 사용해 그래픽을 그립니다.기능 및 옵션:2D 컨텍스트: getContext('2d') 메소드로 2D 렌더링 컨텍스트를 얻음선 그리기: beginPath(), moveTo(x,  y), lineTo(x,  y), stroke() ..

• format_list_bulleted Front-End/HTML
• · 2025. 2. 16.
• textsms

[HTML] HTML과 XHTML의 차이점

1. HTML과 XHTML 이란?HTML(HyperText Markup Language)과 XHTML(eXtensible HyperText Markup Langauge)는 웹 페이지를 구성하기 위한 마크업 언어로  서로 다른 차이점을 가지고 있습니다.문법 규칙HTML: 유연한 문법을 가지고 있어 태그를 닫지 않거나 대소문자를 구분하지 않아도 됨예: 태그 또는 , 태그는 닫지 않아도 됨XHTML: XML 기반언어로, 더욱 엄격한 문법을 요구함, 모든 태그를 반드시 닫아야 하고, 대소문자를 구분함예: , 반드시 태그르 썻다면 닫아야함DOCTYPE 선언HTML: 다양한 DOCTYPE을 사용할 수 있으며, HTML5에서는 을 사용XHTML: 반드시 XHTML 1.0 또는 XHTML 1.1의 DOCTYPE을..

• format_list_bulleted Front-End/HTML
• · 2025. 2. 16.
• textsms