안녕하세요 오늘은 Tailwind로 사용자 선택 이미지 카드 뷰어 만들어 보겠습니다
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>
<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="p-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">
</div>
<div class="transition-transform transform hover:scale-105 hover:shadow-lg p-6 bg-white rounded-lg max-w-sm">
<!-- 이미지 미리보기를 위한 컨테이너 -->
<img id="imagePreview" src="" alt="이미지 미리보기" class="hidden w-full rounded-md mb-4">
<h1 class="text-2xl font-semibold mb-2">이미지 제목</h1>
<p class="text-gray-700">여기에 선택한 이미지의 설명을 추가할 수 있습니다.</p>
</div>
<script>
// 이미지 인풋 요소를 선택
const imageInput = document.getElementById('imageInput');
// 이미지 미리보기 요소를 선택
const imagePreview = document.getElementById('imagePreview');
// 'change' 이벤트 리스너를 이미지 인풋에 추가
imageInput.addEventListener('change', function (event) {
// 선택한 파일을 가져옴
const file = event.target.files[0];
// FileReader 객체를 생성
const reader = new FileReader();
// 파일을 읽었을 때 실행할 콜백 설정
reader.onload = function (e) {
// 이미지 미리보기 요소의 src 속성을 설정하여 이미지 표시
imagePreview.src = e.target.result;
imagePreview.classList.remove('hidden');
};
// 파일을 Data URL 형식으로 읽음
reader.readAsDataURL(file);
});
</script>
</body>
</html>
위 예제를 통해 다음과 같은 결과물을 얻을 수 있습니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] Tailwind로 이미지에 그림자 및 회전 효과를 적용할 수 있는 카드뷰 만들기 (0) | 2023.12.20 |
|---|---|
| [HTML/CSS] Tailwind로 캘린더 만들기 (2) | 2023.12.04 |
| [HTML/CSS]카드 컴포넌트 캐러셀 구현 (0) | 2023.11.26 |
| [HTML/CSS]간단한 메모장 만들기 (0) | 2023.11.16 |
| [HTML/CSS]TailwindCSS 카드 컴포넌트 만들기 (0) | 2023.11.07 |
