포트폴리오 만들기
django를 이용하여 여러 파일 다뤄보기
정적파일 : 미리 서버에 저장되어 있는 파일, 서버에 저장된 그대로를 서비스해주는 파일
동적파일 : 서버의 데이터들이 어느정도 가공된 다음 서비스되는 파일 (상황에 따라 받는 내용이 달라질 수 있음)
정적파일의종류
- static : 개발자가 미리 준비해둔 파일 - 미리 준비해둔 사진 올리기
- media : 웹서비스 이용자들이 업로드하는 파일 - 사진 업로드해보기
- static 파일의 처리과정
1) static 파일들의 위치 찾기
2) static 파일들 한 곳에 모으기
=> 우리가 할일
1) static 담을 폴더 만들기
2) static 파일이 어딨고,어디로 모을지 알려주기
3) 모으기
1) app 폴더 안에 static 폴더 만들고 그 안에 파일 넣기
2) settings.py에서 알려주기
3) $ python manage.py collectstatic
-> html 상에 나 여기에 static 파일 쓸거야 선언 후 static 파일사용
실습
1) portfolio라는 app을 생성해줘야함
deg98@dahee MINGW64 /e/0_lilelion7/likelion2/week4_blog_project
$ python manage.py startapp portfolio
프로젝트 안에서 앱을 하나 더 만드는거임!
2) 그 안에 templates만들고 portfolio.html 파일 만들기
bootstrap - example - album 이거 이용해서 일단 페이지 만들기!
우클릭 - 소스코드 복붙 +
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
이것도 head에!
3) home.html에
<a class="dropdown-item" href="{% url 'portfolio' %}">portfolio</a>
여기 코드만 살짝 바꿔주면 됨.
4) urls.py
import blog.views, portfolio.views
path('portfolio/', portfolio.views.portfolio, name="portfolio"),
url path주의, import 주의!
5) views.py in portfolio 앱
def portfolio(request):
return render(request, 'portfolio.html')
6) 아 참! 그리고 settings.py에 portfolio앱의 존재 알리기
'portfolio.apps.PortfolioConfig',
project만 안만드는 것일 뿐, 앱 만드는 것부터 순서대로 따라하면 된다.
https://coding-dahee.tistory.com/13?category=732277
1) portfolio 앱 안에 static 폴더 만들기
2) static 안에 넣고싶은 사진 pc에서 넣기
3) settings.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'portfolio', 'static')
] # static 파일들이 현재 어디 있는지 쓰는 곳
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# static 파일들이 어디로 모일 것인지 쓰는 곳
맨 아래에 코드 추가
4) 모으기
deg98@dahee MINGW64 /e/0_lilelion7/likelion2/week4_blog_project
$ python manage.py collectstatic
그러면 project와 app 폴더와 동등한 위치에 static폴더가 하나 생김
(오류는 무시 ㅎㅎ)
이제 static 파일 쓸 수 있다!!!
5) portfolio.html 에 나 static 파일 쓸거라고 선언
<!doctype> 위에
6) 진짜 써보자
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"/><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
이거 지우고 (내가 지금 적용한 부트스트랩의 섬네일 적용 부분 코드)
<img src="{% static 'photo3.jpg' %}" alt="">
alt는 습관처럼 써주기 (사진 안나올 때 나오는 문구)
