Portfolio

Button code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draggable Image Buttons</title>
    <style>
        /* CSS 코드 */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-image: url('images/buttonBack.png'); /* 배경 이미지 설정 */
            background-size: cover; /* 배경 이미지 크기 조정 */
            background-position: center; /* 배경 이미지 위치 */
            background-repeat: no-repeat; /* 배경 이미지 반복 금지 */
        }

        /* 배경 색상을 설정하려면 아래 주석을 해제하세요 */
        /* 
        body {
            background-color: #f0f0f0; 배경 색상 설정
        }
        */

        .custom-button {
            position: absolute; /* 버튼의 위치를 절대값으로 설정 */
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            outline: none;
            margin: 5px; /* 버튼 간격 조정 */
        }
        .custom-button img {
            display: block;
            width: 300px; /* 이미지 너비 조정 */
            height: auto; /* 이미지 높이 자동 조정 */
        }
        .custom-button img:hover {
            transform: scale(1.1); /* 마우스를 올렸을 때 확대 효과 */
            transition: transform 0.2s;
        }
        .custom-button img:active {
            transform: scale(0.9); /* 클릭 시 축소 효과 */
            transition: transform 0.1s;
        }
    </style>
</head>
<body>
    <!-- HTML 코드 -->
    <div id="button-container" style="position: relative; width: 100%; height: 100vh;">
        <!-- JavaScript를 통해 버튼을 생성할 것입니다. -->
    </div>

    <!-- JavaScript 코드 -->
    <script>
        // 버튼을 생성하고 이벤트 리스너를 추가하는 함수
        function createButton(id, imagePath, newImagePath) {
            const button = document.createElement('button');
            button.className = 'custom-button';
            button.id = 'button-' + id;
            button.style.left = Math.random() * (window.innerWidth - 100) + 'px'; // 랜덤 위치 설정
            button.style.top = Math.random() * (window.innerHeight - 100) + 'px'; // 랜덤 위치 설정

            button.ondblclick = function() {
                handleDoubleClick(id, newImagePath);
            };

            const img = document.createElement('img');
            img.src = imagePath;
            img.alt = 'Custom Button ' + id;
            button.appendChild(img);

            // 드래그 기능 추가
            button.onmousedown = function(event) {
                dragElement(button, event);
            };

            return button;
        }

        // 버튼 더블 클릭 시 호출되는 함수
        function handleDoubleClick(id, newImagePath) {
            const button = document.getElementById('button-' + id);
            const img = button.getElementsByTagName('img')[0];
            img.src = newImagePath;
        }

        // 드래그 기능을 구현하는 함수
        function dragElement(element, event) {
            event.preventDefault();
            let shiftX = event.clientX - element.getBoundingClientRect().left;
            let shiftY = event.clientY - element.getBoundingClientRect().top;

            function moveAt(pageX, pageY) {
                element.style.left = pageX - shiftX + 'px';
                element.style.top = pageY - shiftY + 'px';
            }

            function onMouseMove(event) {
                moveAt(event.pageX, event.pageY);
            }

            document.addEventListener('mousemove', onMouseMove);

            element.onmouseup = function() {
                document.removeEventListener('mousemove', onMouseMove);
                element.onmouseup = null;
            };
        }

        document.body.ondragstart = function() {
            return false;
        };

        // 20개의 버튼을 생성하여 추가합니다.
        const buttonContainer = document.getElementById('button-container');
        for (let i = 1; i <= 20; i++) {
            const button = createButton(i, 'images/buttonOff.png', 'images/buttonOn.png');
            buttonContainer.appendChild(button);
        }
    </script>
</body>
</html>

