새소식
반응형
WEB/Thymeleaf
[Thymeleaf] 타임리프 lottie json 형식으로 불러오기
- -
반응형
2023-12-18
1. 방법
CDN 으로 자바스크립트 코드 소스를 불러온다.
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>lottie-player 태그를 이용해 자신의 json 파일을 불러오면 된다.
<lottie-player th:src="@{first_icon.json}" loop autoplay>
</lottie-player>
아래는 참고용 위치이다.
전체코드
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="UTF-8">
<title>Elegant</title>
<!--자바스크립트 인포트-->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>
<style>
/* CSS 스타일링 */
.colored-div {
background-color: #ffcc00; /* 원하는 색상 코드로 변경하세요 */
width: 300px; /* 원하는 너비로 변경하세요 */
height: 200px; /* 원하는 높이로 변경하세요 */
padding: 20px; /* 원하는 안쪽 여백으로 변경하세요 */
}
</style>
<body>
<h1>template</h1>
<div class="colored-div">
<div>
<lottie-player th:src="@{first_icon.json}" background="transparent" style="width: 300px; height: 225px;" speed="1" loop autoplay>
</lottie-player>
</div>
</div>
</body>
</html>메인 이미지 출처 : 사진: Unsplash의Austin Schmid
반응형
'WEB > Thymeleaf' 카테고리의 다른 글
| thymeleaf 에서 th:fragment 에 매개변수 넣는법 (0) | 2024.03.06 |
|---|---|
| jar 파일 배포시 Thymeleaf 리소스 못찾는 문제 해결 방법 (0) | 2024.02.21 |
| [Thymeleaf] 타임리프 변수 자바스크립트에서 사용하는법 (0) | 2023.01.22 |
| [Thymeleaf] th:text 안에 문자 합치기 / 파라미터 여러개 넣기 (0) | 2023.01.02 |
| [Thymeleaf] 타임리프 반복문 사용하는 방법 (0) | 2022.12.20 |
Contents
소중한 공감 감사합니다