<스타일 적용 순서>
1.
<div>태그 내에서 직접 설정하는 스타일
2.
<style> 태그 활용하는 스타일
3.
별도의 css 파일에서 불러오는 스타일
1rem = 16px
span 태그 기본 속성 : inline
{% extends 'base.html' %}
{% block content %}
<style>
.testing {
background-color: white;
height: 3rem;
width: 3rem;
margin: 1rem;
}
</style>
<div style="height : 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; ">
<h1>
testing
</h1>
<div class="testing" style="display: block;">block</div>
<div class="testing" style="display: inline;">inline</div>
<div class="testing" style="display: None;">None</div>
<div class="testing" style="display: inline-block;">inline-block</div>
<div class="testing" >default</div>
</div>
{% endblock %}
HTML
복사
hello_world.html : 서버 구동해서 각각 차이점 보기
{% extends 'base.html' %}
{% block content %}
<style>
.testing {
background-color: white;
height: 3rem;
width: 3rem;
margin: 1rem;
}
</style>
<div style="height : 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; font-size:2rem;">
<h1>
testing
</h1>
<div class="testing" style="display: inline-block; width: 48px; height: 48px;">block</div>
<div class="testing" style="display: inline-block; width: 3em; height: 3em;">block</div>
<div class="testing" style="display: inline-block; width: 3rem; height: 3rem;">block</div>
<div class="testing" style="display: inline-block; width: 30%; height: 30%;">block</div>
</div>
{% endblock %}
HTML
복사
hello_world.html : font-size 변경했을떄 크기 차이점 알아보기
git에서 수정사항 없애기 : git reset —hard HEAD