HTML & CSS >
Div 태그로 이미지 리스트 구현 시 주의사항
1. min-width 사용
- 이미지 리스트를 감싸고 있는 태그의 display 속성이 flex라면, div로 구현된 이미지창 여러 개가 죽 늘어서면서 각각의 폭이 width로 지정된 값보다 더 줄어들게 됨. min-width로 이미지창의 폭을 지정하면 이를 방지할 수 있음.
2. 이미지 리스트를 감싸고 있는 태그 위에 이보다 더 상위 태그를 사용해야.
<div style="width:500px;overflow:hidden">
<ul style="display:flex">
<li style="background-image:url(./1.png)"></li>
<li style="background-image:url(./2.png)"></li>
<li style="background-image:url(./3.png)"></li>
</ul>
</div>
- 위 코드와 같이 ul로 이미지들을 둘러쌌다면, 또 이를 둘러싸는 div 태그가 있어야 비로소 이미지 리스트가 정상적으로 작동.
HTML & CSS 카테고리의 다른 글