[멋사7기] 4주차 - 5. portfolio (static)

포트폴리오 만들기

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 파일 쓸거라고 선언

{% load staticfiles %}

<!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는 습관처럼 써주기 (사진 안나올 때 나오는 문구)