css 7

ChatGPT, FastAPI 활용 챗 서비스 구현

웹 클라이언트(UI) 구성FastAPI 서버 구현OpenAI API를 통한 챗봇 응답 처리대화 상태 관리 전체 구성요소 요약.├── README.md└── fastgpt ├── __pycache__ │ └── app.cpython-310.pyc ├── app.py ├── static │ └── style.css └── templates └── index.html index.html 사용자 인터페이스 (입력창 + 대화 내역 표시)style.css 인터페이스의 스타일 정리app.py FastAPI 서버, OpenAI API 연동, 대화 흐름 관리temlplages/ HTML 템플릿 디렉토리static/ 정적 파일 디렉토리 (CSS 포함)   HTML 템플릿..

HTML - 제목 태그 (<h1> ~ <h6>)

제목 태그 (~) HTML에서 제목을 표시할 때 사용하는 태그제목의 크기와 중요도를 나타내며, 이 가장 크고 이 가장 작음→ 문서의 계층 구조 정의제목 1제목 2제목 3제목 4제목 5제목 6웹 문서의 구조를 잡을 때 중요   SEO(Search Engine Optimization, 검색 엔진 최적화)은 페이지의 가장 중요한 제목으로 검색엔진이 내용을 분석할 때 참고함한 페이지에 은 하나만 쓰는 게 일반적 : 문서의 주요 주제(, ) : 문서의 하위 주제 웹 접근성(A11Y:Accessibility)스크린 리더(시각 장애인을 위한 프로그램)가 제목 태그를 읽어서 문서 구조를 설명 ~ 을 논리적인 순서로 배치하면 사용자 경험(UX)이 향상됨→ 단순 글자 크기를 키우고 싶은 경우, CSS를 사용하는 것이 좋음..

Z.PROJ 2025.03.06

웹 개발의 기초 : HTML, CSS, JavaScript

웹페이지를 구성하는 기본 요소HTMLCSSJavaScipt  HTML(HyperText Markup Language) 웹페이지의 구조를 정의하는 기본적인 요소태그(tag)를 사용하여 텍스트, 이미지, 링크 등의 콘텐츠를 표현함  HTML 태그 기본 구조 HTML 태그 여는 태그와 닫는 태그로 구성여는 태그와 닫는 태그 사이에 콘텐츠를 배치div 태그h1 태그p 태그 태그 안에 태그를 추가할 수 있음*태그(tag) == 엘리먼트(element) == 요소 HTML 태그 W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popul..

Z.PROJ 2025.03.04

3D Canvas

3D Canvas 만들기 프로젝트 초기화 기본 프로젝트 설정  App.jsx 및 App.css 설정 App.jsximport "./App.css";function App() { return ;}export default App;  App.csshtml,body,#root { margin: 0; padding: 0; width: 100%; height: 100%;}  main.jsx import './index.css'코드제거   /src/index.css 파일 삭제 터미널에서 프로젝트 실행npm run dev   3D Canvas 추가 R3F(Canvas) 추가3D 환경을 만들기 위해 Canvas 추가 Canvas importimport { Canvas } from "@react-three/fi..

Django - Bootstrap, FontAwesome 활용

Bootstrap반응형 웹 디자인을 쉽게 적용할 수 있도록 돕는 CSS 프레임워크→ 기본적인 스타일이 미리 정의되어 있어 빠르게 웹사이트의 디자인 개선 가능 getbootstrap BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.com CSS 적용base.html의 태그 안에 아래의 Bootstrap CSS 링크 추가  JS 적용base.html의 태그 마지막 줄에 ..

Django - Static & Media

Django 정적 파일 & 미디어 파일 관리 Static Files (정적 파일) 서비스 로직의 영향을 받지 않고 그대로 제공되는 파일이미지 파일 (로고, 광고 이미지 등)CSS 파일( 스타일 적용)JavaScript 파일 (클라이언트 측 스크립트)  Django에서 정적 파일 관리Django는 정적 파일을 쉽게 다룰 수 있도록 기본적인 기능을 제공STATIC_URL 정적 파일을 제공할 때 사용하는 URL 경로개발 단계에서는 app/static 폴더 또는 STATICFILES_DIRS에 지정된 경로를 참조함*이 경로는 실제 디렉토리가 아닌 URL 경로  STATIC_ROOT 배포를 위해 모든 정적 파일을 모으는 디렉토리의 절대 경로 DEBUG=False인 배포 환경에서 사용됨python manage.py..

streamlit run app.py

OpenAI API와 streamlit을 활용하여 서비스 구현을 해보자는 취지로 시작하게 된 Streamlit 입니다. 아스키아트가 하고싶어서가 아닙니다.웹꾸같은게 아닙니다. 하지만 예쁘죠? (공백처리 하는거 헤매다가 몇시간 갈아넣었는지 모르겠어요.. 그냥 예쁘다고 하세요.) 이후로 진빠져서 체험형.. 코드짜기..  HTML, CSS, JavaScript 모르면 커스텀을 거의 못한다 본다(내 생각)react, react native CLI들로 앱/웹 할 때도 기본적으론 버튼, alert 절대XXXXXX 전부 모달, 터쳐블오퍼시티로 style전부 내 마음에 들게.. event도 내가 원하는대로.. .. animation도 다 내가 원하는대로 쳐줘야 재밌었다 했기 때문에.. 딴거 할 수 있는게 있으면 다 내..

OpenAI API 활용 2024.12.16
728x90