Django 템플릿 질문 입니다.


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

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

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


조회수 174


2 답변


좋아요
0
싫어요
채택취소하기

방법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대신 원하는 숫자로 갯수를 지정해 보세요.

  • 2016년 08월 06일에 작성됨
    루비와 파이썬을 좋아합니다. 새로운 언어를 배우는것도 좋아해요. 모바일 게임도 조금 만들어 봤습니다.


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

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

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

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


로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close