[CSS,Javascript] 이미지 가로 스크롤 나오게, 클릭시 이미지 확대

 

<style>
    /* 이미지가 부모 너비보다 클 경우 가로 스크롤 생성 */
    .board_viewDetail {
        width: 100%;
        overflow-x: auto; /* 가로 내용이 넘치면 스크롤바 생성 */
        -webkit-overflow-scrolling: touch; /* 모바일에서 부드러운 스크롤 지원 */
    }
 
    /* 이미지 기본 설정 */
    .board_viewDetail img {
        max-width: none; /* 스크롤을 보기 위해 너비 제한 해제 (또는 상황에 따라 조정) */
        height: auto;
        display: block;
        cursor: pointer; /* 클릭 가능함을 시각적으로 표시 */
    }
</style>
 
<div class="board_view_content">
    <div class="board_viewDetail">
        <p><img src="/smarteditor2/upload/20260211172538650722450.jpg" title="" class="zoomable-img">
        <br style="clear:both;">&nbsp;</p>
    </div>
</div>
 
 
<script>
document.addEventListener("DOMContentLoaded", function() {
    // board_viewDetail 안에 있는 모든 이미지 요소를 찾습니다.
    const images = document.querySelectorAll('.board_viewDetail img');
 
    images.forEach(function(img) {
        img.addEventListener('click', function() {
            // 이미지의 src 경로를 가져옵니다.
            const imgUrl = this.src;
            
            // 새 창(탭)으로 이미지 주소를 엽니다.
            window.open(imgUrl, '_blank');
        });
    });
});
</script>