{"id":11850,"date":"2022-01-08T08:23:24","date_gmt":"2022-01-07T23:23:24","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=11850"},"modified":"2022-01-12T08:10:33","modified_gmt":"2022-01-11T23:10:33","slug":"gwc-ui-library-radiogroup","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=11850","title":{"rendered":"#GWC UI Library : RadioGroup"},"content":{"rendered":"

\uc6f9 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 GWC\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 RadioGroup \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud55c \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n

\uba3c\uc800 DOM \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

\r\n
\r\n    <\/gwc-label>\r\n    
\r\n        <\/gwc-label>\r\n        \r\n            \r\n                \uc778\uac04\uc740<\/item>\r\n                \ub9d0\uc774 \uc544\ub2cc<\/item>\r\n                \ud589\uc704\ub85c<\/item>\r\n                \uc815\uc758\ub41c\ub2e4.<\/item>\r\n            <\/items>\r\n        <\/gwc-radiogroup>\r\n    <\/div>\r\n    
\r\n        <\/gwc-label>\r\n        \r\n            \r\n                HUMAN<\/item>\r\n                IS DEFINED<\/item>\r\n                BY NOT WORD<\/item>\r\n                BUT ACT.<\/item>\r\n            <\/items>\r\n        <\/gwc-radiogroup>\r\n    <\/div>            \r\n    \r\n<\/div>\r\n<\/pre>\n
\uadf8\ub9ac\uace0 CSS \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694.<\/p>\n
\r\n.center {\r\n    display: flex;\r\n    width: 100%;\r\n    height: 100%;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n    gap: 3em;\r\n}\r\n<\/pre>\n
js \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nwindow.onload = () => {\r\n    const onChange = (event) => {\r\n        const radioGroup = event.target;\r\n        label.content = `\r\n             ${radioGroup.id}<\/span>\uc758 \uc120\ud0dd\uc740 \r\n             \"${radioGroup.selectedTitle}<\/span>\"\uc785\ub2c8\ub2e4.\r\n        `;\r\n     };\r\n\r\n    radiogroup1.addEventListener(\"change\", onChange);\r\n    radiogroup2.addEventListener(\"change\", onChange);\r\n\r\n    button.addEventListener(\"click\", () => {\r\n        const txtRadioGroup1 = `${radiogroup1.selectedTitle}(${radiogroup1.selectedIndex})`;\r\n        const txtRadioGroup2 = `${radiogroup2.selectedTitle}(${radiogroup2.selectedIndex})`;\r\n\r\n        gwcMessage(`\r\n            radiogroup1: ${txtRadioGroup1}
\r\n            radiogroup2: ${txtRadioGroup2}\r\n        `);\r\n    });\r\n};\r\n<\/pre>\n
\uc2e4\ud589 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n