{"id":1,"date":"2023-07-27T09:52:39","date_gmt":"2023-07-27T00:52:39","guid":{"rendered":"http:\/\/source.mplusss.com\/?p=1"},"modified":"2023-07-27T10:08:52","modified_gmt":"2023-07-27T01:08:52","slug":"%ec%95%88%eb%85%95%ed%95%98%ec%84%b8%ec%9a%94","status":"publish","type":"post","link":"https:\/\/new.mplusss.com\/?p=1","title":{"rendered":"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504, \ud718\uac8c, \ud504\ub9ac\ud130\uc871"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<style>\n    @import url('https:\/\/fonts.googleapis.com\/css?family=Lato:700');\n    body {\n        font-family: 'Lato', sans-serif;\n        padding: 30px;\n        font-size: 16px;\n        line-height: 1.5;\n    }\n    h1 {\n        margin-bottom: 100px;\n        font-weight: 700;\n    }\n    .btn {\n        cursor: pointer;\n    }\n    ul {\n        padding: 0;\n        list-style-type: none;\n        font-size: 0;\n    }\n    ul li {\n        display: inline-block;\n        background-color: #eee;\n        border: 1px solid #bbb;\n        padding: 10px 20px;\n        font-size: 16px;\n        border-top-left-radius: 6px;\n        border-top-right-radius: 6px;\n    }\n    ul li[aria-selected=\"true\"] {\n        background-color: white;\n        border-bottom: 1px solid white;\n    }\n    .wrap-panels {\n        border-top: 1px solid #bbb;\n        margin-top: -1px;\n        margin-bottom: 100px;\n    }\n    div[aria-hidden=\"true\"], .hidden {\n        display: none;\n    }\n    .example-2 .tablist, .example-3 .tablist {\n        font-size: 0;\n    }\n    .example-2 .tablist button, .example-3 .tablist button {\n        background-color: #eee;\n        border: 1px solid #bbb;\n        padding: 10px 20px;\n        font-size: 16px;\n        border-top-left-radius: 6px;\n        border-top-right-radius: 6px;\n    }\n    .example-2 .tablist button[aria-selected=\"true\"], .example-3 .tablist button[aria-selected=\"true\"] {\n        background-color: white;\n        border-bottom: 1px solid whtie;\n    }\n    .example-4 .tablist {\n        font-size: 0;\n    }\n    .example-4 .tablist a.tab {\n        display: inline-block;\n        background-color: #eee;\n        border: 1px solid #bbb;\n        padding: 10px 20px;\n        font-size: 16px;\n        border-top-left-radius: 6px;\n        border-top-right-radius: 6px;\n    }\n    .example-4 .tablist a.tab[aria-selected=\"true\"] {\n        background-color: white;\n        border-bottom: 1px solid whtie;\n    }\n\n<\/style>\n<h1>ARIA Tab Panel Example<\/h1>\n<section class=\"example-1\">\n    <h2>ARIA Tab Panel Example<\/h2>\n    <p>\n        \u2022 \ud0ed\ud0a4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc774\ub3d9\uc2dc \ud0ed\uc758 \ud65c\uc131\ud654 \uc5ec\ubd80\uc640 \uc0c1\uad00\uc5c6\uc774 \ubaa8\ub4e0 \ud0ed\uc5d0 \uc811\uadfc\ud55c\ub2e4. \ub2e8 \ud3ec\ucee4\uc2a4 \uc774\ub3d9\uc2dc\uc5d0 \ud0ed\ud328\ub110 \ud65c\uc131\ud654\ub294 \uc548\ub41c\ub2e4. \ubaa8\ub4e0 \ud0ed\uc744 \uac70\uce5c \uc774\ud6c4 \ud0ed\ud328\ub110\uc5d0 \ud3ec\ucee4\uc2a4\uac00 \uc774\ub3d9\ub418\uba70 \ub2e4\uc74c \ud3ec\ucee4\uc2a4 \uc704\uce58\ub85c \ube60\uc838\ub098\uac04\ub2e4.<br>\n        \u2022 \ud0ed\uc5d0 \ud3ec\ucee4\uc2a4\uac00 \uc788\uc744\ub54c enter\ub97c \ub204\ub974\uba74 \ud328\ub110\uc774 \ud65c\uc131\ud654 \ub41c\ub2e4.<br>\n        \u2022 \uc88c\uc6b0 \ubc29\ud5a5\ud0a4\ub85c \ud0ed\ub9ac\uc2a4\ud2b8\ub97c \uc21c\ud68c\ud560 \uc218 \uc788\ub2e4. \uc774\ub54c \ud0ed\ud328\ub110\uc774 \ud65c\uc131\ud654 \ub418\uc9c0\ub3c4 \uc54a\ub294\ub2e4.<br>\n        \u2022 <a href=\"http:\/\/accessibility.athena-ict.com\/aria\/examples\/tabpanel2.shtml\" title=\"\ud604\uc7ac\ucc3d\uc5d0\uc11c \uc608\uc81c \ucd9c\ucc98 \ub9c1\ud06c \uc5f4\uae30\">\uc608\uc81c \ucd9c\ucc98<\/a>\n    <\/p>\n    <ul class=\"tablist\" role=\"tablist\">\n        <li id=\"tab1\" class=\"btn tab\" aria-controls=\"panel1\" aria-selected=\"true\" role=\"tab\" tabindex=\"0\">\ub529\ud06c\uc871<\/li>\n        <li id=\"tab2\" class=\"btn tab\" aria-controls=\"panel2\" aria-selected=\"false\" role=\"tab\" tabindex=\"0\">\ub178\ub9c8\ub4dc\uc871<\/li>\n        <li id=\"tab3\" class=\"btn tab\" aria-controls=\"panel3\" aria-selected=\"false\" role=\"tab\" tabindex=\"0\">\ud504\ub9ac\ud130\uc871<\/li>\n        <li id=\"tab4\" class=\"btn tab\" aria-controls=\"panel4\" aria-selected=\"false\" role=\"tab\" tabindex=\"0\">\ub2c8\ud2b8\uc871<\/li>\n    <\/ul>\n    <div class=\"wrap-panels\">\n        <div id=\"panel1\" class=\"panel\" aria-labelledby=\"tab1\" aria-hidden=\"false\" role=\"tabpanel\">\n            <h3 tabindex=\"0\">\ub529\ud06c\uc871(Double Income No Kids,\tDINK\u65cf)<\/h3>\n            <p>\uacb0\ud63c\ud574\uc11c \uc815\uc0c1\uc801\uc778 \ubd80\ubd80\uc0dd\ud65c\uc744 \ud558\ub294 \ub9de\ubc8c\uc774 \ubd80\ubd80\ub85c, \uc218\uc785\uc740 \ub450\ubc30(Double Income)\uc774\uc9c0\ub9cc \uc544\uc774\ub294 \uac16\uc9c0 \uc54a\ub294\ub2e4(No Kids)\uace0 \uc8fc\uc7a5\ud558\ub294 \uc0c8\ub85c\uc6b4 \uac00\uc871\ud615\ud0dc\ub97c \ub73b\ud558\ub294 \ub9d0\uc774\ub2e4. Double Income No Kids\uc758 \uc55e\uae00\uc790 DINK\ub97c \ub530\uc11c \ub9cc\ub4e4\uc5c8\ub2e4. \ub4c0\ud06c\uc871, \uc989 \ub9de\ubc8c\uc774 \ubd80\ubd80\uba74\uc11c\ub3c4 \uc544\uc774\ub97c \uac16\ub294 \uc0ac\ub78c(Dual Employed With Kids :DEWK) \ub300\ube44\ub418\ub294 \ub9d0\uc774\ub2e4. \uc774\uc640 \uac19\uc740 \ub529\ud06c\uc871\uc5d0\ub294 \uc790\ubc1c\uc801 \uc720\ud615\uacfc \ube44\uc790\ubc1c\uc801 \uc720\ud615\uc774 \uc788\ub2e4.<\/p>\n        <\/div>\n        <div id=\"panel2\" class=\"panel hidden\" aria-labelledby=\"tab2\" aria-hidden=\"true\" role=\"tabpanel\">\n            <h3 tabindex=\"0\">\ub178\ub9c8\ub4dc\uc871<\/h3>\n            <p>\ub178\ub9c8\ub4dc(nomad)\ub294 &#8216;\uc720\ubaa9\ubbfc, \uc815\ucc29\ud558\uc9c0 \uc54a\uace0 \ub5a0\ub3cc\uc544\ub2e4\ub2c8\ub294 \uc0ac\ub78c&#8217;\uc774\ub780 \uc758\ubbf8\ub85c \uc815\ubcf4\uae30\uc220\uc758 \ubc1c\ub2ec\ub85c \ub4f1\uc7a5\ud55c 21\uc138\uae30\ud615 \uc2e0\uc778\ub958\ub97c \ub73b\ud55c\ub2e4. &#8216;\ub514\uc9c0\ud138 \ub178\ub9c8\ub4dc\uc871&#8217;\uc740 \ud734\ub300\ud3f0, \ub178\ud2b8\ubd81, \ub514\uc9c0\ud138 \uce74\uba54\ub77c \ub4f1 \ucca8\ub2e8 \uae30\uae30\ub97c \ud65c\uc6a9\ud574 \uc2dc\uac04\uacfc \uacf5\uac04\uc5d0 \uad6c\uc560\ubc1b\uc9c0 \uc54a\uace0 \uc778\ud130\ub137\uc5d0 \uc811\uc18d\ud574 \ud544\uc694\ud55c \uc815\ubcf4\ub97c \ucc3e\uace0 \uc30d\ubc29 \ucee4\ubba4\ub2c8\ucf00\uc774\uc158\uc744 \ud1b5\ud574 \uc138\uc0c1\uacfc \uc18c\ud1b5\ud558\ub294 \uc0ac\ub78c\ub4e4\uc744 \ub9d0\ud55c\ub2e4.<\/p>\n        <\/div>\n        <div id=\"panel3\" class=\"panel hidden\" aria-labelledby=\"tab3\" aria-hidden=\"true\" role=\"tabpanel\">\n            <h3 tabindex=\"0\">\ud504\ub9ac\ud130\uc871<\/h3>\n            <p>\ud504\ub9ac\ud130\uc871\uc740 \ud504\ub9ac(free)\uc640 \uc544\ub974\ubc14\uc774\ud2b8(Arbeit)\ub97c \ud569\uc131\ud574 \ub9cc\ub4e0 \uc904\uc784 \ub9d0\uc774\ub2e4. \uc77c\uc815\ud55c \uc9c1\uc5c5 \uc5c6\uc774 \ub3c8\uc774 \ud544\uc694\ud560 \ub54c\ub9cc \ud55c\uc2dc\uc801\uc73c\ub85c \uc784\uc2dc\uc9c1 \uc544\ub974\ubc14\uc774\ud2b8 \uc77c\uc744 \ud558\ub294 \uc0ac\ub78c\ub4e4\uc744 \ub9d0\ud55c\ub2e4.<\/p>\n        <\/div>\n        <div id=\"panel4\" class=\"panel hidden\" aria-labelledby=\"tab4\" aria-hidden=\"true\" role=\"tabpanel\">\n            <h3 tabindex=\"0\">\ub2c8\ud2b8\uc871(Not in Education, Employment or Training ; NEET)<\/h3>\n            <p>\uad50\uc721\uc774\ub098 \ud6c8\ub828\uc744 \ubc1b\uc9c0 \uc54a\uace0 \uc77c\ub3c4 \ud558\uc9c0 \uc54a\uc73c\uba70 \uad6c\uc9c1\ud65c\ub3d9\ub3c4 \ud558\uc9c0 \uc54a\ub294 15~34\uc138\uc758 \uc80a\uc740 \uc0ac\ub78c\uc744 \uc77c\uceeb\ub294\ub2e4. \uc774\ub294 \ucde8\uc5c5\uc5d0 \ub300\ud55c \uc758\uc9c0\uac00 \uc804\ud600 \uc5c6\uae30 \ub54c\ubb38\uc5d0 \uc2e4\uc5c5\uc790\ub098 \uc544\ub974\ubc14\uc774\ud2b8\ub85c \uc0dd\ud65c\ud558\ub294 \ud504\ub9ac\ud130\uc871\uacfc\ub294 \uad6c\ubcc4\ub41c\ub2e4. \uacbd\uae30\uce68\uccb4\uae30\uc778 1990\ub144\ub300 \uc601\uad6d \ub4f1 \uc720\ub7fd\uc5d0\uc11c \ucc98\uc74c \ub098\ud0c0\ub0ac\ub2e4. \ub2c8\ud2b8\uc871\uc740 \uacbd\uae30\uc545\ud654\ub85c \uccad\ub144\uc2e4\uc5c5\uc790\uac00 \ub298\uc5b4\ub0a8\uc5d0 \ub530\ub77c \uc99d\uac00\ud558\ub294 \uacbd\ud5a5\uc744 \ubcf4\uc774\ub294\ub370, \uc774\ub7f0 \ub2c8\ud2b8\uc871\uc758 \uc99d\uac00\ub294 \uacbd\uc81c\uc758 \uc7a0\uc7ac\uc131\uc7a5\ub825\uacfc \uad6d\ub0b4\ucd1d\uc0dd\uc0b0\uc744 \uac10\uc18c\uc2dc\ud0a4\ub294 \uacb0\uacfc\ub97c \uac00\uc838\uc628\ub2e4. \ub2c8\ud2b8\uc871\uc740 \ub2c8\ud2b8 \uc0c1\ud0dc\ub97c \ud0c8\ucd9c\ud558\uc9c0 \ubabb\ud558\uace0 \uadf8\ub300\ub85c \uc9c0\uc18d\ud558\uba74 \u2018\uc740\ub454\ud615 \uc678\ud1a8\uc774\u2019\ub85c \uc804\ub77d\ud560 \uac00\ub2a5\uc131\uc774 \uc788\uc5b4, \uc774\uc5d0 \ub300\ud55c \uc0ac\ud68c\uc801 \ub300\ucc45 \ub9c8\ub828\uc774 \uc2dc\uae09\ud558\ub2e4\ub294 \uc9c0\uc801\uc774 \ub098\uc624\uace0 \uc788\ub2e4.<\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"example-2\">\n    <h2>Example of Tabs with Automatic Activation<\/h2>\n    <p>\n        \u2022 \ud0ed\uc73c\ub85c \uc774\ub3d9\uc2dc \ud65c\uc131\ud654 \ub41c \ud0ed\ub9cc \uc774\ub3d9\ub41c\ub2e4. \uc989 \ud0ed\uc73c\ub85c \ubb38\uc11c\ub97c \uc21c\ucc28\uc801\uc73c\ub85c \uc21c\ud68c\uc2dc \ud65c\uc131\ud654\ub41c \ud0ed, \ud65c\uc131\ud654\ub41c \ud0ed\uc758 \ud328\ub110\uc744 \uac70\uccd0 \ub2e4\uc74c \ud3ec\uc778\ud2b8\ub85c \uc774\ub3d9\ud55c\ub2e4.<\/br>\n        \u2022 \uc88c\uc6b0 \ubc29\ud5a5\ud0a4\ub85c \ud0ed\ub9ac\uc2a4\ud2b8\ub97c \uc21c\ud68c\ud560 \uc218 \uc788\ub2e4.<br>\n        \u2022 \ud0ed\uc5d0 \ud3ec\ucee4\uc2a4\uac00 \uc774\ub3d9\ud558\uba74 \ud0ed\ud328\ub110\uc744 \uc790\ub3d9\uc73c\ub85c \ud65c\uc131\ud654 \ub41c\ub2e4. \uc989 \ud0ed\uc5d0\uc11c enter\uac00 \uc5c6\ub2e4.<br>\n        \u2022 home\ud0a4\ub294 \uccab\ubc88\uc9f8 \ud0ed\uc73c\ub85c, end\ud0a4\ub294 \ub9c8\uc9c0\ub9c9 \ud0ed\uc73c\ub85c \uc774\ub3d9\ud55c\ub2e4.<br>\n        \u2022 <a href=\"https:\/\/www.w3.org\/TR\/wai-aria-practices\/examples\/tabs\/tabs-1\/tabs.html\" title=\"\ud604\uc7ac\ucc3d\uc5d0\uc11c \uc608\uc81c \ucd9c\ucc98 \ub9c1\ud06c \uc5f4\uae30\">\uc608\uc81c \ucd9c\ucc98<\/a><\/p>\n    <div class=\"tablist\" role=\"tablist\">\n        <button type=\"button\" id=\"tab2-1\" class=\"btn tab\" role=\"tab\" aria-selected=\"true\" aria-controls=\"panel2-1\">\uc69c\ub85c<\/button>\n        <button type=\"button\" id=\"tab2-2\" class=\"btn tab\" role=\"tab\" aria-selected=\"false\" aria-controls=\"panel2-2\" tabindex=\"-1\">\ubbf8\ub2c8\uba40 \ub77c\uc774\ud504<\/button>\n        <button type=\"button\" id=\"tab2-3\" class=\"btn tab\" role=\"tab\" aria-selected=\"false\" aria-controls=\"panel2-3\" tabindex=\"-1\">\ud0a8\ud3ec\ud06c \ub77c\uc774\ud504<\/button>\n        <button type=\"button\" id=\"tab2-4\" class=\"btn tab\" role=\"tab\" aria-selected=\"false\" aria-controls=\"panel2-4\" tabindex=\"-1\">\ud718\uac8c<\/button>\n    <\/div>\n    <div class=\"wrap-panels\">\n        <div id=\"panel2-1\" class=\"panel\" role=\"tabpanel\" aria-labelledby=\"tab2-1\" aria-hidden=\"false\" tabindex=\"0\">\n            <h3>YOLO(You Only Live Once)<\/h3>\n            <p>\ud604\uc7ac\ub97c \uc990\uae30\uba70 \uc0ac\ub294 \ud0dc\ub3c4\ub97c \uc77c\uceeb\ub294 \uc2e0\uc870\uc5b4\ub2e4. \u2018You Only Live Once(\ud55c \ubc88\ubfd0\uc778 \uc778\uc0dd)\u2019\uc758 \uc774\ub2c8\uc15c\uc744 \ub530 \ub9cc\ub4e4\uc5c8\ub2e4. \ud754\ud788 \u2018\uc624\ub298\uc744 \uc990\uae30\ub77c\u2019\uace0 \uc778\uc6a9\ub418\ub294 \ub77c\ud2f4\uc5b4\uc758 \u2018\uce74\ub974\ud398\ub514\uc5e0(Carpe Diem)\u2019\uacfc \uc720\uc0ac\ud55c \ud45c\ud604\uc774\ub2e4. \ud55c \ubc88\ubfd0\uc778 \uc778\uc0dd\uc744 \ucda9\ubd84\ud788 \uc990\uae30\uba70 \uc0b4\ub77c\ub294 \uc758\ubbf8\uac00 \uc788\ub2e4.<\/p>\n        <\/div>\n        <div id=\"panel2-2\" class=\"panel hidden\" role=\"tabpanel\" aria-labelledby=\"tab2-2\" aria-hidden=\"true\" tabindex=\"0\">\n            <h3>\ubbf8\ub2c8\uba40 \ub77c\uc774\ud504(Minimal Life)<\/h3>\n            <p>\ud544\uc694\ud55c \uac83 \uc774\uc678\uc5d0\ub294 \uac00\uc9c0\uc9c0 \uc54a\ub294 \uc0dd\ud65c\ubc29\uc2dd\uc774\ub2e4. \uc801\uac8c \uac00\uc9d0\uc73c\ub85c\uc368 \uc5ec\uc720\ub97c \uac00\uc9c0\uace0 \uc0b6\uc758 \uc911\uc694\ud55c \ubd80\ubd84\uc5d0 \uc9d1\uc911\ud558\ub294 \uac83\uc5d0 \uc758\uc758\ub97c \ub454\ub2e4. \ubb3c\uac74\uc744 \uc801\uac8c \uac00\uc9c0\ub294 \uac83\ubfd0 \uc544\ub2c8\ub77c \u2018\ub2e8\uc21c\ud558\uace0 \uc758\ubbf8 \uc788\ub294 \uc0b6\u2019\uc744 \ucd94\uad6c\ud558\ub294 \ubc29\uc2dd\uc774\ub2e4. \uc0dd\ud65c \uc18d\uc5d0\uc11c \ubbf8\ub2c8\uba40 \ub77c\uc774\ud504\ub97c \uc2e4\ucc9c\ud558\ub294 \uc0ac\ub78c\uc740 \u2018\ubbf8\ub2c8\uba40\ub9ac\uc2a4\ud2b8(Minimalist)\u2019\ub77c \ud55c\ub2e4.<\/p>\n        <\/div>\n        <div id=\"panel2-3\" class=\"panel hidden\" role=\"tabpanel\" aria-labelledby=\"tab2-3\" aria-hidden=\"true\" tabindex=\"0\">\n            <h3>\ud0a8\ud3ec\ud06c \ub77c\uc774\ud504(Kinfolk Life)<\/h3>\n            <p>\ud0a8\ud3ec\ud06c \ub77c\uc774\ud504(Kinfolk Life)\ub780 \uc790\uc5f0 \uce5c\ud654\uc801\uc774\uace0 \uc18c\ubc15\ud55c \uc77c\uc0c1\uc744 \uc9c0\ud5a5\ud558\ub294 \uc0dd\ud65c\ubc29\uc2dd\uc744 \ub73b\ud558\ub294 \uc2e0\uc870\uc5b4\ub2e4. \ud0a8\ud3ec\ud06c \ub77c\uc774\ud504\ub97c \ucd94\uad6c\ud558\ub294 \uc0ac\ub78c\ub4e4\uc740 \ud0a8\ud3ec\ud06c\uc871(\u65cf)\uc774\ub77c \ubd80\ub978\ub2e4. \uc774\ub4e4\uc740 \ub9db\uc788\ub294 \uc74c\uc2dd\uc744 \uc774\uc6c3\uacfc \ud568\uaed8 \ub098\ub204\uba70 \ub290\ub9ac\uace0 \uc5ec\uc720 \uc788\ub294 \uc0b6\uc758 \ubc29\uc2dd\uc744 \uace0\uc218\ud55c\ub2e4.<\/p>\n        <\/div>\n        <div id=\"panel2-4\" class=\"panel hidden\" role=\"tabpanel\" aria-labelledby=\"tab2-4\" aria-hidden=\"true\" tabindex=\"0\">\n            <h3>\ud718\uac8c(Hygge)<\/h3>\n            <p>\ud3b8\uc548\ud558\uace0 \uc544\ub291\ud55c \uc0c1\ud0dc\ub97c \ucd94\uad6c\ud558\ub294 \ub77c\uc774\ud504\uc2a4\ud0c0\uc77c\uc744 \ub9d0\ud55c\ub2e4. \ud718\uac8c(Hygge)\ub294 \ub374\ub9c8\ud06c\uc5b4\ub85c \uc6f0\ube59(Wellbeing)\uc744 \uc758\ubbf8\ud558\ub294 \ub178\ub974\uc6e8\uc774\uc5b4\uc5d0\uc11c \uc720\ub798\ud55c \ub2e8\uc5b4\ub85c \uc54c\ub824\uc84c\ub2e4. \uc8fc\ub85c \uba85\uc0ac\uc640 \ub3d9\uc0ac\ub85c \uc4f0\uc774\uba70 \ud615\uc6a9\uc0ac\ub85c &#8216;\ud718\uac94\ub9ac(Hyggeligt)\u2019\ub77c\ub294 \ub2e8\uc5b4\ub3c4 \uc788\ub2e4. \ud718\uac8c\ub97c \ud55c\uad6d\uc5b4\ub85c \uc9c1\uc5ed\ud558\uba74 \u2018\uc548\ub77d\ud568, \ud3b8\uc548\ud568\u2019\uc774\ub780 \ub73b\uc73c\ub85c \uc2e4\uc81c\ub85c\ub294 \uadf8\ubcf4\ub2e4 \ub113\uc740 \uc758\ubbf8\ub85c \uc0ac\uc6a9\ud55c\ub2e4. \ub2e8\uc21c\ud558\uace0 \uc18c\ubc15\ud55c \ub77c\uc774\ud504\uc2a4\ud0c0\uc77c\uc744 \ud1b5\ud574 \ud3b8\uc548\ud568\uacfc \ub9cc\uc871\uac10\uc744 \ub290\ub07c\ub294 \uc0c1\ud669\uc774\ub098 \uac10\uc815\uc744 \ud3ec\uad04\ud55c\ub2e4.<\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"example-3\">\n    <p>\n        \u2022 \ud0ed\uc73c\ub85c \uc774\ub3d9\uc2dc \ud65c\uc131\ud654 \ub41c \ud0ed\ub9cc \uc774\ub3d9\ub41c\ub2e4. \uc989 \ud0ed\uc73c\ub85c \ubb38\uc11c\ub97c \uc21c\ucc28\uc801\uc73c\ub85c \uc21c\ud68c\uc2dc \ud65c\uc131\ud654\ub41c \ud0ed, \ud65c\uc131\ud654\ub41c \ud0ed\uc758 \ud328\ub110\uc744 \uac70\uccd0 \ub2e4\ub978 \ud3ec\uc778\ud2b8\ub85c \uc774\ub3d9\ud55c\ub2e4.<\/br>\n        \u2022 \uc88c\uc6b0 \ubc29\ud5a5\ud0a4\ub85c \ud0ed\ub9ac\uc2a4\ud2b8\ub97c \uc21c\ud68c\ud560 \uc218 \uc788\ub2e4.<br>\n        \u2022 \ud0ed\uc758 \ud3ec\ucee4\uc2a4\uac00 \ub2e4\ub978 \ud0ed\uc73c\ub85c \uc774\ub3d9\ud574\ub3c4(\ud654\uc0b4\ud45c\uc0ac\uc6a9) \ud0ed\ud328\ub110\uc774 \ud65c\uc131\ud654 \ub418\uc9c0 \uc54a\ub294\ub2e4. \ud0ed\uc5d0\uc11c enter, space\ub97c \ub20c\ub7ec \ud0ed\ud328\ub110\uc744 \ud65c\uc131\ud654 \uc2dc\ud0a8\ub2e4.<br>\n        \u2022 \uc88c\uc6b0 \ubc29\ud5a5\ud0a4\ub85c \ud0ed\uc744 \uc774\ub3d9\ud558\uba74 \ud3ec\ucee4\uc2a4\ub294 \ubcf4\uc5ec\uc8fc\ub098 \ud074\ub9ad\uc73c\ub85c \ud328\ub110\uc744 \ud65c\uc131\ud654 \uc2dc\ud0a4\uc9c0 \uc54a\uace0 \uc774\ud0c8\ud558\uba74 \ub2e4\uc2dc \ub3cc\uc544\uc62c\ub54c \ud65c\uc131\ud654\ub418\uc5b4\uc788\ub294 \ud0ed\uc73c\ub85c \ud3ec\ucee4\uc2a4\uac00 \uc774\ub3d9\ud55c\ub2e4.<br>\n        \u2022 home\ud0a4\ub294 \uccab\ubc88\uc9f8 \ud0ed\uc73c\ub85c, end\ud0a4\ub294 \ub9c8\uc9c0\ub9c9 \ud0ed\uc73c\ub85c \uc774\ub3d9\ud55c\ub2e4.<br>\n        <a href=\"https:\/\/www.w3.org\/TR\/wai-aria-practices\/examples\/tabs\/tabs-2\/tabs.html\" title=\"\ud604\uc7ac\ucc3d\uc5d0\uc11c \uc608\uc81c \ucd9c\ucc98 \ub9c1\ud06c \uc5f4\uae30\">\uc608\uc81c \ucd9c\ucc98<\/a><\/p>\n    <ul class=\"tablist\" role=\"tablist\">\n        <button type=\"button\" id=\"tab3-1\" class=\"btn tab\" role=\"tab\" aria-selected=\"true\" aria-controls=\"panel3-1\">\uc2a4\ud14c\uc774\ucf00\uc774\uc158<\/button>\n        <button type=\"button\" id=\"tab3-2\" class=\"btn tab\" role=\"tab\" aria-selected=\"false\" aria-controls=\"panel3-2\" tabindex=\"-1\">\ud799\uc2a4\ud130<\/button>\n        <button type=\"button\" id=\"tab3-3\" class=\"btn tab\" role=\"tab\" aria-selected=\"false\" aria-controls=\"panel3-3\" tabindex=\"-1\">\uc18c\ud655\ud589<\/button>\n        <button type=\"button\" id=\"tab3-4\" class=\"btn tab\" role=\"tab\" aria-selected=\"false\" aria-controls=\"panel3-4\" tabindex=\"-1\">\uc6cc\ub77c\ubc38<\/button>\n    <\/ul>\n    <div class=\"wrap-panels\">\n        <div id=\"panel3-1\" class=\"panel\" role=\"tabpanel\" aria-labelledby=\"tab3-1\" aria-hidden=\"false\" tabindex=\"0\">\n            <h3>\uc2a4\ud14c\uc774\ucf00\uc774\uc158(Staycation)<\/h3>\n            <p>\uc2a4\ud14c\uc774\ucf00\uc774\uc158(Staycation)\uc774\ub780 \uc9d1\uc5d0 \uba38\ubb3c\uba70 \ubcf4\ub0b4\ub294 \ud734\uac00\ub97c \uc77c\uceeb\ub294\ub2e4. \uba38\ubb34\ub978\ub2e4\ub294 \ub73b\uc758 \u2018Stay\u2019\uc640 \ud734\uac00\ub97c \ub73b\ud558\ub294 \u2018Vacation\u2019\ub97c \ud569\uc131\ud574 \ub9cc\ub4e4\uc5c8\ub2e4. \uac19\uc740 \uc758\ubbf8\ub85c \uc9d1(Home)\uacfc \ud734\uac00(Vacance)\ub97c \ud569\uccd0 \ud648\uce89\uc2a4(Homecance)\ub77c \ubd80\ub974\uae30\ub3c4 \ud55c\ub2e4.<\/p>\n        <\/div>\n        <div id=\"panel3-2\" class=\"panel hidden\" role=\"tabpanel\" aria-labelledby=\"tab3-2\" aria-hidden=\"true\" tabindex=\"0\">\n            <h3>\ud799\uc2a4\ud130(hipster)<\/h3>\n            <p>\uc8fc\ub958\ub97c \uac70\ubd80\ud558\uace0 \uc790\uc2e0\ub4e4\ub9cc\uc758 \uace0\uc720\ud55c \ud328\uc158\uacfc \uc74c\uc545, \ubb38\ud654 \ub4f1 \ube44\uc8fc\ub958\ub97c \ucd94\uad6c\ud558\ub294 \uc0ac\ub78c\ub4e4\uc744 \uc77c\uceeb\ub294 \ub9d0\uc774\ub2e4. \uc5b4\uc6d0\uc5d0 \ub300\ud574\uc11c\ub294 \uc544\ud3b8\uc744 \ub73b\ud558\ub294 \uc18d\uc5b4 hop\uc5d0\uc11c \uc9c4\ud654\ud55c hip\uc5d0\uc11c \uc720\ub798\ud588\ub2e4\ub294 \uc124, \u2018\ucd5c\uc2e0 \uc815\ubcf4\uc5d0 \ubc1d\uc740, \ub0b4\ub9c9\uc744 \uc798 \uc544\ub294\u2019\uc774\ub77c\ub294 \ub73b\uc758 hep\uc5d0\uc11c \uc720\ub798\ud588\ub2e4\ub294 \uc124 \ub4f1\uc774 \uc788\ub2e4. 1940\ub144\ub300 \ubbf8\uad6d\uc758 \uc7ac\uc988\uad11\ub4e4\uc744 \uc9c0\uce6d\ud558\ub294 \uc18d\uc5b4\ub85c \uc4f0\uc600\uc73c\uba70 1990\ub144\ub300 \uc774\ud6c4 \uc624\ub298\ub0a0\uacfc \uac19\uc740 \uc758\ubbf8\ub97c \uac16\uac8c \ub418\uc5c8\ub2e4.<\/p>\n        <\/div>\n        <div id=\"panel3-3\" class=\"panel hidden\" role=\"tabpanel\" aria-labelledby=\"tab3-3\" aria-hidden=\"true\" tabindex=\"0\">\n            <h3>\uc18c\ud655\ud589(\u5c0f\u78ba\u5e78)<\/h3>\n            <p>\uc77c\uc0c1 \uc18d\uc5d0\uc11c \uc791\uc9c0\ub9cc \ud655\uc2e4\ud558\uac8c \ub290\ub084 \uc218 \uc788\ub294 \ud589\ubcf5 \ub610\ub294 \uc0b6\uc5d0\uc11c \uadf8\ub7ec\ud55c \ud589\ubcf5\uacfc \uac00\uce58\ub97c \ucd94\uad6c\ud558\ub294 \uacbd\ud5a5\uc744 \ub73b\ud558\ub294 \ub9d0. \ube44\uc2b7\ud55c \ub9e5\ub77d\uc758 \ub2e8\uc5b4\ub85c\ub294 2010\ub144\ub300 \ub4e4\uc5b4\uc11c \ub110\ub9ac \uc0ac\uc6a9\ub418\uc5b4\uc654\ub358 &#8216;\ud790\ub9c1(healing)&#8217;\uacfc 2017\ub144 \ubb34\ub835\ubd80\ud130 \uc0ac\uc6a9\ub418\uae30 \uc2dc\uc791\ud55c \uc77c\uacfc \uc0b6\uc758 \uc870\ud654\ub97c \ub73b\ud558\ub294 &#8216;\uc6cc\ub77c\ubc38(Work and Life Balance)&#8217; \ub4f1\uc774 \uc788\ub2e4.<\/p>\n        <\/div>\n        <div id=\"panel3-4\" class=\"panel hidden\" role=\"tabpanel\" aria-labelledby=\"tab3-4\" aria-hidden=\"true\" tabindex=\"0\">\n            <h3>\uc6cc\ub77c\ubc38(Work &#038; Life Balance)<\/h3>\n            <p>\u2018\uc77c\uacfc \uc0b6\uc758 \uade0\ud615\u2019\uc744 \ub73b\ud558\ub294 \uc601\uc5b4 \u2018\uc6cc\ud06c \uc564 \ub77c\uc774\ud504 \ubc38\ub7f0\uc2a4(Work and Life Balance)\u2019\uc758 \uc904\uc784\ub9d0\uc774\ub2e4. \uac70\ucc3d\ud55c \uc131\uacf5\uc744 \uafc8\uafb8\uae30\ubcf4\ub2e4 \uc77c\uc0c1\uc744 \uc990\uae30\ub824\ub294 \uc80a\uc740 \uc9c1\uc7a5\uc778 \uc138\ub300\uc758 \ub77c\uc774\ud504 \uc2a4\ud0c0\uc77c\uc744 \uc77c\uceeb\ub294\ub2e4. \uc601\ubbf8\uad8c\uc5d0\uc11c 1970\ub144\ub300 \ub4f1\uc7a5\ud55c \uac1c\ub150\uc774\uc9c0\ub9cc, \ud55c\uad6d\uc5d0\uc11c\ub294 2018\ub144\ub300 \ub4e4\uc5b4 \uc0c8\ub86d\uac8c \uc8fc\ubaa9\ubc1b\uace0 \uc788\ub2e4.<\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section class=\"example-4\">\n    <h2>\uc575\ucee4 \ud615\uc2dd \ud0ed<\/h2>\n    <p>\n        \u2022 \ud0ed \ud074\ub9ad \ub610\ub294 \ud0ed\uc5d0\uc11c \uc5d4\ud130 \ud074\ub9ad\uc2dc \uc575\ucee4 \uae30\ub2a5\uc73c\ub85c\uc778\ud574 \ud0ed \ud328\ub110\ub85c \ud3ec\ucee4\uc2a4\uac00 \uc774\ub3d9\ub41c\ub2e4.<br>\n        \u2022 a \ud0dc\uadf8\uc758 \uc0ac\uc6a9\uc73c\ub85c \ud0ed\ud0a4\ub85c \uc774\ub3d9\uc2dc \ubaa8\ub4e0 \ud0ed\uc5d0 \ud3ec\ucee4\uc2a4\uac00 \uc774\ub3d9\ud55c\ub2e4. (li\uc0ac\uc6a9\uc2dc\uc5d0\ub294 \ud0ed\uc778\ub371\uc2a4\ub97c \ub123\uc5b4\uc8fc\uc5b4\uc57c \ud3ec\ucee4\uc2a4\uac00 \uac04\ub2e4.)<br>\n        \u2022 <a href=\"https:\/\/github.com\/lezhin\/accessibility\/blob\/master\/aria\/README.md#tab\" title=\"\ud604\uc7ac\ucc3d\uc5d0\uc11c \uc608\uc81c \ucd9c\ucc98 \ub9c1\ud06c \uc5f4\uae30\">\uc608\uc81c \ucd9c\ucc98<\/a>\n    <\/p>\n    <div class=\"weekly\">\n        <div class=\"tablist\" role=\"tablist\">\n            <a class=\"tab\" id=\"mon-anchor\" href=\"#mon\" role=\"tab\" aria-selected=\"true\">\uc6d4<\/a>\n            <a class=\"tab\" id=\"tue-anchor\" href=\"#tue\" role=\"tab\" aria-selected=\"false\">\ud654<\/a>\n        <\/div>\n        <div class=\"wrap-panels\">\n            <div id=\"mon\" tabindex=\"0\" role=\"tabpanel\" aria-labelledby=\"mon-anchor\">\n                \uc6d4\uc694\uc77c\uc5d4 \ube68\uac04 \uc7a5\ubbf8\ub97c&#8230;\n            <\/div>\n            <div id=\"tue\" class=\"hidden\" tabindex=\"0\" role=\"tabpanel\" aria-labelledby=\"tue-anchor\" aria-hidden=\"true\">\n                \ud654\uc694\uc77c\uc5d4 \ub178\ub780 \uc7a5\ubbf8\ub97c&#8230;\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n<script>\n    'use strict';\n\n    var $tabs = $('.example-1 li[role=\"tab\"]'),\n        $tabpanels = $('.example-1 div[role=\"tabpanel\"]'),\n        controlTabs = function(options) {\n            options.$targetTabs.eq(options.idx).focus();\n            if (options.$targetTabpanels) { \/\/ 3\ubc88 \uc608\uc81c\uc5d0\uc11c\ub294 \ud0ed\uc5d0 \ud3ec\ucee4\uc2a4\ub9cc \ub418\uace0 \uc120\ud0dd\uc2dc \ud65c\uc131\ud654 \ub418\uc5b4\uc57c \ud55c\ub2e4.\n                options.$targetTabs.eq(options.idx)\n                    .attr('aria-selected', 'true')\n                    .siblings()\n                    .attr('aria-selected', 'false');\n            }\n\n            if (options.useTabindex) {\n                options.$targetTabs.eq(options.idx)\n                    .attr('tabindex', '0')\n                    .siblings()\n                    .attr('tabindex', '-1');\n            }\n\n            if (options.$targetTabpanels) {\n                options.$targetTabpanels.eq(options.idx)\n                    .attr('aria-hidden', 'false').removeClass('hidden')\n                    .siblings()\n                    .attr('aria-hidden', 'true').addClass('hidden');\n            }\n        };\n\n    \/\/ example 1\n    $tabs.on('click', function() {\n        controlTabs({\n            idx: $(this).index(),\n            $targetTabs: $tabs,\n            $targetTabpanels: $tabpanels\n        });\n    });\n\n    $tabs.on('keydown', function(e) {\n        if (e.keyCode === 13) { \/\/ enter key\n            $(this).trigger('click');\n        } else if (e.keyCode === 37 || e.keyCode === 39) { \/\/ left, right key\n            var idx = $(this).index();\n            var nowIdx;\n            \/\/var nowIdx = (e.keyCode === 37) ? Math.max(0, idx - 1) : Math.min($tabs.length - 1, idx + 1); \/\/ \ube44\uc21c\ud658\n            if (e.keyCode === 37) { \/\/ \uc21c\ud658\n                nowIdx = (idx - 1) < 0 ? $tabs.length - 1 : idx - 1;\n            } else {\n                nowIdx = (idx + 1) >= $tabs.length ? 0 : idx + 1;\n            }\n            controlTabs({\n                idx: nowIdx,\n                $targetTabs: $tabs,\n                $targetTabpanels: $tabpanels\n            });\n        }\n    });\n\n    \/\/ example 2\n    var $tabs2 = $('.example-2 button[role=\"tab\"]'),\n        $tabpanels2 = $('.example-2 div[role=\"tabpanel\"]');\n\n    $tabs2.on('click', function() {\n        controlTabs({\n            idx: $(this).index(),\n            $targetTabs: $tabs2,\n            $targetTabpanels: $tabpanels2,\n            useTabindex: true\n        });\n    });\n\n    $tabs2.on('keydown', function(e) {\n        if (e.keyCode === 37 || e.keyCode === 39) { \/\/ left, right key\n            var idx = $(this).index();\n            var nowIdx;\n            \/\/var nowIdx = (e.keyCode === 37) ? Math.max(0, idx - 1) : Math.min($tabs.length - 1, idx + 1); \/\/ \ube44\uc21c\ud658\n            if (e.keyCode === 37) { \/\/ \uc21c\ud658\n                nowIdx = (idx - 1) < 0 ? $tabs2.length - 1 : idx - 1;\n            } else {\n                nowIdx = (idx + 1) >= $tabs2.length ? 0 : idx + 1;\n            }\n            controlTabs({\n                idx: nowIdx,\n                $targetTabs: $tabs2,\n                $targetTabpanels: $tabpanels2,\n                useTabindex: true\n            });\n        } else if (e.keyCode === 36) { \/\/ home\n            e.preventDefault();\n            controlTabs({\n                idx: 0,\n                $targetTabs: $tabs2,\n                $targetTabpanels: $tabpanels2,\n                useTabindex: true\n            });\n        } else if (e.keyCode === 35) { \/\/ end\n            e.preventDefault();\n            controlTabs({\n                idx: $tabs2.length - 1,\n                $targetTabs: $tabs2,\n                $targetTabpanels: $tabpanels2,\n                useTabindex: true\n            });\n        }\n    });\n\n    \/\/ example 3\n    var $tabs3 = $('.example-3 button[role=\"tab\"]'),\n        $tabpanels3 = $('.example-3 div[role=\"tabpanel\"]');\n\n    $tabs3.on('click', function() {\n        controlTabs({\n            idx: $(this).index(),\n            $targetTabs: $tabs3,\n            $targetTabpanels: $tabpanels3,\n            useTabindex: true\n        });\n    });\n\n    $tabs3.on('keydown', function(e) {\n        if (e.keyCode === 32) { \/\/ space key. enter\ud0a4\ub294 \ud0a4 \uc774\ubca4\ud2b8 \ub4f1\ub85d \uc548\ud574\ub3c4 \ud074\ub9ad\uc758 \uc5ed\ud560\uc744 \ud55c\ub2e4.\n            $(this).trigger('click');\n        }if (e.keyCode === 37 || e.keyCode === 39) { \/\/ left, right key\n            var idx = $(this).index();\n            var nowIdx;\n            \/\/var nowIdx = (e.keyCode === 37) ? Math.max(0, idx - 1) : Math.min($tabs.length - 1, idx + 1); \/\/ \ube44\uc21c\ud658\n            if (e.keyCode === 37) { \/\/ \uc21c\ud658\n                nowIdx = (idx - 1) < 0 ? $tabs3.length - 1 : idx - 1;\n            } else {\n                nowIdx = (idx + 1) >= $tabs3.length ? 0 : idx + 1;\n            }\n            controlTabs({\n                idx: nowIdx,\n                $targetTabs: $tabs3\n            });\n        } else if (e.keyCode === 36) { \/\/ home\n            e.preventDefault();\n            controlTabs({\n                idx: 0,\n                $targetTabs: $tabs3\n            });\n        } else if (e.keyCode === 35) { \/\/ end\n            e.preventDefault();\n            controlTabs({\n                idx: $tabs3.length - 1,\n                $targetTabs: $tabs3\n            });\n        }\n    });\n\n    \/\/ example 4\n    var $tabs4 = $('.example-4 a[role=\"tab\"]'),\n        $tabpanels4 = $('.example-4 div[role=\"tabpanel\"]');\n\n    $tabs4.on('click', function() {\n        controlTabs({\n            idx: $(this).index(),\n            $targetTabs: $tabs4,\n            $targetTabpanels: $tabpanels4\n        });\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>ARIA Tab Panel Example ARIA Tab Panel Example \u2022 \ud0ed\ud0a4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc774\ub3d9\uc2dc \ud0ed\uc758 \ud65c\uc131\ud654 \uc5ec\ubd80\uc640 \uc0c1\uad00\uc5c6\uc774 \ubaa8\ub4e0 \ud0ed\uc5d0 \uc811\uadfc\ud55c\ub2e4. \ub2e8 \ud3ec\ucee4\uc2a4 \uc774\ub3d9\uc2dc\uc5d0 \ud0ed\ud328\ub110 \ud65c\uc131\ud654\ub294 \uc548\ub41c\ub2e4. \ubaa8\ub4e0 \ud0ed\uc744 \uac70\uce5c \uc774\ud6c4 \ud0ed\ud328\ub110\uc5d0 \ud3ec\ucee4\uc2a4\uac00 \uc774\ub3d9\ub418\uba70 \ub2e4\uc74c \ud3ec\ucee4\uc2a4 \uc704\uce58\ub85c \ube60\uc838\ub098\uac04\ub2e4. \u2022 \ud0ed\uc5d0 \ud3ec\ucee4\uc2a4\uac00 \uc788\uc744\ub54c enter\ub97c \ub204\ub974\uba74 \ud328\ub110\uc774 \ud65c\uc131\ud654 \ub41c\ub2e4. \u2022 \uc88c\uc6b0 \ubc29\ud5a5\ud0a4\ub85c \ud0ed\ub9ac\uc2a4\ud2b8\ub97c \uc21c\ud68c\ud560 \uc218 \uc788\ub2e4. \uc774\ub54c \ud0ed\ud328\ub110\uc774 \ud65c\uc131\ud654 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-1"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504, \ud718\uac8c, \ud504\ub9ac\ud130\uc871 - \ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/new.mplusss.com\/?p=1\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504, \ud718\uac8c, \ud504\ub9ac\ud130\uc871 - \ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871\" \/>\n<meta property=\"og:description\" content=\"ARIA Tab Panel Example ARIA Tab Panel Example \u2022 \ud0ed\ud0a4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc774\ub3d9\uc2dc \ud0ed\uc758 \ud65c\uc131\ud654 \uc5ec\ubd80\uc640 \uc0c1\uad00\uc5c6\uc774 \ubaa8\ub4e0 \ud0ed\uc5d0 \uc811\uadfc\ud55c\ub2e4. \ub2e8 \ud3ec\ucee4\uc2a4 \uc774\ub3d9\uc2dc\uc5d0 \ud0ed\ud328\ub110 \ud65c\uc131\ud654\ub294 \uc548\ub41c\ub2e4. \ubaa8\ub4e0 \ud0ed\uc744 \uac70\uce5c \uc774\ud6c4 \ud0ed\ud328\ub110\uc5d0 \ud3ec\ucee4\uc2a4\uac00 \uc774\ub3d9\ub418\uba70 \ub2e4\uc74c \ud3ec\ucee4\uc2a4 \uc704\uce58\ub85c \ube60\uc838\ub098\uac04\ub2e4. \u2022 \ud0ed\uc5d0 \ud3ec\ucee4\uc2a4\uac00 \uc788\uc744\ub54c enter\ub97c \ub204\ub974\uba74 \ud328\ub110\uc774 \ud65c\uc131\ud654 \ub41c\ub2e4. \u2022 \uc88c\uc6b0 \ubc29\ud5a5\ud0a4\ub85c \ud0ed\ub9ac\uc2a4\ud2b8\ub97c \uc21c\ud68c\ud560 \uc218 \uc788\ub2e4. \uc774\ub54c \ud0ed\ud328\ub110\uc774 \ud65c\uc131\ud654 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/new.mplusss.com\/?p=1\" \/>\n<meta property=\"og:site_name\" content=\"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-27T00:52:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T01:08:52+00:00\" \/>\n<meta name=\"author\" content=\"jayce\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jayce\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/new.mplusss.com\/?p=1#article\",\"isPartOf\":{\"@id\":\"https:\/\/new.mplusss.com\/?p=1\"},\"author\":{\"name\":\"jayce\",\"@id\":\"https:\/\/new.mplusss.com\/#\/schema\/person\/c288fae0ae4acdc583e62c1cc813df2e\"},\"headline\":\"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504, \ud718\uac8c, \ud504\ub9ac\ud130\uc871\",\"datePublished\":\"2023-07-27T00:52:39+00:00\",\"dateModified\":\"2023-07-27T01:08:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/new.mplusss.com\/?p=1\"},\"wordCount\":107,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/new.mplusss.com\/#organization\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/new.mplusss.com\/?p=1#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/new.mplusss.com\/?p=1\",\"url\":\"https:\/\/new.mplusss.com\/?p=1\",\"name\":\"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504, \ud718\uac8c, \ud504\ub9ac\ud130\uc871 - \ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871\",\"isPartOf\":{\"@id\":\"https:\/\/new.mplusss.com\/#website\"},\"datePublished\":\"2023-07-27T00:52:39+00:00\",\"dateModified\":\"2023-07-27T01:08:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/new.mplusss.com\/?p=1#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/new.mplusss.com\/?p=1\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/new.mplusss.com\/?p=1#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/new.mplusss.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504, \ud718\uac8c, \ud504\ub9ac\ud130\uc871\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/new.mplusss.com\/#website\",\"url\":\"https:\/\/new.mplusss.com\/\",\"name\":\"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/new.mplusss.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/new.mplusss.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/new.mplusss.com\/#organization\",\"name\":\"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871\",\"url\":\"https:\/\/new.mplusss.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/new.mplusss.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/origin.mplusss.com\/wp-content\/uploads\/2023\/07\/logo.png\",\"contentUrl\":\"https:\/\/origin.mplusss.com\/wp-content\/uploads\/2023\/07\/logo.png\",\"width\":1079,\"height\":1079,\"caption\":\"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871\"},\"image\":{\"@id\":\"https:\/\/new.mplusss.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/blog.naver.com\/dbswo9212\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/new.mplusss.com\/#\/schema\/person\/c288fae0ae4acdc583e62c1cc813df2e\",\"name\":\"jayce\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/new.mplusss.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/38a462feea949ac0215023ad426ff56d1582346e455206f9c7378dd22d30bba5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/38a462feea949ac0215023ad426ff56d1582346e455206f9c7378dd22d30bba5?s=96&d=mm&r=g\",\"caption\":\"jayce\"},\"sameAs\":[\"http:\/\/source.mplusss.com\"],\"url\":\"https:\/\/new.mplusss.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504, \ud718\uac8c, \ud504\ub9ac\ud130\uc871 - \ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/new.mplusss.com\/?p=1","og_locale":"ko_KR","og_type":"article","og_title":"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504, \ud718\uac8c, \ud504\ub9ac\ud130\uc871 - \ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871","og_description":"ARIA Tab Panel Example ARIA Tab Panel Example \u2022 \ud0ed\ud0a4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc774\ub3d9\uc2dc \ud0ed\uc758 \ud65c\uc131\ud654 \uc5ec\ubd80\uc640 \uc0c1\uad00\uc5c6\uc774 \ubaa8\ub4e0 \ud0ed\uc5d0 \uc811\uadfc\ud55c\ub2e4. \ub2e8 \ud3ec\ucee4\uc2a4 \uc774\ub3d9\uc2dc\uc5d0 \ud0ed\ud328\ub110 \ud65c\uc131\ud654\ub294 \uc548\ub41c\ub2e4. \ubaa8\ub4e0 \ud0ed\uc744 \uac70\uce5c \uc774\ud6c4 \ud0ed\ud328\ub110\uc5d0 \ud3ec\ucee4\uc2a4\uac00 \uc774\ub3d9\ub418\uba70 \ub2e4\uc74c \ud3ec\ucee4\uc2a4 \uc704\uce58\ub85c \ube60\uc838\ub098\uac04\ub2e4. \u2022 \ud0ed\uc5d0 \ud3ec\ucee4\uc2a4\uac00 \uc788\uc744\ub54c enter\ub97c \ub204\ub974\uba74 \ud328\ub110\uc774 \ud65c\uc131\ud654 \ub41c\ub2e4. \u2022 \uc88c\uc6b0 \ubc29\ud5a5\ud0a4\ub85c \ud0ed\ub9ac\uc2a4\ud2b8\ub97c \uc21c\ud68c\ud560 \uc218 \uc788\ub2e4. \uc774\ub54c \ud0ed\ud328\ub110\uc774 \ud65c\uc131\ud654 [&hellip;]","og_url":"https:\/\/new.mplusss.com\/?p=1","og_site_name":"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871","article_published_time":"2023-07-27T00:52:39+00:00","article_modified_time":"2023-07-27T01:08:52+00:00","author":"jayce","twitter_card":"summary_large_image","twitter_misc":{"Written by":"jayce","Est. reading time":"1\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/new.mplusss.com\/?p=1#article","isPartOf":{"@id":"https:\/\/new.mplusss.com\/?p=1"},"author":{"name":"jayce","@id":"https:\/\/new.mplusss.com\/#\/schema\/person\/c288fae0ae4acdc583e62c1cc813df2e"},"headline":"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504, \ud718\uac8c, \ud504\ub9ac\ud130\uc871","datePublished":"2023-07-27T00:52:39+00:00","dateModified":"2023-07-27T01:08:52+00:00","mainEntityOfPage":{"@id":"https:\/\/new.mplusss.com\/?p=1"},"wordCount":107,"commentCount":1,"publisher":{"@id":"https:\/\/new.mplusss.com\/#organization"},"inLanguage":"ko-KR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/new.mplusss.com\/?p=1#respond"]}]},{"@type":"WebPage","@id":"https:\/\/new.mplusss.com\/?p=1","url":"https:\/\/new.mplusss.com\/?p=1","name":"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504, \ud718\uac8c, \ud504\ub9ac\ud130\uc871 - \ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871","isPartOf":{"@id":"https:\/\/new.mplusss.com\/#website"},"datePublished":"2023-07-27T00:52:39+00:00","dateModified":"2023-07-27T01:08:52+00:00","breadcrumb":{"@id":"https:\/\/new.mplusss.com\/?p=1#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/new.mplusss.com\/?p=1"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/new.mplusss.com\/?p=1#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/new.mplusss.com\/"},{"@type":"ListItem","position":2,"name":"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504, \ud718\uac8c, \ud504\ub9ac\ud130\uc871"}]},{"@type":"WebSite","@id":"https:\/\/new.mplusss.com\/#website","url":"https:\/\/new.mplusss.com\/","name":"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871","description":"","publisher":{"@id":"https:\/\/new.mplusss.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/new.mplusss.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/new.mplusss.com\/#organization","name":"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871","url":"https:\/\/new.mplusss.com\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/new.mplusss.com\/#\/schema\/logo\/image\/","url":"https:\/\/origin.mplusss.com\/wp-content\/uploads\/2023\/07\/logo.png","contentUrl":"https:\/\/origin.mplusss.com\/wp-content\/uploads\/2023\/07\/logo.png","width":1079,"height":1079,"caption":"\ud0a8\ud3ec\ud06c\ub77c\uc774\ud504 \ud718\uac8c \ud504\ub9ac\ud130\uc871"},"image":{"@id":"https:\/\/new.mplusss.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/blog.naver.com\/dbswo9212"]},{"@type":"Person","@id":"https:\/\/new.mplusss.com\/#\/schema\/person\/c288fae0ae4acdc583e62c1cc813df2e","name":"jayce","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/new.mplusss.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/38a462feea949ac0215023ad426ff56d1582346e455206f9c7378dd22d30bba5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/38a462feea949ac0215023ad426ff56d1582346e455206f9c7378dd22d30bba5?s=96&d=mm&r=g","caption":"jayce"},"sameAs":["http:\/\/source.mplusss.com"],"url":"https:\/\/new.mplusss.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/new.mplusss.com\/index.php?rest_route=\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/new.mplusss.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/new.mplusss.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/new.mplusss.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/new.mplusss.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1"}],"version-history":[{"count":4,"href":"https:\/\/new.mplusss.com\/index.php?rest_route=\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/new.mplusss.com\/index.php?rest_route=\/wp\/v2\/posts\/1\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/new.mplusss.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/new.mplusss.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/new.mplusss.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}