code2


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draggable Image Buttons</title>
    <style>
        /* CSS 코드 */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-image: url('images/buttonBack.png'); /* 배경 이미지 설정 */
            background-size: cover; /* 배경 이미지 크기 조정 */
            background-position: center; /* 배경 이미지 위치 */
            background-repeat: no-repeat; /* 배경 이미지 반복 금지 */
        }

        .custom-button {
            position: absolute; /* 버튼의 위치를 절대값으로 설정 */
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            outline: none;
            margin: 5px; /* 버튼 간격 조정 */
        }
        .custom-button img {
            display: block;
            width: 300px; /* 이미지 너비 조정 */
            height: auto; /* 이미지 높이 자동 조정 */
        }
        .custom-button img:hover {
            transform: scale(1.1); /* 마우스를 올렸을 때 확대 효과 */
            transition: transform 0.2s;
        }
        .custom-button img:active {
            transform: scale(0.9); /* 클릭 시 축소 효과 */
            transition: transform 0.1s;
        }
    </style>
</head>
<body>
    <!-- HTML 코드 -->
    <div id="button-container" style="position: relative; width: 100%; height: 100vh;">
        <!-- JavaScript를 통해 버튼을 생성할 것입니다. -->
    </div>

    <!-- JavaScript 코드 -->
    <script>
        const totalButtons = 20; // 전체 버튼 수
        let clickedButtons = 0; // 클릭된 버튼 수

        // 로컬 스토리지를 초기화하는 함수
        function initializeLocalStorage() {
            localStorage.clear();
            localStorage.setItem('initialized', 'true');
        }

        // 웹에 처음 접속할 때 로컬 스토리지를 초기화
        if (!localStorage.getItem('initialized')) {
            initializeLocalStorage();
        }

        // 버튼을 생성하고 이벤트 리스너를 추가하는 함수
        function createButton(id, imagePath, newImagePath, url) {
            const button = document.createElement('button');
            button.className = 'custom-button';
            button.id = 'button-' + id;
            button.style.left = Math.random() * (window.innerWidth - 100) + 'px'; // 랜덤 위치 설정
            button.style.top = Math.random() * (window.innerHeight - 100) + 'px'; // 랜덤 위치 설정

            const img = document.createElement('img');
            img.src = imagePath;
            img.alt = 'Custom Button ' + id;
            button.appendChild(img);

            button.ondblclick = function() {
                handleDoubleClick(id, newImagePath, url);
            };

            // 드래그 기능 추가
            button.onmousedown = function(event) {
                dragElement(button, event);
            };

            return button;
        }

        // 버튼 더블 클릭 시 호출되는 함수
        function handleDoubleClick(id, newImagePath, url) {
            const button = document.getElementById('button-' + id);
            const img = button.getElementsByTagName('img')[0];
            img.src = newImagePath;

            // 로컬 스토리지에 버튼 상태 저장
            localStorage.setItem('button-' + id, 'clicked');

            // 클릭된 버튼 수 증가
            clickedButtons++;
            checkAllButtonsClicked();

            // URL로 이동
            window.location.href = url;
        }

        // 모든 버튼이 클릭되었는지 확인하는 함수
        function checkAllButtonsClicked() {
            if (clickedButtons >= totalButtons) {
                window.location.href = 'ending.html';
            }
        }

        // 드래그 기능을 구현하는 함수
        function dragElement(element, event) {
            event.preventDefault();
            let shiftX = event.clientX - element.getBoundingClientRect().left;
            let shiftY = event.clientY - element.getBoundingClientRect().top;

            function moveAt(pageX, pageY) {
                element.style.left = pageX - shiftX + 'px';
                element.style.top = pageY - shiftY + 'px';
            }

            function onMouseMove(event) {
                moveAt(event.pageX, event.pageY);
            }

            document.addEventListener('mousemove', onMouseMove);

            element.onmouseup = function() {
                document.removeEventListener('mousemove', onMouseMove);
                element.onmouseup = null;
            };
        }

        document.body.ondragstart = function() {
            return false;
        };

        // 페이지가 로드될 때 로컬 스토리지에서 버튼 상태를 복원
        function restoreButtonState(id, newImagePath) {
            const state = localStorage.getItem('button-' + id);
            if (state === 'clicked') {
                const button = document.getElementById('button-' + id);
                const img = button.getElementsByTagName('img')[0];
                img.src = newImagePath;
                clickedButtons++; // 클릭된 버튼 수 증가
            }
        }

        // 20개의 버튼을 생성하여 추가합니다.
        const buttonContainer = document.getElementById('button-container');
        const urls = [
            'page1.html', 'page2.html', 'page3.html', 'page4.html', 'page5.html',
            'page6.html', 'page7.html', 'page8.html', 'page9.html', 'page10.html',
            'page11.html', 'page12.html', 'page13.html', 'page14.html', 'page15.html',
            'page16.html', 'page17.html', 'page18.html', 'page19.html', 'page20.html'
        ];
        for (let i = 1; i <= totalButtons; i++) {
            const button = createButton(i, 'images/buttonOff.png', 'images/buttonOn.png', urls[i-1]);
            buttonContainer.appendChild(button);
            restoreButtonState(i, 'images/buttonOn.png'); // 버튼 상태 복원
        }

        // 페이지가 로드될 때 모든 버튼이 클릭되었는지 확인
        checkAllButtonsClicked();
    </script>
