Django 템플릿 질문 입니다.

조회수 2300회

장고 템플릿 관련 질문을 다시 한번 올립니다.

우선..아래는 제 코드 입니다.

<table>
    <tr>
    {% for entry in actress %}
        <td>{{entry.name}}</td>
    {% endfor %}
    </tr>

    <tr>
    {% for entry in actress %}
        <td><img src="static/enActress/{{entry.image_paths}}"}} class="img-circle"></td>
    {% endfor %}
    </tr>
</table>

저의 의도는 사람이름(위), 사람사진(아래)로 매칭시켜서 테이블에 넣는 것 입니다. 그런데 한 td에 변수 전체를 넣으니 브라우저에 스크롤바가 생기도록 옆으로 이름과 사진 테이블이 죽 나열되어 div가 브라우저 해상도 이상으로 늘어나 버렸습니다.

컨테이너 div 크기에 맞게끔 변수 리스트가 줄바꿈 되게 하려면 어떻게 해야 하는지 궁금합니다. 굉장히 간단할 것 같은데... 아무리 찾아봐도 모르겠네요 ㅠㅠ

  • (•́ ✖ •̀)
    알 수 없는 사용자

2 답변

  • 방법1. HTML파일을 텍스트의 나열이 아니라, 내가 원하는대로 배치하고 싶다면 css를 이용해야 합니다. css중에서도 원하는 기능을 구현하시려면 Flexbox를 써서 자동으로 줄바꿈을 해 주는 방법이 있습니다. 컨테이너 div와 item에 flexbox를 적용하고, actress마다 하나의 item div를 생성해서 넣어주는 방법입니다. 위에 첨부한 링크를 보시면 어떻게 되는지 이해가 되실겁니다.

    방법2. table을 그대로 이용하면서 한 줄에 3개씩 나오게 하면서 줄을 바꿔 주시려면

    <table>
        <tr>
        {% for i, entry in enumerate(actress) %}
            <td>    
                {{entry.name}}</br>
                <img src="static/enActress/{{entry.image_paths}}"}} class="img-circle">
            </td>
            {% if i%3 ==  0 %}
                </tr><tr>
            {% endif %}
        {% endfor %}
        </tr>
    </table>
    

    이렇게 3번째 아이템마다 줄을 바꿔 줄 수 있습니다. 3대신 원하는 숫자로 갯수를 지정해 보세요.

  • 해당 문제는 반복문이 끝날 때 까지 td가 계속해서 만들어지는데도 불구하고 적정 숫자에 맞춰 줄내림을 해주는 처리를 해주지 않은 데에 있다고 생각합니다.

    질문자님이 직면한 문제의 해결책은

    만약 인덱스가 5이상(혹은 임의의 숫자)일 경우 줄을 내려 출력한다는 전제 조건을 생각하셔야합니다.

    만약이라는 단어는 조건문을 사용하면 해결할 수 있으며
    인덱스가 5이상이라는 조건은 django에서 제공하는 forloop.counter를 이용하면 해결 할 수있습니다.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)