Stage 1 - 게시글 쓰기 페이지 만들기
사용자로부터 입력을 받는 텍스트필드, 비밀번호 입력창, 내용 입력창 등을 아울러 Form이라고 합니다. 1주차에서 form 관련 태그를 배운적이 있는데요. 이번 시간부터 본격적으로 사용되는 만큼 복습을 하고 넘어갑시다.
Form 목적 | Form의 코드 사용 예 |
아이디 입력창 | <input type=“text” placeholder=“아이디를 입력해주세요” > |
비밀번호 입력창 | <input type=“password” placeholder=“아이디를 입력해주세요” > |
제목 입력창 | <input type=“text” placeholder=“제목을 입력하세요” > |
내용 입력창 | <textarea>내용을 입력하세요.</textarea> |
확인 버튼 | <button>게시</button> |
선택 입력 | <input type=“radio” value=“adult”> 성인 <input type=“radio” value=“teen”> 청소년 |
체크박스 입력 | <input type=“checkbox” value=“piano” > 피아노 <input type=“checkbox” value=“guitar”> 기타 <input type=“checkbox” value=“drum”>드럼 |
127.0.0.1/new 로 연결되는 빈 내용의 게시글 글쓰기 페이지를 만들어보겠습니다.
views.py
def new_feed(request):
return render(request, 'new_feed.html')
urls.py
from facebook.views import new_feed
urlpatterns = [
# 생략
path('feed/<pk>/', detail_feed),
path('new/', new_feed),
# 이하생략
]
방금 코드를 삭제한 부분에 각종 폼을 넣어 다음과 같은 새글쓰기 페이지를 완성해보겠습니다.
우선 형태 잡기
최종 목표
new_feed.html에 form을 넣어 형태를 잡습니다.
new_feed.html
<div class="container">
<h3>게시물 올리기</h3>
<input type="text" placeholder="글쓴이의 이름은?" ><br>
<input type="password" placeholder=“글 비밀번호" ><br>
<input type="text" placeholder=“제목을 입력해주세요.” ><br>
<textarea placeholder="내용을 입력해주세요."></textarea><br>
<button>게시</button>
</div>
new_feed.html
<div class="form_box">
<h3>게시물 올리기</h3>
<input class="input_field" type="text" placeholder="글쓴이의 이름은?" ><br>
<input class="input_field" type="password" placeholder="글 비밀번호" ><br>
<input class="input_field" type="text" placeholder="제목을 입력해주세요." ><br>
<textarea class="textarea_field" placeholder="내용을 입력해주세요."></textarea><br>
<button class="write_button">게시</button>
</div>
new_feed.html
.form_box {
background-color: #ffffff;
margin: 10px;
border-radius: 4px;
border: 1px solid #ddd;
padding: 10px;
}
.input_field {
border: 1px solid #ddd;
border-radius: 4px;
padding: 4px;
margin: 3px 0;
font-size: 14px;
width: 100%;
}
.textarea_field {
border: 1px solid #ddd;
border-radius: 4px;
padding: 4px;
margin: 3px 0;
font-size: 14px;
width: 100%;
height: 160px;
}
.write_button {
background-color: #475d9f;
border: 1px solid #323f6b;
color: #ffffff;
border-radius: 4px;
padding: 2px 8px;
font-soze: 18px;
}
결과
- newsfeed.html
- detail_feed.html
- new_feed.html
<div class="btn1">
<a href="/new"><img src="/static/ic_pencil.jpg" width="22px" style="margin:9px 0 0 13px"></a>
</div>
Last modified 3yr ago