</body>
</html>

정렬된 버튼!?


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Positioned Buttons</title>
    <style>
        /* CSS 코드 */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-image: url('images/buttonBack.png'); /* 배경 이미지 설정 */
            background-size: cover; /* 배경 이미지 크기 조정 */
            background-position: center; /* 배경 이미지 위치 */
            background-repeat: no-repeat; /* 배경 이미지 반복 금지 */
        }

        .button-container {
            position: relative;
            width: 100vw; /* 화면 전체 너비 */
            height: 100vh; /* 화면 전체 높이 */
        }

        .custom-button {
            position: absolute; /* 버튼을 절대 위치로 설정 */
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            outline: none;
        }
        .custom-button img {
            display: block;
            width: 300px; /* 이미지 너비 조정 */
            height: auto; /* 이미지 높이 자동 조정 */
        }
        .custom-button img:hover {
            transform: scale(1.1); /* 마우스를 올렸을 때 확대 효과 */
            transition: transform 0.2s;
        }
        .custom-button img:active {
            transform: scale(0.9); /* 클릭 시 축소 효과 */
            transition: transform 0.1s;
        }
    </style>
</head>
<body>
    <!-- HTML 코드 -->
    <div class="button-container" id="button-container">
        <!-- JavaScript를 통해 버튼을 생성할 것입니다. -->
    </div>

    <!-- JavaScript 코드 -->
    <script>
        const totalButtons = 20; // 전체 버튼 수
        let clickedButtons = 0; // 클릭된 버튼 수

        // 세션 스토리지를 초기화하는 함수
        function initializeSessionStorage() {
            sessionStorage.clear();
            sessionStorage.setItem('initialized', 'true');
        }

        // 웹에 처음 접속할 때 세션 스토리지를 초기화
        if (!sessionStorage.getItem('initialized')) {
            initializeSessionStorage();
        }

        // 버튼을 생성하고 이벤트 리스너를 추가하는 함수
        function createButton(id, imagePath, newImagePath, url, left, top) {
            const button = document.createElement('button');
            button.className = 'custom-button';
            button.id = 'button-' + id;
            button.style.left = left;
            button.style.top = top;

            const img = document.createElement('img');
            img.src = imagePath;
            img.alt = 'Custom Button ' + id;
            button.appendChild(img);

            button.ondblclick = function() {
                handleDoubleClick(id, newImagePath, url);
            };

            return button;
        }

        // 버튼 더블 클릭 시 호출되는 함수
        function handleDoubleClick(id, newImagePath, url) {
            const button = document.getElementById('button-' + id);
            const img = button.getElementsByTagName('img')[0];
            img.src = newImagePath;

            // 로컬 스토리지에 버튼 상태 저장
            localStorage.setItem('button-' + id, 'clicked');

            // 세션 스토리지에 버튼 상태 저장
            sessionStorage.setItem('button-' + id, 'clicked');

            // 클릭된 버튼 수 증가
            clickedButtons++;
            checkAllButtonsClicked();

            // URL로 이동
            window.location.href = url;
        }

        // 모든 버튼이 클릭되었는지 확인하는 함수
        function checkAllButtonsClicked() {
            if (clickedButtons >= totalButtons) {
                window.location.href = 'ending.html';
            }
        }

        // 페이지가 로드될 때 세션 스토리지에서 버튼 상태를 복원
        function restoreButtonState(id, newImagePath) {
            const state = sessionStorage.getItem('button-' + id);
            if (state === 'clicked') {
                const button = document.getElementById('button-' + id);
                const img = button.getElementsByTagName('img')[0];
                img.src = newImagePath;
                clickedButtons++; // 클릭된 버튼 수 증가
            }
        }

        // 20개의 버튼을 생성하여 추가합니다.
        const buttonContainer = document.getElementById('button-container');
        const urls = [
            'page1.html', 'page2.html', 'page3.html', 'page4.html', 'page5.html',
            'page6.html', 'page7.html', 'page8.html', 'page9.html', 'page10.html',
            'page11.html', 'page12.html', 'page13.html', 'page14.html', 'page15.html',
            'page16.html', 'page17.html', 'page18.html', 'page19.html', 'page20.html'
        ];

        // 버튼의 위치를 지정하는 배열
        const positions = [
        { left: '35%', top: '10%' }, { left: '45%', top: '15%' }, { left: '55%', top: '20%' }, { left: '65%', top: '25%' }, { left: '75%', top: '30%' },
        { left: '30%', top: '20%' }, { left: '40%', top: '25%' }, { left: '50%', top: '30%' }, { left: '60%', top: '35%' }, { left: '70%', top: '40%' },
        { left: '25%', top: '40%' }, { left: '35%', top: '45%' }, { left: '45%', top: '50%' }, { left: '55%', top: '55%' }, { left: '65%', top: '60%' },
        { left: '20%', top: '50%' }, { left: '30%', top: '55%' }, { left: '40%', top: '60%' }, { left: '50%', top: '65%' }, { left: '60%', top: '70%' }
    ];


        for (let i = 1; i <= totalButtons; i++) {
            const position = positions[i-1];
            const button = createButton(i, 'images/buttonOff.png', 'images/buttonOn.png', urls[i-1], position.left, position.top);
            buttonContainer.appendChild(button);
            restoreButtonState(i, 'images/buttonOn.png'); // 버튼 상태 복원
        }

        // 페이지가 로드될 때 모든 버튼이 클릭되었는지 확인
        checkAllButtonsClicked();
    </script>
