{"id":10,"date":"2025-12-13T05:47:06","date_gmt":"2025-12-13T05:47:06","guid":{"rendered":"https:\/\/yarn.kr\/?page_id=10"},"modified":"2025-12-15T07:30:21","modified_gmt":"2025-12-15T07:30:21","slug":"home","status":"publish","type":"page","link":"https:\/\/yarn.kr\/","title":{"rendered":""},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33b538f e-con-full e-flex e-con e-parent\" data-id=\"33b538f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3600a41 elementor-widget elementor-widget-html\" data-id=\"3600a41\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ko\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\uc2e4\uc2dc\uac04 \uc138\uacc4 \uc2dc\uacc4<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <style>\r\n        \/* Tailwind CSS \uc124\uc815 *\/\r\n        :root {\r\n            --primary-color: #3b82f6; \/* Blue 500 *\/\r\n        }\r\n        body {\r\n            font-family: 'Inter', sans-serif;\r\n            background-color: #0f172a; \/* Slate 900 *\/\r\n            color: #f8fafc; \/* Slate 50 *\/\r\n        }\r\n        .clock-card {\r\n            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n            transition: transform 0.3s ease-in-out;\r\n        }\r\n        .clock-card:hover {\r\n            transform: translateY(-5px);\r\n        }\r\n        .time-display {\r\n            font-variant-numeric: tabular-nums; \/* Ensure monospaced numbers for smooth counting *\/\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen p-4 sm:p-8 flex flex-col items-center\">\r\n\r\n    <div class=\"text-center mb-10\">\r\n        <h1 class=\"text-4xl sm:text-5xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-600\">\r\n            \uc2e4\uc2dc\uac04 \uc138\uacc4 \uc2dc\uacc4\r\n        <\/h1>\r\n        <p class=\"mt-2 text-lg text-slate-400\">\ub124 \ub3c4\uc2dc\uc758 \ud604\uc7ac \uc2dc\uac01\uc744 \ud655\uc778\ud558\uc138\uc694<\/p>\r\n    <\/div>\r\n\r\n    <div id=\"clocks-container\" class=\"w-full max-w-7xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n        <!-- Clock cards will be inserted here by JavaScript -->\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ \uc2dc\uacc4\uc5d0 \ud45c\uc2dc\ud560 \ub3c4\uc2dc \ub370\uc774\ud130 (\ub3c4\uc2dc\uba85, \uad6d\uac00\uba85, \ud0c0\uc784\uc874 ID)\r\n        const CITIES = [\r\n            { name: \"\ub7f0\ub358\", country: \"\uc601\uad6d\", timezone: \"Europe\/London\", id: \"london\", icon: \"\ud83c\uddec\ud83c\udde7\" },\r\n            { name: \"\ud14c\ud5e4\ub780\", country: \"\uc774\ub780\", timezone: \"Asia\/Tehran\", id: \"tehran\", icon: \"\ud83c\uddee\ud83c\uddf7\" },\r\n            { name: \"\uc11c\uc6b8\", country: \"\ub300\ud55c\ubbfc\uad6d\", timezone: \"Asia\/Seoul\", id: \"seoul\", icon: \"\ud83c\uddf0\ud83c\uddf7\" },\r\n            { name: \"\ub274\uc695\", country: \"\ubbf8\uad6d\", timezone: \"America\/New_York\", id: \"newyork\", icon: \"\ud83c\uddfa\ud83c\uddf8\" },\r\n        ];\r\n\r\n        \/**\r\n         * \uac01 \ub3c4\uc2dc\uc758 \uc2dc\uacc4 \uce74\ub4dc\ub97c \uc0dd\uc131\ud558\uc5ec HTML\uc5d0 \uc0bd\uc785\ud569\ub2c8\ub2e4.\r\n         *\/\r\n        function initializeClocks() {\r\n            const container = document.getElementById('clocks-container');\r\n            container.innerHTML = CITIES.map(city => `\r\n                <div id=\"${city.id}\" class=\"clock-card p-6 bg-slate-800 rounded-xl border border-slate-700\">\r\n                    <div class=\"flex items-center space-x-3 mb-4\">\r\n                        <span class=\"text-3xl\">${city.icon}<\/span>\r\n                        <div>\r\n                            <h2 class=\"text-2xl font-semibold text-white\">${city.name}<\/h2>\r\n                            <p class=\"text-sm text-slate-400\">${city.country}<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"time-display text-6xl sm:text-7xl font-light tracking-tight text-blue-400 mb-2 js-time\">\r\n                        --:--:--\r\n                    <\/div>\r\n                    \r\n                    <div class=\"text-sm text-slate-300 mb-1 js-date\">\r\n                        ----\ub144 --\uc6d4 --\uc77c\r\n                    <\/div>\r\n                    <div class=\"text-xs text-slate-500 font-medium js-timezone\">\r\n                        (UTC TBD)\r\n                    <\/div>\r\n                <\/div>\r\n            `).join('');\r\n            \r\n            \/\/ \uc2dc\uacc4\ub97c \ucd08\uae30\ud654\ud558\uace0 \uc5c5\ub370\uc774\ud2b8\ub97c \uc2dc\uc791\ud569\ub2c8\ub2e4.\r\n            updateClocks();\r\n            setInterval(updateClocks, 1000);\r\n        }\r\n\r\n        \/**\r\n         * \ubaa8\ub4e0 \ub3c4\uc2dc\uc758 \ud604\uc7ac \uc2dc\uac01\uc744 \uacc4\uc0b0\ud558\uc5ec \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4.\r\n         *\/\r\n        function updateClocks() {\r\n            const now = new Date();\r\n\r\n            CITIES.forEach(city => {\r\n                const dateOptions = {\r\n                    year: 'numeric',\r\n                    month: 'long',\r\n                    day: 'numeric',\r\n                    weekday: 'long',\r\n                    timeZone: city.timezone,\r\n                    locale: 'ko-KR' \/\/ \ub0a0\uc9dc \ubc0f \uc694\uc77c\uc740 \ud55c\uad6d\uc5b4 \ud615\uc2dd\uc73c\ub85c\r\n                };\r\n\r\n                const timeOptions = {\r\n                    hour: '2-digit',\r\n                    minute: '2-digit',\r\n                    second: '2-digit',\r\n                    hour12: false, \/\/ 24\uc2dc\uac04 \ud615\uc2dd\r\n                    timeZone: city.timezone,\r\n                    locale: 'en-US' \/\/ \uc2dc\uac04 \ud45c\uae30\ub294 \uae54\ub054\ud558\uac8c \uc601\ubb38 \ub85c\ucf00\uc77c \uc0ac\uc6a9 (\uc22b\uc790\ub9cc \ub098\uc634)\r\n                };\r\n\r\n                \/\/ Date\/Weekday (\ub144 \uc6d4 \uc77c \uc694\uc77c)\r\n                const dateStr = new Intl.DateTimeFormat('ko-KR', dateOptions).format(now);\r\n                \r\n                \/\/ Time (\uc2dc\uac04:\ubd84:\ucd08)\r\n                const timeStr = new Intl.DateTimeFormat('en-US', timeOptions).format(now);\r\n\r\n                \/\/ Timezone short name (e.g., KST, BST)\r\n                \/\/ Using 'short' to get the timezone acronym\r\n                const timezoneStr = now.toLocaleTimeString('en-US', { \r\n                    timeZone: city.timezone, \r\n                    timeZoneName: 'short' \r\n                }).split(' ')[2] || ''; \/\/ '12:34:56 PM KST' -> KST\ub9cc \ucd94\ucd9c\r\n\r\n                const clockElement = document.getElementById(city.id);\r\n                if (clockElement) {\r\n                    clockElement.querySelector('.js-time').textContent = timeStr;\r\n                    clockElement.querySelector('.js-date').textContent = dateStr;\r\n                    clockElement.querySelector('.js-timezone').textContent = `(${timezoneStr} | ${city.timezone})`;\r\n                }\r\n            });\r\n        }\r\n\r\n        \/\/ \ud398\uc774\uc9c0 \ub85c\ub4dc \ud6c4 \uc2dc\uacc4 \ucd08\uae30\ud654\r\n        window.onload = initializeClocks;\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-23a6b75 e-con-full e-flex e-con e-parent\" data-id=\"23a6b75\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\uc2e4\uc2dc\uac04 \uc138\uacc4 \uc2dc\uacc4 \uc2e4\uc2dc\uac04 \uc138\uacc4 \uc2dc\uacc4 \ub124 \ub3c4\uc2dc\uc758 \ud604\uc7ac \uc2dc\uac01\uc744 \ud655\uc778\ud558\uc138\uc694<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yarn.kr\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yarn.kr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yarn.kr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yarn.kr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yarn.kr\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":17,"href":"https:\/\/yarn.kr\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/yarn.kr\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/yarn.kr\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}