[ 게시판 상단 내용]
<script>
function handleImageClick(event) {
// 클릭된 요소(div)의 전체 너비
const rect = event.currentTarget.getBoundingClientRect();
const width = rect.width;
// 요소 내에서 클릭된 X 좌표 (왼쪽 끝이 0)
const x = event.clientX - rect.left;
if (x < width / 3) {
// 1. 왼쪽 1/3 영역 클릭 시
window.location.href = "https://URL";
}
else if (x >= width / 3 && x <= (width / 3) * 2) {
// 2. 중간 1/3 영역 클릭 시 (추가된 부분)
window.location.href = "https://URL";
}
else {
// 3. 오른쪽 1/3 영역 클릭 시
window.location.href = "https://URL";
}
}
</script>
<table style="width: 100%; max-width: 800px; min-width: 100px; margin: 0 auto; border: 0px solid #ccc; border-collapse: collapse;">
<tr>
<td>
<table style="width: 100%; max-width: 800px; min-width: 100px; background-color: #fff; border: 1px solid #e0e0e0; border-collapse: separate; border-spacing: 0; border-radius: 20px; margin: 0; overflow: hidden; table-layout: fixed;">
<tr>
<!-- 1. td에 padding: 0과 line-height: 0 추가 -->
<td style="border: none; text-align: left; padding: 0; line-height: 0;">
<!-- 2. div의 display를 block으로 하여 공간을 꽉 채움 -->
<div onclick="handleImageClick(event)" style="display: block; position: relative; cursor: pointer; user-select: none;">
<!-- 3. 이미지에 vertical-align: middle 추가하여 하단 여백 제거 -->
<img src="https://URL" alt="아이콘" style="display: block; width: 100%; vertical-align: middle;">
</div>
</td>
</tr>
</table>
<br><b>
<!--[게시판 영역]-->
[ 게시판 하단 내용 ]
</td>
</tr>
</table>