</body>
</html>

++ 넘어지는 것도 가능


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Positioned Buttons</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-image: url('images/buttonBack.png'); /* 배경 이미지 설정 */
            background-size: cover; /* 배경 이미지 크기 조정 */
            background-position: center; /* 배경 이미지 위치 */
            background-repeat: no-repeat; /* 배경 이미지 반복 금지 */
        }

        .button-container {
            position: relative;
            width: 100vw; /* 화면 전체 너비 */
            height: 100vh; /* 화면 전체 높이 */
        }

        .custom-button {
            position: absolute; /* 버튼을 절대 위치로 설정 */
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            outline: none;
        }
        .custom-button img {
            display: block;
            width: 300px; /* 이미지 너비 조정 */
            height: auto; /* 이미지 높이 자동 조정 */
        }
        .custom-button img:hover {
            transform: scale(1.1); /* 마우스를 올렸을 때 확대 효과 */
            transition: transform 0.2s;
        }
        .custom-button img:active {
            transform: scale(0.9); /* 클릭 시 축소 효과 */
            transition: transform 0.1s;
        }
    </style>
</head>
<body>
    <!-- HTML 코드 -->
    <div class="button-container" id="button-container">
        <!-- JavaScript를 통해 버튼을 생성할 것입니다. -->
    </div>

    <!-- JavaScript 코드 -->
    <script>
        const totalButtons = 20; // 전체 버튼 수
        let clickedButtons = 0; // 클릭된 버튼 수

        // 세션 스토리지를 초기화하는 함수
        function initializeSessionStorage() {
            sessionStorage.clear();
            sessionStorage.setItem('initialized', 'true');
        }

        // 웹에 처음 접속할 때 세션 스토리지를 초기화
        if (!sessionStorage.getItem('initialized')) {
            initializeSessionStorage();
        }

        // 버튼을 생성하고 이벤트 리스너를 추가하는 함수
        function createButton(id, imagePath, newImagePath, url, left, top) {
            const button = document.createElement('button');
            button.className = 'custom-button';
            button.id = 'button-' + id;
            button.style.left = left;
            button.style.top = top;

            const img = document.createElement('img');
            img.src = imagePath;
            img.alt = 'Custom Button ' + id;
            button.appendChild(img);

            button.ondblclick = function() {
                handleDoubleClick(id, newImagePath, url);
            };

            button.onclick = function() {
                handleSingleClick(id);
            };

            return button;
        }

        // 버튼 더블 클릭 시 호출되는 함수
        function handleDoubleClick(id, newImagePath, url) {
            const button = document.getElementById('button-' + id);
            const img = button.getElementsByTagName('img')[0];
            img.src = newImagePath;

            // 로컬 스토리지에 버튼 상태 저장
            localStorage.setItem('button-' + id, 'clicked');

            // 세션 스토리지에 버튼 상태 저장
            sessionStorage.setItem('button-' + id, 'clicked');

            // 클릭된 버튼 수 증가
            clickedButtons++;
            checkAllButtonsClicked();

            // URL로 이동
            window.location.href = url;
        }

        // 버튼 싱글 클릭 시 호출되는 함수
        function handleSingleClick(id) {
            const button = document.getElementById('button-' + id);
            const img = button.getElementsByTagName('img')[0];
            if (id >= 16 && id <= 20) {
                img.style.transform = 'rotate(-70deg)'; /* 각도 기울이기 */
                setTimeout(() => {
                    img.style.transform = 'rotate(0deg)'; /* 원래 각도로 복원 */
                }, 500);
            }
            if (id >= 1 && id <= 5) {
                img.style.transform = 'rotate(70deg)'; /* 각도 기울이기 */
                setTimeout(() => {
                    img.style.transform = 'rotate(0deg)'; /* 원래 각도로 복원 */
                }, 500);
            }
        
        }

        // 모든 버튼이 클릭되었는지 확인하는 함수
        function checkAllButtonsClicked() {
            if (clickedButtons >= totalButtons) {
                window.location.href = 'ending.html';
            }
        }

        // 페이지가 로드될 때 세션 스토리지에서 버튼 상태를 복원
        function restoreButtonState(id, newImagePath) {
            const state = sessionStorage.getItem('button-' + id);
            if (state === 'clicked') {
                const button = document.getElementById('button-' + id);
                const img = button.getElementsByTagName('img')[0];
                img.src = newImagePath;
                clickedButtons++; // 클릭된 버튼 수 증가
            }
        }

        // 20개의 버튼을 생성하여 추가합니다.
        const buttonContainer = document.getElementById('button-container');
        const urls = [
            'page1.html', 'page2.html', 'page3.html', 'page4.html', 'page5.html',
            'page6.html', 'page7.html', 'page8.html', 'page9.html', 'page10.html',
            'page11.html', 'page12.html', 'page13.html', 'page14.html', 'page15.html',
            'page16.html', 'page17.html', 'page18.html', 'page19.html', 'page20.html'
        ];

        // 버튼의 위치를 지정하는 배열
        const positions = [
        { left: '35%', top: '10%' }, { left: '45%', top: '15%' }, { left: '55%', top: '20%' }, { left: '65%', top: '25%' }, { left: '75%', top: '30%' },
        { left: '30%', top: '20%' }, { left: '40%', top: '25%' }, { left: '50%', top: '30%' }, { left: '60%', top: '35%' }, { left: '70%', top: '40%' },
        { left: '25%', top: '40%' }, { left: '35%', top: '45%' }, { left: '45%', top: '50%' }, { left: '55%', top: '55%' }, { left: '65%', top: '60%' },
        { left: '20%', top: '50%' }, { left: '30%', top: '55%' }, { left: '40%', top: '60%' }, { left: '50%', top: '65%' }, { left: '60%', top: '70%' }
    ];

        for (let i = 1; i <= totalButtons; i++) {
            const position = positions[i-1];
            const button = createButton(i, 'images/buttonOff.png', 'images/buttonOn.png', urls[i-1], position.left, position.top);
            buttonContainer.appendChild(button);
            restoreButtonState(i, 'images/buttonOn.png'); // 버튼 상태 복원
        }

        // 페이지가 로드될 때 모든 버튼이 클릭되었는지 확인
        checkAllButtonsClicked();
    </script>
