이미지 나란히 정렬하는 법 질문드립니다.
본문
안녕하세요.
index에
<div style="text-align:center">
<a href="URL주소" target="_blank"><img src="이미지 주소" alt=""></a>
</div>
로 이미지 삽입하면 클릭시 링크 이동 하는 것을 알게 되었습니다.
위 사진처럼 이미지 3개를 나란히 정렬하고 싶은데 어려운 작업 일까요?
초보자라 염치불구 하고 질문드립니다.
힌트 주시면 최대한 해보겠습니다.
답변 2
<div style="width:33.3%;float:left;padding:10px;text-align:center">
<a href="URL주소" target="_blank"><img src="이미지 주소" alt=""></a>
</div>
<div style="width:33.3%;float:left;padding:10px;text-align:center">
<a href="URL주소" target="_blank"><img src="이미지 주소" alt=""></a>
</div>
<div style="width:33.3%;float:left;padding:10px;text-align:center">
<a href="URL주소" target="_blank"><img src="이미지 주소" alt=""></a>
</div>
정말 감사합니다.ㅠㅠ
div 의 플렉스나 그리드를 사용해도 되지만...
레이아웃이 아니라면 테이블의 table-layout:fixed 를 사용하는 것도 괜찮습니다.
style 은 따로 빼셔도 되구요.
<table style=table-layout:fixed;width:960px cellpadding=0 cellspacing=0>
<tr>
<td><a><img style=width:100%;display:block src=https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td>
<td style=width:5px>
<td><a><img style=width:100%;display:block src=https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td>
<td style=width:5px>
<td><a><img style=width:100%;display:block src=https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td>
</tr>
<tr><td style=height:5px></td></tr>
<tr>
<td><a><img style=width:100%;display:block src=https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td>
<td style=width:5px>
<td><a><img style=width:100%;display:block src=https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td>
<td style=width:5px>
<td><a><img style=width:100%;display:block src=https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td>
</tr>
</table>
감사합니다 정말ㅠㅠ 해보고 말씀드리겠습니다!
