실습 5

Django 실습(4) Model과 DB를 이용한 게시물 관리와 업로드

간단하게 startapp blog 만 하고 이미지를 업로드한 게시물들의 목록과 검색 기능을 구현한 index와 게시물의 상세 정보를 볼 수 있는 post와 게시글을 작성하고 파일을 업로드 하는 write를 구현해보자. 실습 여태 했던 실습 내용을 참고하여 여기까지 만들어서 runserver 했을 때 http://127.0.0.1:8000/blog, http://127.0.0.1:8000/blog/write, http://127.0.0.1:8000/blog/1 이 다 잘 실행되는지 확인. blog / models.py 에 DB 설계하기 아래 사이트를 참고 https://docs.djangoproject.com/en/4.2/ref/models/fields/ Django The web framework for..

Django 2023.10.11

Django 실습(3) Bootstrap 사용해서 블로그 만들고 꾸미기

Bootstrap : 웹페이지의 디자인을 손쉽게 만들 수 있게 도와주는 프레임워크 비슷한걸로 Talewind가 있다. 사용법 : 웹사이트 확인 https://getbootstrap.kr/ Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr CDN 방식이 설치 안해도 돼서 편한듯? Django에서 CSS를 사용하기 위해서는 static기능을 이용해서 css경로를 줘야한다. {% load static %} {% static 'STATIC_URL 이후의 경로' %} 부트스트랩 무료 템플릿을 다운받아서 지난번에 해본 ..

Django 2023.10.10

Django 실습(1) 핫딜 크롤링해서 상품 사이트 만들기

https://userdonghu.tistory.com/entry/Django-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC Django 튜토리얼 Python 설치 이후. Django 프로젝트 파일 열기. mkdir mysite 로 폴더 만들고 cd mysite로 이동하기. python -m venv venv # 가상환경 설정. 뒤가 이름 source ./venv/bin/activate # 가상환경 실행 pip install django # 장고 설 userdonghu.tistory.com Django 튜토리얼을 통해서 mysite 폴더 안에 가상환경을 구성하고 django 설치, startproject, runserver까지 하기. python manage.py startapp 으로..

Django 2023.10.05

JS 실습 - 쇼핑몰 간단하게 만들기

목표 - https://test.api.weniv.co.kr/mall 에서 json 객체를 받아와서 상품들을 html로 보여주고, 클릭했을때 상세 사진 나오게 하기. HTML은 최소한으로 이정도만. https://test.api.weniv.co.kr/mall 의 json 데이터는 이런 모습 여기서부터 js 파일. 일단 js로 화면에 표시될 공간인 main div을 할당해주고, img의 src를 넣기 쉽게 하기위해서 baseURL을 미리 적어둔다. const mainContainer = document.getElementById("main"); const BASE_URL = "https://test.api.weniv.co.kr/" 일단 이렇게 세 함수를 미리 생각해두고 작성을 해보자. function ge..

JS 2023.08.28

CSS 실습 - 글쓰기 페이지 CSS로 꾸며보기

CSS에 약한 나를 위해 CSS 실습을 진행한다. 글쓰기 내용을 입력해 주세요 카테고리 일반 공지사항 제목 내용 파일첨부 목록 초기화 작성 미리 만들어 준비된 html 코드. 여기 CSS를 추가해보자. 요런 느낌으로 바꾸자. main요소의 width를 주고 가운데로 정렬 .write{ width: 700px; margin: auto; } 글쓰기(제목) 위에 마진 없애기 .write>.main-title{ margin-top: 0; } 내용을 입력해 주세요 색깔 바꾸고 아래 마진 좀 작게 .write>.main-desc{ color: #767676; margin-bottom: 5px; } 표 좌우로 꽉 채우고 위에 테두리 주기 .board-table{ width: 100%; border-top: 1px s..

HTML&CSS/CSS 2023.08.22