실습 설명
여러분은 코스토랑의 사이트 개발을 맡은 개발자입니다. 코스토랑에 신 메뉴가 대거 추가되었다고 홈페이지 업데이트를 요청하네요.
- index.html을 수정해서 현재 없는 모든 음식을 추가해서 메뉴를 완성해 주세요.
- 사진은 정적파일 경로인 static/foods/images에 있습니다.
- 음식 이름과 설명, 가격 등은 모두 여러분의 자유입니다! 맛있게 작성해 주세요!
banana.jpg
bibimbap.jpg
burger.jpg
chicken.jpg
croquette.jpg
pumpkin_soup.jpg
sushi.jpg
costaurant > foods > templates > foods > index.html
<!--[A] static 경로를 사용하기 위해서는 먼저 static을 load 해야 합니다. -->
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>코스토랑</title>
<meta charset="utf-8">
<!--[B] href 경로를 변경해 주세요.-->
<link rel="stylesheet" href="{% static 'foods/css/styles.css' %}">
</head>
<body>
<div> July 16, 2020 </div>
<hr/>
<h1>코스토랑</h1>
<h2>넌 코딩할때가 제일 이뻐</h2>
<div class="food-container">
<div class="food">
<!--[C] src 경로를 변경해 주세요.-->
<!--[D] 모든 음식을 추가해 주세요. -->
<img src="{% static 'foods/images/chicken.jpg' %}" width="300px" height="200px"/>
<div class="info">
<h3>코딩에 빠진 닭</h3>
<P>주머니가 가벼운 당신의 마음까지 생각한 가격!</p>
<a href="#">메뉴 보기</a>
</div>
</div>
<div class="food">
<img src="{% static 'foods/images/sushi.jpg' %}" width="300px" height="200px"/>
<div class="info">
<h3>코코스시</h3>
<P>주머니가 가벼운 당신의 마음까지 생각한 가격!</p>
<a href="#">메뉴 보기</a>
</div>
</div>
<div class="food">
<img src="{% static 'foods/images/burger.jpg' %} width="300px" height="200px"/>
<div class="info">
<h3>코데리아</h3>
<P>주머니가 가벼운 당신의 마음까지 생각한 가격!</p>
<a href="#">메뉴 보기</a>
</div>
</div>
<div class="food">
<img src="{% static 'foods/images/bibimbap.jpg' %}" width="300px" height="200px"/>
<div class="info">
<h3>코가네</h3>
<P>주머니가 가벼운 당신의 마음까지 생각한 가격!</p>
<a href="#">메뉴 보기</a>
</div>
</div>
<div class="food">
<img src="{% static 'foods/images/banana.jpg' %}" width="300px" height="200px"/>
<div class="info">
<h3>나에게 바나나</h3>
<P>바나나 먹으면 내게 바나나</p>
<a href="#">메뉴 보기</a>
</div>
</div>
<div class="food">
<img src="{% static 'foods/images/croquette.jpg' %}" width="300px" height="200px"/>
<div class="info">
<h3>귀여운 고로케</h3>
<P>고로케 귀여운 너를 위한 고로케</p>
<a href="#">메뉴 보기</a>
</div>
</div>
<div class="food">
<img src="{% static 'foods/images/pumpkin_soup.jpg' %}" width="300px" height="200px"/>
<div class="info">
<h3>단호한 단호박죽</h3>
<P>단호한 너를 달콤하게 녹여줄 단호박죽</p>
<a href="#">메뉴 보기</a>
</div>
</div>
</div>
</body>
</html>'BackEnd > Django로 웹 개발 시작하기' 카테고리의 다른 글
| [Django 웹 개발 시작] 코스토랑 프로젝트 #03 메인 페이지 (0) | 2023.03.23 |
|---|---|
| [Django 웹 개발 시작] Template Language 한 걸음 더 (0) | 2023.03.23 |
| [Django 웹 개발 시작] 레스토랑 프로젝트 #02 URL 연결하기 (2) | 2023.03.14 |
| [Django 웹 개발 시작] 한번에 이해하는 Django (0) | 2023.03.14 |
| [Django 웹 개발 시작] MVC와 MVT (0) | 2023.03.14 |
