안녕하세요 이번에는 이전 게시물에 이어서 텍스트도 수정해보겠습니다.
이전 게시물 링크입니다.
https://stickode.tistory.com/1020
다음은 test.html 의 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Image & Text Editor with Effects</title>
<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">
<!-- Input Section -->
<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="Enter title here" class="mt-2 px-4 py-2 w-full border rounded-md">
<textarea id="descriptionInput" placeholder="Enter description here" rows="4" class="px-4 py-2 w-full border rounded-md"></textarea>
<!-- Sliders for image effects -->
<div class="flex justify-between items-center">
<label for="rotateSlider">Rotate:</label>
<input type="range" id="rotateSlider" min="0" max="360" value="0" class="w-full">
</div>
<div class="flex justify-between items-center">
<label for="shadowSlider">Shadow:</label>
<input type="range" id="shadowSlider" min="0" max="50" value="0" class="w-full">
</div>
</div>
<!-- Card View Section -->
<div id="card" 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="Image preview" class="hidden w-full rounded-md mb-4">
<h1 id="cardTitle" class="text-2xl font-semibold mb-2">Image Title</h1>
<p id="cardDescription" class="text-gray-700">Your image description will appear here.</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');
const rotateSlider = document.getElementById('rotateSlider');
const shadowSlider = document.getElementById('shadowSlider');
const card = document.getElementById('card');
// Event listener for image input
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');
};
reader.readAsDataURL(file);
});
// Event listener for title input
titleInput.addEventListener('input', function(event) {
cardTitle.textContent = event.target.value;
});
// Event listener for description input
descriptionInput.addEventListener('input', function(event) {
cardDescription.textContent = event.target.value;
});
// Event listener for rotate slider
rotateSlider.addEventListener('input', function(event) {
const rotationValue = event.target.value;
imagePreview.style.transform = `rotate(${rotationValue}deg)`;
});
// Event listener for shadow slider
shadowSlider.addEventListener('input', function(event) {
const shadowValue = event.target.value;
imagePreview.style.boxShadow = `${shadowValue}px ${shadowValue}px ${shadowValue * 2}px rgba(0, 0, 0, 0.3)`;
});
</script>
</body>
</html>
위 예제를 통해 다음과 같은 결과물을 얻을 수 있습니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] Bowser 라이브러리를 통해 오페라 브라우저인 경우 css 스타일 바꾸기 (0) | 2024.01.07 |
|---|---|
| [HTML/CSS] Bowser 라이브러리를 통해 브라우저 이름과 버전 정보 가져오기 (0) | 2023.12.29 |
| [HTML/CSS] Tailwind로 캘린더 만들기 (2) | 2023.12.04 |
| [HTML/CSS] Tailwind로 사용자 선택 이미지 카드 뷰어 만들기 (0) | 2023.12.01 |
| [HTML/CSS]카드 컴포넌트 캐러셀 구현 (0) | 2023.11.26 |
