[PHP/DJango] 04 CSS 적용하기

Posted on: 2021년 02월 14일 2021년 02월 14일
Categories: 강의자료, 웹프로그래밍, 파이썬

인라인 Style : 각 태그에 스타일 추가
1. 예 : <p style=’background-color:#333; color:#fff;’> 안녕하세요 </p>

내부 Style : 템플릿 파일에 직접 style 코드 추가하기

vi glass/board/templates/board/index.html

<style>
	body {
		background-color:#333; /* 배경색은 짙은 회색 */
		color:#fff; /* 글자색은 흰색 */
		font:12pt/200% 돋움;
	}
</style>

{% if latest_board_list %}
	{% for board in latest_board_list %}
		{{ board.id }}
		<a href=/board/{{ board.id }}/>
		{{ board.subj }} </a> {{ board.wdate }} <br>
	{% endfor %}
{% else %}
	empty
{% endif %}

<a href="{% url 'board:new' %}"> 글쓰기 </a>

<style>

body {

background-color:#333; /* 배경색은 짙은 회색 */

color:#fff; /* 글자색은 흰색 */

font:12pt/200% 돋움;

}

</style>

{% if latest_board_list %}

{% for board in latest_board_list %}

{{ board.subj }} </a> {{ board.wdate }} <br>

{% endfor %}

{% else %}

empty

{% endif %}

외부 Style : 파일에 저장후 불러서 사용하기

장고 프로젝트에 /static/ 폴더 생성 : settings.py 수정

STATIC_URL = '/static/' import os STATIC_ROOT = os.path.join(BASE_DIR, 'www_dir', 'static')

1
2
3
4

STATIC_URL = '/static/'

import os
STATIC_ROOT = os.path.join(BASE_DIR, 'www_dir', 'static')
python3 manage.py collectstatic 실행
1. glass/www-dir/static 폴더가 생성되고 그 안에 admin/*.css 파일이 생성되어 있음

vi glass/board/templates/board/index.html

<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css">

{% if latest_board_list %}
	{% for board in latest_board_list %}
		{{ board.id }}
		<a href=/board/{{ board.id }}/>
		{{ board.subj }} </a> {{ board.wdate }} <br>
	{% endfor %}
{% else %}
	empty
{% endif %}

<a href="{% url 'board:new' %}"> 글쓰기 </a>

{% if latest_board_list %}

{% for board in latest_board_list %}

{{ board.subj }} </a> {{ board.wdate }} <br>

{% endfor %}

{% else %}

empty

{% endif %}

부트스트랩 이용

참조 :
1. http://bootstrapk.com/css/
2. https://blog.naver.com/parkman108/222238585168

기존 new.html

<form action="" method="post">
{% csrf_token %}
	제목 <input type="text" name="subj"/> <br>
	내용 <input type="text" name="cont"/> <br>
	읽은횟수 <input type="text" name="hit"/> <br>
	날짜 <input type="text" name="wdate"/> <br>
	<button type="submit">저장</button>
</form>

{% csrf_token %}

제목 <input type="text" name="subj"/> <br>

내용 <input type="text" name="cont"/> <br>

읽은횟수 <input type="text" name="hit"/> <br>

날짜 <input type="text" name="wdate"/> <br>

</form>

vi glass/board/templates/board/new.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form action="" method="post" class="form-horizontal">
{% csrf_token %}
	<div class="form-group">
		<label class="col-sm-2 control-label">제목</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" name="subj"/>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">내용</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" name="cont"/>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">읽은횟수</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" name="hit"/>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">날짜</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" name="wdate"/>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">저장</button>
		</div>
	</div>
</form>

{% csrf_token %}

</div>

</div>

</div>

</div>

</div>

</form>

whan0623

516