{%- for column in items|slice(3,fill_with="홈짱") %}
<ul class="column-{{ loop.index }}">
{%- for item in column %}
<li>{{ item }}</li>
{%- endfor %}
</ul>
{%- endfor %}
</div>
결과값:
<div class="columnwrapper">
<ul class="column-1">
<li>가</li>
<li>나</li>
</ul>
<ul class="column-2">
<li>다</li>
<li>라</li>
</ul>
<ul class="column-3">
<li>마</li>
<li>홈짱</li>
</ul>
</div>
PS. '{%' 기호 바로 뒤에 '-' 문자 있는 이유
Jinja 템플릿에서 {%와 %} 사이에 있는 -는 공백 제어 기호임. 이를 사용하여 템플릿 엔진이 생성하는 결과물에서 불필요한 공백을 제거할 수 있음. (예) {%와 %} 사이에 -를 사용하면 개행 문자를 제거하여 생성되는 HTML 코드를 좀 더 읽기 쉽게 만들 수 있음.
위의 예제 코드에서 -는 {%-와 -%}를 사용하여 제거될 수 있는 공백을 나타냄. 이를 통해 템플릿 코드와 생성된 HTML 사이의 공백이 제거되어 렌더링된 결과물이 더 깔끔하게 보일 수 있음.