</body>
</html>

좋은 page1 코드


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 1</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-image: url('images/whiteBack.png'); /* 배경 이미지 경로 설정 */
            background-size: cover; /* 배경 이미지 크기 조정 */
            background-position: center; /* 배경 이미지 위치 */
            background-repeat: no-repeat; /* 배경 이미지 반복 금지 */
            background-color: #f0f0f0; /* 배경 색상 설정 (이미지가 로드되지 않을 경우 대비) */
            position: relative; /* 자식 요소들의 절대 위치 설정을 위한 상대 위치 설정 */
        }
        .image-frame {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute; /* 위치 조정을 위한 절대 위치 설정 */
            background-size: cover; /* 배경 이미지 크기 조정 */
            background-position: center; /* 배경 이미지 위치 */
            background-repeat: no-repeat; /* 배경 이미지 반복 금지 */
        }
        .image-frame img {
            display: none; /* 초기 상태에서 이미지를 숨김 */
            max-width: 100%; /* 이미지 너비가 프레임을 넘지 않도록 설정 */
            max-height: 100%; /* 이미지 높이가 프레임을 넘지 않도록 설정 */
        }
        .image-frame:hover img {
            display: block; /* 마우스를 가져다 대면 이미지를 표시 */
        }

        /* 각 프레임의 위치와 크기 조정 */
        #frame1 { top: 0px; left: 500px; width: 470px; height: 470px; background-image: url('images/frame1.png'); }
        #frame2 { top: 30px; left: 1000px; width: 700px; height: 350px; background-image: url('images/frame2.png'); }
        #frame3 { top: -200px; left: 1730px; width: 500px; height: 500px; background-image: url('images/frame3.png'); }
        #frame4 { top: 500px; left: -60px; width: 600px; height: 600px; background-image: url('images/frame4.png'); }
        #frame5 { top: 500px; left: 570px; width: 500px; height: 850px; background-image: url('images/frame5.png'); }
        #frame6 { top: 500px; left: 1100px; width: 700px; height: 700px; background-image: url('images/frame6.png'); }
        #frame7 { top: 330px; left: 1870px; width: 700px; height: 350px; background-image: url('images/frame7.png'); }
        #frame8 { top: 700px; left: 1830px; width: 500px; height: 500px; background-image: url('images/frame8.png'); }
        #frame9 { top: 700px; left: 2370px; width: 410px; height: 700px; background-image: url('images/frame9.png'); }

        .speech-bubble {
            position: absolute;
            width: 200px;
            padding: 10px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .speech-bubble:after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            border-width: 10px;
            border-style: solid;
            border-color: white transparent transparent transparent;
        }

        .typing-animation {
            display: inline-block;
            overflow: hidden; /* 타이핑 효과 영역 밖 텍스트 숨김 */
            white-space: nowrap; /* 텍스트가 줄바꿈 되지 않도록 설정 */
            border-right: .15em solid orange; /* 커서 효과 */
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
            visibility: hidden; /* 초기 상태에서 숨김 */
        }

        .image-frame:hover .typing-animation {
            visibility: visible; /* 마우스를 올리면 텍스트 보임 */
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: orange; }
        }

        .back-button {
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.2s;
            position: absolute; /* 절대 위치 설정 */
            bottom: 20px; /* 화면 하단으로부터의 거리 설정 */
        }
        .back-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="image-frame" id="frame1">
        <img src="images/buttonBack.png" alt="Image 1">
        <div class="speech-bubble" id="speech-1"><span class="typing-animation">Hello, this is bubble 1!</span></div>
    </div>
    <div class="image-frame" id="frame2">
        <img src="images/buttonBack.png" alt="Image 2">
    </div>
    <div class="image-frame" id="frame3">
        <img src="images/buttonBack.png" alt="Image 3">
        <div class="speech-bubble" id="speech-3"><span class="typing-animation">Hello, this is bubble 3!</span></div>
    </div>
    <div class="image-frame" id="frame4">
        <img src="images/buttonBack.png" alt="Image 4">
    </div>
    <div class="image-frame" id="frame5">
        <img src="images/buttonBack.png" alt="Image 5">
        <div class="speech-bubble" id="speech-5"><span class="typing-animation">Hello, this is bubble 5!</span></div>
    </div>
    <div class="image-frame" id="frame6">
        <img src="images/buttonBack.png" alt="Image 6">
    </div>
    <div class="image-frame" id="frame7">
        <img src="images/buttonBack.png" alt="Image 7">
    </div>
    <div class="image-frame" id="frame8">
        <img src="images/buttonBack.png" alt="Image 8">
        <div class="speech-bubble" id="speech-8"><span class="typing-animation">Hello, this is bubble 8!</span></div>
    </div>
    <div class="image-frame" id="frame9">
        <img src="images/buttonBack.png" alt="Image 9">
    </div>
    <button class="back-button" onclick="goBack()">Go Back</button>

    <script>
        function goBack() {
            window.history.back();
        }

        // 말풍선의 텍스트 애니메이션을 재생하는 함수
        function resetTypingAnimation(element) {
            element.style.animation = 'none';
            element.offsetHeight; /* 리플로우 강제 트리거 */
            element.style.animation = null; 
        }

        document.querySelectorAll('.image-frame').forEach(frame => {
            frame.addEventListener('mouseover', () => {
                const id = frame.id.replace('frame', '');
                const bubble = document.getElementById('speech-' + id);
                const textElement = bubble.querySelector('.typing-animation');
                resetTypingAnimation(textElement); // 타이핑 애니메이션 재생
                textElement.style.visibility = 'visible';
            });
            frame.addEventListener('mouseout', () => {
                const id = frame.id.replace('frame', '');
                const bubble = document.getElementById('speech-' + id);
                const textElement = bubble.querySelector('.typing-animation');
                textElement.style.visibility = 'hidden';
            });
        });
    </script>
</body>
</html>

버튼 전환

오늘 (지피티가) 한 거

자리 배치 만들기

만화적 표현 만들기

→ new think: 각각 별로 다양한 interaction 줘볼까?

만화: just 느낌을 줘보기

tape: 녹음해서 들려줄까

캠코더 같은 것도 활용해도 좋을 듯

배운 점/잘 했다고 느낀 점 →

듣고 같이 성장해 나아간다. → 등을 보고 배운다는 걸 좀 더 구체적으로 표현하는 거지

우리가 그 사람 등을 보고 배운 점을 적는다?

#26. Starting Web Programming!