<a href="#" data-inven-list="list-photo-1,list-photo-2,list-photo-3" data-list-id="list-photo-1">

<span data-inven-id="list-photo-1" title="귀여운 불도저처럼!"><img src="https://upload3.inven.co.kr/upload/2021/02/25/bbs/i14582305483.jpg" style="width:382px;"></span>

<span data-inven-id="list-photo-2" title="당신을 페가수스처럼 달리게 해 줄 신발. 사람에게 부딪치지는 마세요. 그건 무례하거든요." style="display:none;"><img src="https://upload3.inven.co.kr/upload/2021/02/25/bbs/i14514867179.jpg" style="width:382px;"></span>

<span data-inven-id="list-photo-3" title="당신도 이제 오우거처럼 강력한 힘을 사용할 수 있습니다!" style="display:none;"><img src="https://upload3.inven.co.kr/upload/2021/02/25/bbs/i14545704108.jpg" style="width:382px;"></span>

</a>

<a href="#" data-inven-list="list-photo-1,list-photo-2,list-photo-3,list-photo-4" data-list-id="list-photo-1">

<span data-inven-id="list-photo-1" title="케르베로스 (Cerberus)"><img src="https://upload3.inven.co.kr/upload/2020/06/20/bbs/i14287776479.jpg" style="Height:185px;"></span>

<span data-inven-id="list-photo-2" title="케르베로스 (Cerberus)" style="display:none;"><img src="https://upload3.inven.co.kr/upload/2020/06/20/bbs/i014252604642.gif" style="Height:185px;"></span>

<span data-inven-id="list-photo-3" title="케르베로스 (Cerberus)" style="display:none;"><img src="https://upload3.inven.co.kr/upload/2020/06/20/bbs/i014275754241.gif" style="Height:185px;"></span>

<span data-inven-id="list-photo-4" title="케르베로스 (Cerberus)" style="display:none;"><img src="https://upload3.inven.co.kr/upload/2020/06/20/bbs/i014247161571.gif" style="Height:185px;"></span>

</a>

이렇게 포토 리스트를 여러개 사용할 때 그림 모음이 따로 따로 작동하게 만들고 싶어요!

그리고 그림이 옆으로 늘어지기도 하는데 <br> 을 그림모음 사이에 넣으면 될까요?