본문 바로가기
HTML/CSS

[HTML/CSS] Tailwind로 사용자 선택 이미지 카드 뷰어 만들기

by teamnova 2023. 12. 1.
728x90

안녕하세요 오늘은 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>

 

 

 

위 예제를 통해 다음과 같은 결과물을 얻을 수 있습니다.