Thymeleaf에서 태그에 속성값을 입력하고 함수로 Element 넘기는 방법에 대해 간략히 알아보겠습니다. 1. 속성 선언th:data-url 이라는 속성에 변수 imgUrl 값을 맵핑하고 zoomIn 함수에 this을 파라미터로 넘깁니다.2. 함수 구현function zoomIn(element){ var imgUrl = element.getAttribute('data-url'); // 모달창을 여는 로직 var modal = document.getElementById("imageModal"); var modalImg = document.getElementById("modalImage"); modal.style.display = "flex"; modalImg.src = imgUrl;}g..

CDN 서버를 통해 이미지를 가져오던 중 해당 서버에 요청한 이미지가 없을 경우 기본 이미지를 지정하기 위해 onerror 속성을 사용합니다. 이번 포스팅에서는 onerror 이벤트를 javascript 에서 핸들링 하는 방법에 대해 가볍게 작성하였습니다1. img 태그 작성th:onerror 에 함수를 지정하고 파라미터 값으로 속성(th:baseCd)을 넘깁니다. 2. 스크립트 작성함수 내부에서 추가적인 작업을 진행하고 img 의 src를 지정할 수 있습니다.감사합니다.

화면 개발을 하다 보면 공통 스크립트 및 스타일을 작성합니다. 3. 사용 ...각 페이지 상단에 th:replace 를 입력합니다.감사합니다.

이번 포스팅에선 타임리프에서 변수를 표시하는 다양한 방법에 대해 작성하고자 합니다. 타임리프는 Natural 템플릿이기 때문에 HTML 흐름에 자연스럽게 값을 맵핑할 수 있습니다.1. th:text${}를 이용하여 값을 맵핑할 수 있습니다. 2. HTML 태그 내부에서 사용[[${}]] 를 이용하여 HTML 태그 내부에서 값을 맵핑할 수 있습니다.[[${room.roomName}]] 3. Javascript 내부에서 사용javascript 에서 변수로 받아 동적으로 처리할 수 있습니다. 4. img src 및 onclick 작성방법 감사합니다.