1 | <img style="width:100%;" src="{{ menu.image.url }}"> | cs |
퍼센테이지(%)로도 사이즈 크기를 조절할 수 있다.
| Select Element를 활용하여 카테고리 지정하기 (0) | 2019.01.16 |
|---|---|
| 텍스트 가운데 정렬 (0) | 2018.12.06 |
| 폼 클래스 없이 데이터 수정하기(value 속성 사용) (0) | 2018.12.03 |
| Grid로 2번 연속 나누기 (0) | 2018.12.03 |
| <table>, <tr>, <th>, <td> 사용해보기 (0) | 2018.12.01 |
쵸잇
쿼리 연습
1)
상황: 메뉴페이지에서 판매자(로그인 상태)가 자신이 등록한 메뉴만으로 만들어진 리스트가 노출된다.
해결:
(*메뉴 정보에 판매자 데이터 포함)
메뉴클래스에서 판매자가 누구인지 필터하면 해당 판매자가 등록한 메뉴가 추출된다.
단, 접속한 판매자의 정보로만 구성된 메뉴리스트가 필요하다.
필터 값을 로그인한 판매자로 지정하여 해당 판매자의 업체 메뉴만 노출되도록 한다.
1 | menu_list = Menu.objects.filter(partner=request.user.partner) | cs |
| 2개의 폼(추가, 수정)에 1개의 템플릿만 사용하기 (0) | 2018.12.02 |
|---|---|
| 이미지를 저장하기(DB, Form, Url, Settings) (0) | 2018.12.02 |
| 모델 폼에서 입력한 데이터를 다시 불러 수정하기 (0) | 2018.12.01 |
| ModelForm을 통해 입력 받은 값 View에서 처리하기 (0) | 2018.11.30 |
| OneToOneField 활용 (1대1 관계) (0) | 2018.11.29 |
쵸잇
데이터만 주줄이 나열되면 가독성이 떨어지고 볼품 없어 보인다.
표형식으로 깔끔하게 정리해서 보이도록 <table> 태그를 사용한다.
우리가 평소 쓰는 표가 <table>이라고 보면 된다. 대신 줄과 칸을 입력하려면 수작업이 요구된다.
<tr>은 표에서 "줄"역할을 한다. 첫번째 줄에 캐릭터 이름이 들어간 것이다.
<th>는 해당 줄의 "데이터 제목"에 해당한다. 강조 효과를 주기 위해 bold 처리가 된다.
<td>는 "칸"역할로 데이터가 표시된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <table class="table"> <tr> <th>캐릭터 이름</th> <td>{{ user.character.name }}</td> </tr> <tr> <th>주특기</th> <td>{{ user.character.type }}</td> </tr> <tr> <th>캐릭터 성별</th> <td>{{ user.character.gender }}</td> </tr> </table> | cs |
완성된 형태는 아래와 같다
캐릭터 이름 |
길거리파이터 |
|
주특기 | 태권도 |
|
캐릭터 성별 | 여자 |
|
연습삼아 하나 더 만들어보자.
1 2 3 4 5 6 7 8 9 10 11 12 | <table class="table"> <tr> <th>캐릭터 이름</th> <th>주특기</th> <th>캐릭터 성별</th> </tr> <tr> <td>{{ user.character.name }}</td> <td>{{ user.character.type }}</td> <td>{{ user.character.gender }}</td> </tr> </table> | cs |
다음 테이블은 아래와 같다
캐릭터 이름 | 주특기 | 캐릭터 성별 |
길거리파이터 |
태권도 |
여자 |
| Select Element를 활용하여 카테고리 지정하기 (0) | 2019.01.16 |
|---|---|
| 텍스트 가운데 정렬 (0) | 2018.12.06 |
| 폼 클래스 없이 데이터 수정하기(value 속성 사용) (0) | 2018.12.03 |
| Grid로 2번 연속 나누기 (0) | 2018.12.03 |
| HTML 이미지 삽입하기 (0) | 2018.12.02 |
쵸잇
