CDN을 이용하여 부트스트랩에 만들어진 css파일이나 개인적으로 만든 css파일을 register.html 에 적용하는 것을 실습해보았다.
1. 프로젝트에 static이라는 이름을 가진 폴더를 추가해준다
2.settings.py 에 폴더 위치를 추가해준다.
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
3.https://bootswatch.com/slate/경로 이동해 원하는테마를 찾고 bootstrap.min.css 파일을 다운로드하고 static 폴더내부에 저장한다.
4.
<link rel="stylesheet" href="/static/bootstrap.min.css/" />
링크태그를 이용하여 위치를 넣어준다.
테마가 적용된 register.html
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- CDN 이용 -->
<!-- <link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/> -->
<link rel="stylesheet" href="/static/bootstrap.min.css/" />
<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.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-12 text-center">
<h1>회원가입</h1>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
{{ error }}
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<form action="." method="POST">
{% csrf_token%}
<div class="form-group">
<label for="username">사용자 이름</label>
<input
type="text"
class="form-control"
id="username"
placeholder="사용자 이름"
name="username"
/>
</div>
<div class="form-group">
<label for="useremail">사용자 이메일</label>
<input
type="email"
class="form-control"
id="useremail"
placeholder="사용자 이메일"
name="useremail"
/>
</div>
<div class="form-group">
<label for="password">비밀번호</label>
<input
type="password"
class="form-control"
id="password"
placeholder="비밀번호"
name="password"
/>
</div>
<div class="form-group">
<label for="re-password">비밀번호 확인</label>
<input
type="password"
class="form-control"
id="password"
placeholder="비밀번호 확인"
name="re-password"
/>
</div>
<button type="submit" class="btn btn-primary">등록</button>
</form>
</div>
</div>
</div>
</body>
</html>
'IT > Django' 카테고리의 다른 글
| Django 기초 6.로그인 페이지 구성 및 홈페이지 이동 기능 (0) | 2019.10.07 |
|---|---|
| Django 기초 4.회원필드 수정해보기 (0) | 2019.10.07 |
| Django 기초 3.회원가입 페이지 만들기 (2) | 2019.10.06 |
| Django 기초 2.데이터베이스 관리 및 장고 어드민 활성화 (0) | 2019.10.01 |
| Django 기초 1.설치 및 프로젝트 구성 (0) | 2019.10.01 |
