Django_ HTML 태그

HTML 태그

Django 템플릿에서 데이터를 표현할 때 HTML 태그를 사용합니다.

 

줄바꿈 적용 태그

• <br> - 단순 줄바꿈(글 사이 공백 없음)

• <p></p> - 문단 표현(글 사이 일정 크기의 공백 발생)

• <pre></pre> - (태그 내에 있는 그대로 보여줌)

<pre>
Django
HTML 태그

태그 내 내용 그대로 적용
</pre>

적용 화면

 

제목

• <h1> ~ <h6>: 헤딩

<h1>{{ blog.title }}</h1>

<h2>Posts</h2>

{% for post in posts %}
    <h3>{{ post.title }}</h3>
    <p>{{ post.content }}</p>
{% endfor %}

 

단락

• <p>: 문단 (paragraph)

{% for post in posts %}
    <p>{{ post.content }}</p>
{% endfor %}

• <div>: 구역 (division)

<!-- 기본 -->
<div>
    <p>This is a block of content.</p>
</div>

<!-- templates -->
<div class="post">
    {% for post in posts %}
        <h2>{{ post.title }}</h2>
        <p>{{ post.content }}</p>
    {% endfor %}
</div>

 

리스트

• <ul>: 순서 없는 리스트 (unordered list)
  • 리스트의 각 항목은 <li> 태그로 감싸기

<ul>
    {% for item in items %}
        <li>{{ item.name }}</li>
    {% endfor %}
</ul>

• <ol>: 순서 있는 리스트 (ordered list)
  • 리스트의 각 항목은 <li> 태그로 감싸기

<ol>
    {% for post in posts %}
        <li>{{ post.title }}</li>
    {% endfor %}
</ol>

 

부가 기능

• <a>: 링크 (anchor)

{% for post in posts %}
    <a href="/post/{{ post.id }}">{{ post.title }}</a>
{% endfor %}

• <img>: 이미지

<img src="{{ post.image.url }}" alt="{{ post.title }}">

• <button>: 버튼
  • type 속성을 사용하여 버튼의 동작을 제어  
    • type="submit": 폼을 제출
    • type="button": 일반 버튼

<form method="post">
    {% csrf_token %}
    <input type="text" name="title">
    <button type="submit">Add Post</button>
</form>

• <table>: 표

<table>
    <tr>
        <th>Title</th>
        <th>Content</th>
    </tr>
    {% for post in posts %}
    <tr>
        <td>{{ post.title }}</td>
        <td>{{ post.content }}</td>
    </tr>
    {% endfor %}
</table>

 

사용자 관련

• <form>: 폼
  • 사용자 입력을 처리하기 위한 폼을 생성

<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Submit</button>
</form>

• <input>: 입력 필드
  • 사용자 입력을 받는 필드

<form method="post">
    {% csrf_token %}
    <input type="text" name="title" value="{{ post.title }}">
    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
    <button type="submit">Update</button>
</form>

• <select>: 드롭다운 메뉴
  • 사용자가 선택할 수 있는 옵션 리스트 제공

<select name="category">
    {% for category in categories %}
        <option value="{{ category.id }}">{{ category.name }}</option>
    {% endfor %}
</select>

• <figure>, <figcaption>: 이미지와 캡션
  • 이미지와 설명을 그룹화

<figure>
    <img src="{{ post.image.url }}" alt="{{ post.title }}">
    <figcaption>{{ post.caption }}</figcaption>
</figure>

 

텍스트 기능

• <span>: 인라인 텍스트
  • 텍스트를 인라인으로 표시하거나 스타일을 적용할 때 사용

• <strong>: 굵은 텍스트

• <em>: 기울임 텍스트
• <br>: 줄바꿈
  • 종료 태그가 없는 독립형 태그
• <hr>: 가로선
  • 콘텐츠 사이에 가로선 삽입

<p>Author: <span>{{ post.author }}</span></p>

<p>Author: <strong>{{ post.author }}</strong></p>

<p>This is line 1.<br>This is line 2.</p>

<p>First section</p>
<hr>
<p>Second section</p>

<hr> 태그