728x90
안녕하세요 이번에는 이전 게시물에 이어서 텍스트도 수정해보겠습니다.
이전 게시물 링크입니다.
https://stickode.tistory.com/1019
다음은 test.html 의 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지와 텍스트 편집 카드</title>
<!-- Tailwind CSS 링크 -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-200 h-screen flex flex-col justify-center items-center gap-4">
<!-- 입력 섹션 -->
<div class="space-y-4">
<!-- 이미지 파일 선택 인풋 -->
<input type="file" accept="image/*" id="imageInput" class="file:bg-blue-500 file:px-4 file:py-2 file:text-white file:rounded file:border-0 file:cursor-pointer">
<!-- 제목을 입력하는 텍스트 필드 -->
<input type="text" id="titleInput" placeholder="제목을 입력하세요" class="mt-2 px-4 py-2 w-full border rounded-md">
<!-- 설명을 입력하는 텍스트 에어리어 -->
<textarea id="descriptionInput" placeholder="설명을 입력하세요" rows="4" class="px-4 py-2 w-full border rounded-md"></textarea>
</div>
<!-- 카드 뷰 섹션 -->
<div class="transition-transform transform hover:scale-105 hover:shadow-lg p-6 bg-white rounded-lg max-w-sm mt-8">
<!-- 이미지 미리보기 컨테이너 -->
<img id="imagePreview" src="" alt="이미지 미리보기" class="hidden w-full rounded-md mb-4">
<!-- 카드 제목 -->
<h1 id="cardTitle" class="text-2xl font-semibold mb-2">이미지 제목</h1>
<!-- 카드 설명 -->
<p id="cardDescription" class="text-gray-700">여기에 선택한 이미지의 설명을 추가할 수 있습니다.</p>
</div>
<script>
// 각 입력 요소를 변수에 할당
const imageInput = document.getElementById('imageInput');
const titleInput = document.getElementById('titleInput');
const descriptionInput = document.getElementById('descriptionInput');
const imagePreview = document.getElementById('imagePreview');
const cardTitle = document.getElementById('cardTitle');
const cardDescription = document.getElementById('cardDescription');
// 이미지 파일을 선택할 때마다 실행될 이벤트 리스너
imageInput.addEventListener('change', function (event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function (e) {
// 이미지 미리보기에 이미지 로드
imagePreview.src = e.target.result;
// 미리보기 이미지를 보이게 함
imagePreview.classList.remove('hidden');
};
// 파일을 Data URL로 읽음
reader.readAsDataURL(file);
});
// 제목 입력 필드의 내용이 변경될 때마다 실행될 이벤트 리스너
titleInput.addEventListener('input', function (event) {
// 카드 제목 업데이트
cardTitle.textContent = event.target.value;
});
// 설명 입력 필드의 내용이 변경될 때마다 실행될 이벤트 리스너
descriptionInput.addEventListener('input', function (event) {
// 카드 설명 업데이트
cardDescription.textContent = event.target.value;
});
</script>
</body>
</html>
위 예제를 통해 다음과 같은 결과물을 얻을 수 있습니다.