Styled Time Wheel Picker<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #f4f4f4; \/* \uae54\ub054\ud55c \ubc30\uacbd *\/\n }\n\n .picker-container {\n position: relative;\n width: 160px;\n height: 200px;\n background-color: #fff; \/* \uce74\ub4dc \ubc30\uacbd *\/\n border-radius: 10px; \/* \ub465\uadfc \ubaa8\uc11c\ub9ac *\/\n box-shadow: 0 5px 20px rgba(0,0,0,0.2); \/* \uadf8\ub9bc\uc790 *\/\n overflow: hidden;\n }\n\n .time-wheel {\n height: 100%;\n overflow-y: scroll;\n scroll-snap-type: y mandatory;\n padding-top: 80px;\n padding-bottom: 80px;\n }\n\n .time-wheel div {\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n color: #333; \/* \uba54\uc2dc\uc9c0 \uc0c9\uc0c1 \ucc38\uc870 *\/\n scroll-snap-align: center;\n background-color: #f1f1f1; \/* \uba54\uc2dc\uc9c0 \ubc15\uc2a4 \ubc30\uacbd\uc0c9 *\/\n margin: 4px 10px;\n border-radius: 10px; \/* \uba54\uc2dc\uc9c0 \ubc15\uc2a4 \ub465\uadfc \ubaa8\uc11c\ub9ac *\/\n }\n\n .time-wheel div.selected {\n background-color: #333; \/* \uc120\ud0dd\ub41c \uc0c9\uc0c1 *\/\n color: #fff;\n }\n\n .highlight {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n width: 100%;\n height: 40px;\n border-top: 2px solid #007BFF;\n border-bottom: 2px solid #007BFF;\n pointer-events: none;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"picker-container\">\n <div class=\"time-wheel\" id=\"timeWheel\"><\/div>\n <div class=\"highlight\"><\/div>\n <\/div>\n\n <script>\n const timeWheel = document.getElementById(\"timeWheel\");\n\n \/\/ 12\uc2dc\uac04\uc81c, 15\ubd84 \ub2e8\uc704, AM\/PM\n const times = [];\n [\"AM\",\"PM\"].forEach(ampm => {\n for (let h = 1; h <= 12; h++) {\n for (let m = 0; m < 60; m += 15) {\n const hour = h.toString().padStart(2,\"0\");\n const minute = m.toString().padStart(2,\"0\");\n times.push(`${hour}:${minute} ${ampm}`);\n }\n }\n });\n\n times.forEach(t => {\n const div = document.createElement(\"div\");\n div.textContent = t;\n timeWheel.appendChild(div);\n });\n\n \/\/ \uc2a4\ud06c\ub864 \uc704\uce58\uc5d0 \ub530\ub77c \uc120\ud0dd \ud45c\uc2dc\n const items = timeWheel.querySelectorAll(\"div\");\n timeWheel.addEventListener(\"scroll\", () => {\n let center = timeWheel.scrollTop + timeWheel.clientHeight \/ 2;\n items.forEach(item => item.classList.remove(\"selected\"));\n items.forEach(item => {\n const itemTop = item.offsetTop;\n const itemBottom = item.offsetTop + item.offsetHeight;\n if (center >= itemTop && center <= itemBottom) {\n item.classList.add(\"selected\");\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Styled Time Wheel Picker<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-2038","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2038","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/comments?post=2038"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2038\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2038,"date":"2025-08-10T17:44:34","date_gmt":"2025-08-10T17:44:34","guid":{"rendered":"https:\/\/visionnetworkcamp.org\/?page_id=2038"},"modified":"2025-08-23T15:57:42","modified_gmt":"2025-08-23T15:57:42","slug":"%ec%84%b1%ec%b0%ac%ec%98%88%ec%8b%9d","status":"publish","type":"page","link":"https:\/\/visionnetworkcamp.org\/ko\/%ec%84%b1%ec%b0%ac%ec%98%88%ec%8b%9d\/","title":{"rendered":"css js"},"content":{"rendered":"\n\n\n \n Styled Time Wheel Picker<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #f4f4f4; \/* \uae54\ub054\ud55c \ubc30\uacbd *\/\n }\n\n .picker-container {\n position: relative;\n width: 160px;\n height: 200px;\n background-color: #fff; \/* \uce74\ub4dc \ubc30\uacbd *\/\n border-radius: 10px; \/* \ub465\uadfc \ubaa8\uc11c\ub9ac *\/\n box-shadow: 0 5px 20px rgba(0,0,0,0.2); \/* \uadf8\ub9bc\uc790 *\/\n overflow: hidden;\n }\n\n .time-wheel {\n height: 100%;\n overflow-y: scroll;\n scroll-snap-type: y mandatory;\n padding-top: 80px;\n padding-bottom: 80px;\n }\n\n .time-wheel div {\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n color: #333; \/* \uba54\uc2dc\uc9c0 \uc0c9\uc0c1 \ucc38\uc870 *\/\n scroll-snap-align: center;\n background-color: #f1f1f1; \/* \uba54\uc2dc\uc9c0 \ubc15\uc2a4 \ubc30\uacbd\uc0c9 *\/\n margin: 4px 10px;\n border-radius: 10px; \/* \uba54\uc2dc\uc9c0 \ubc15\uc2a4 \ub465\uadfc \ubaa8\uc11c\ub9ac *\/\n }\n\n .time-wheel div.selected {\n background-color: #333; \/* \uc120\ud0dd\ub41c \uc0c9\uc0c1 *\/\n color: #fff;\n }\n\n .highlight {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n width: 100%;\n height: 40px;\n border-top: 2px solid #007BFF;\n border-bottom: 2px solid #007BFF;\n pointer-events: none;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"picker-container\">\n <div class=\"time-wheel\" id=\"timeWheel\"><\/div>\n <div class=\"highlight\"><\/div>\n <\/div>\n\n <script>\n const timeWheel = document.getElementById(\"timeWheel\");\n\n \/\/ 12\uc2dc\uac04\uc81c, 15\ubd84 \ub2e8\uc704, AM\/PM\n const times = [];\n [\"AM\",\"PM\"].forEach(ampm => {\n for (let h = 1; h <= 12; h++) {\n for (let m = 0; m < 60; m += 15) {\n const hour = h.toString().padStart(2,\"0\");\n const minute = m.toString().padStart(2,\"0\");\n times.push(`${hour}:${minute} ${ampm}`);\n }\n }\n });\n\n times.forEach(t => {\n const div = document.createElement(\"div\");\n div.textContent = t;\n timeWheel.appendChild(div);\n });\n\n \/\/ \uc2a4\ud06c\ub864 \uc704\uce58\uc5d0 \ub530\ub77c \uc120\ud0dd \ud45c\uc2dc\n const items = timeWheel.querySelectorAll(\"div\");\n timeWheel.addEventListener(\"scroll\", () => {\n let center = timeWheel.scrollTop + timeWheel.clientHeight \/ 2;\n items.forEach(item => item.classList.remove(\"selected\"));\n items.forEach(item => {\n const itemTop = item.offsetTop;\n const itemBottom = item.offsetTop + item.offsetHeight;\n if (center >= itemTop && center <= itemBottom) {\n item.classList.add(\"selected\");\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Styled Time Wheel Picker<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-2038","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2038","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/comments?post=2038"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2038\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}