23. copying to the clipboard

๋‚ด์šฉ

์œ„ ๊ธ€์€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์‚ฌ์šฉ์ž์˜ ํด๋ฆฝ๋ณด๋“œ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณต์‚ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์„ค๋ช…์ž…๋‹ˆ๋‹ค.
์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ผ๋ถ€์ธ 'box' ๊ฐ์ฒด์˜ ๋ณ€ํ™˜ ์†์„ฑ ๊ฐ’์„ ์‚ฌ์šฉ์ž ํด๋ฆฝ๋ณด๋“œ๋กœ ๋ณต์‚ฌํ•˜๋Š” ๊ณผ์ •์„ ๋‹ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
์ด๋ฅผ ์œ„ํ•ด, HTML ํ…œํ”Œ๋ฆฟ์˜ ๋ฒ„ํŠผ์— ํด๋ฆญ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ , ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์—์„œ 'copy' ๋ฉ”์†Œ๋“œ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
์ด ๋ฉ”์†Œ๋“œ๋Š” navigator.clipboard.writeText ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋น„๋™๊ธฐ์ ์œผ๋กœ ํด๋ฆฝ๋ณด๋“œ์— ํ…์ŠคํŠธ๋ฅผ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค.
async์™€ await ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋น„๋™๊ธฐ ์ฝ”๋“œ๋ฅผ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
๋งˆ์ง€๋ง‰์œผ๋กœ, ์‚ฌ์šฉ์ž์—๊ฒŒ ์„ฑ๊ณต์ ์œผ๋กœ ๋ณต์‚ฌ๋˜์—ˆ๋‹ค๋Š” ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ์•Œ๋ฆผ(alert) ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
์ด ๊ณผ์ •์€ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›๋˜๋Š” ํด๋ฆฝ๋ณด๋“œ API๋ฅผ ํ™œ์šฉํ•˜๋ฉฐ, ๊ตฌํ˜• ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Œ์„ ์–ธ๊ธ‰ํ•ฉ๋‹ˆ๋‹ค.


index.html
<!DOCTYPE>
<html>

<head>
    <title>CSS3 Perspective Playground</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="app">
    <h2>CSS3 Perspective Playground</h2>
    <main>
        <section class="settings">
            <div class="settings-container">
                <label>perspective: {{ perspective }}px;</label>
                <input type="range" min="0" max="999" v-model="perspective" />

                <label>rotateX: {{ rotateX }}deg; </label>
                <input type="range" min="-180" max="180" v-model="rotateX" />

                <label>rotateY: {{ rotateY }}deg; </label>
                <input type="range" min="-180" max="180" v-model="rotateY" />

                <label>rotateZ: {{ rotateZ }}deg; </label>
                <input type="range" min="-180" max="180" v-model="rotateZ" />

                <button type="button" @click.prevent="reset">Reset</button>
                <button type="button" @click.prevent="copy">Copy</button>
            </div>
        </section>
        <section class="output">
            <div class="box-container">
                <div class="box" :style="box"></div>
            </div>
        </section>
    </main>

</div>

<css-doodle>
    :doodle {
    @grid: 1x3 / 100vmax;
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
    }

    @size: 100% 150%;
    position: absolute;

    background: @m(100, (
    linear-gradient(transparent, @p(
    #FFFDE1@repeat(2, @p([0-9a-f])),
    #FB3569@repeat(2, @p([0-9a-f]))
    ))
    @r(0%, 100%) @r(0%, 100%) /
    @r(1px) @r(23vmin)
    no-repeat
    ));

    will-change: transform;
    animation: f 50s linear calc(-50s / @size() * @i()) infinite;
    @keyframes f {
    from { transform: translateY(-100%) }
    to { transform: translateY(100%) }
    }
</css-doodle>

<script src="https://unpkg.com/css-doodle@0.6.1/css-doodle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.9/vue.global.min.js"></script>
<script src="app.js"></script>
</body>

</html>