RanolP/preact-quickstart.html

## preact-quickstart.html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Preact Quickstart</title>
</head>
<body>
    <script type="module">
        import { html, render, useState, useEffect } from 'https://cdn.skypack.dev/htm@3.0.4/preact/standalone';
        import { css, injectGlobal, keyframes } from 'https://cdn.skypack.dev/@emotion/css';

        injectGlobal`
            html, body {
                margin: 0;
                padding: 0;
            }
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                width: 100vw;
                background: linear-gradient(150deg, #da77f2 45%, #5c7cfa);
            }
        `;

        const pretty = css`
            color: #fff9db;
            background: linear-gradient(45deg, #faa2c1aa, #b197fcaa);
            padding: 2rem;
            border-radius: 1.5rem;
            box-shadow: 20px 20px 60px hsla(0, 0%, 0%, 15%), -20px -20px 60px hsla(0, 0%, 100%, 25%);
        `;

        function App() {
            const [count, setCount] = useState(0);

            useEffect(() => {
                setTimeout(() => {
                    setCount(previous => previous + 1);
                }, 1000);
            }, [count]);

            return html`
                <h1 class=${pretty}>
                    ${count}초 동안 이 페이지에 접속 중이에요!
                </h1>
            `;
        }

        render(
            html`
                <${App} />
            `,
            document.body
        );
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Preact Quickstart</title>
	</head>
	<body>
	<script type="module">
	import { html, render, useState, useEffect } from 'https://cdn.skypack.dev/htm@3.0.4/preact/standalone';
	import { css, injectGlobal, keyframes } from 'https://cdn.skypack.dev/@emotion/css';

	injectGlobal`
	html, body {
	margin: 0;
	padding: 0;
	}
	body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
	background: linear-gradient(150deg, #da77f2 45%, #5c7cfa);
	}
	`;

	const pretty = css`
	color: #fff9db;
	background: linear-gradient(45deg, #faa2c1aa, #b197fcaa);
	padding: 2rem;
	border-radius: 1.5rem;
	box-shadow: 20px 20px 60px hsla(0, 0%, 0%, 15%), -20px -20px 60px hsla(0, 0%, 100%, 25%);
	`;

	function App() {
	const [count, setCount] = useState(0);

	useEffect(() => {
	setTimeout(() => {
	setCount(previous => previous + 1);
	}, 1000);
	}, [count]);

	return html`
	<h1 class=${pretty}>
	${count}초 동안 이 페이지에 접속 중이에요!
	</h1>
	`;
	}

	render(
	html`
	<${App} />
	`,
	document.body
	);
	</script>
	</body>
	</html>