{"id":8718,"date":"2025-07-31T12:22:38","date_gmt":"2025-07-31T03:22:38","guid":{"rendered":"https:\/\/hasu0707.duckdns.org\/blog\/?p=8718"},"modified":"2025-07-31T12:22:41","modified_gmt":"2025-07-31T03:22:41","slug":"div-%ed%85%8c%ec%9d%b4%eb%b8%94-%ec%98%88%ec%a0%9c","status":"publish","type":"post","link":"https:\/\/hasu0707.duckdns.org\/blog\/?p=8718","title":{"rendered":"DIV \ud14c\uc774\ube14 \uc608\uc81c"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Div\ub97c \uc774\uc6a9\ud55c \ubaa8\ub358 \ud14c\uc774\ube14<\/title>\n    <style>\n        * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            line-height: 1.6;\n            color: #333;\n            background-color: #f5f7fa;\n            padding: 20px;\n        }\n\n        .table-container {\n            max-width: 1200px;\n            margin: 30px auto;\n        }\n\n        h1 {\n            text-align: center;\n            margin-bottom: 30px;\n            color: #2c3e50;\n        }\n\n        \/* \ud14c\uc774\ube14 \uc2a4\ud0c0\uc77c\ub9c1 *\/\n        .div-table {\n            width: 100%;\n            background-color: #fff;\n            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n            border-radius: 10px;\n            overflow: hidden;\n        }\n\n        .div-table-header {\n            background-color: #4a6fa5;\n            color: white;\n            font-weight: bold;\n        }\n\n        .div-table-body {\n            background-color: white;\n        }\n\n        .div-table-row {\n            display: flex;\n            border-bottom: 1px solid #e0e0e0;\n            transition: all 0.3s ease;\n        }\n\n        .div-table-row:hover {\n            background-color: #f5f7fa;\n        }\n\n        .div-table-col {\n            flex: 1;\n            padding: 15px;\n            text-align: left;\n            display: flex;\n            align-items: center;\n        }\n\n        \/* \ud5e4\ub354 \uc2a4\ud0c0\uc77c *\/\n        .div-table-header .div-table-col {\n            padding: 18px 15px;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            font-size: 0.9em;\n        }\n\n        \/* \uc0c1\ud0dc \ud45c\uc2dc \uc2a4\ud0c0\uc77c *\/\n        .status {\n            padding: 5px 12px;\n            border-radius: 20px;\n            font-size: 0.8em;\n            font-weight: 500;\n            text-align: center;\n        }\n\n        .status.active {\n            background-color: #e3f7e8;\n            color: #2e7d32;\n        }\n\n        .status.inactive {\n            background-color: #ffebee;\n            color: #c62828;\n        }\n\n        .status.pending {\n            background-color: #fff8e1;\n            color: #ff8f00;\n        }\n\n        \/* \ubc18\uc751\ud615 \ub514\uc790\uc778 *\/\n        @media screen and (max-width: 768px) {\n            .div-table-row {\n                flex-direction: column;\n                border-bottom: 2px solid #ddd;\n                padding: 10px 0;\n            }\n\n            .div-table-col {\n                padding: 8px 15px;\n                border-bottom: 1px solid #eee;\n                justify-content: space-between;\n            }\n\n            .div-table-col:before {\n                content: attr(data-label);\n                font-weight: bold;\n                color: #555;\n                margin-right: 10px;\n            }\n\n            .div-table-header {\n                display: none;\n            }\n\n            .status {\n                margin-left: auto;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"table-container\">\n        <h1>\uc0ac\uc6d0 \uc815\ubcf4 \ud14c\uc774\ube14<\/h1>\n\n        <div class=\"div-table\">\n            <!-- \ud14c\uc774\ube14 \ud5e4\ub354 -->\n            <div class=\"div-table-header\">\n                <div class=\"div-table-row\">\n                    <div class=\"div-table-col\">\uc774\ub984<\/div>\n                    <div class=\"div-table-col\">\uc9c1\ucc45<\/div>\n                    <div class=\"div-table-col\">\ubd80\uc11c<\/div>\n                    <div class=\"div-table-col\">\uc774\uba54\uc77c<\/div>\n                    <div class=\"div-table-col\">\uc5f0\ub77d\ucc98<\/div>\n                    <div class=\"div-table-col\">\uc0c1\ud0dc<\/div>\n                <\/div>\n            <\/div>\n\n            <!-- \ud14c\uc774\ube14 \ubc14\ub514 -->\n            <div class=\"div-table-body\">\n                <!-- \ud589 1 -->\n                <div class=\"div-table-row\">\n                    <div class=\"div-table-col\" data-label=\"\uc774\ub984\">\n                        <div class=\"avatar\">\ud83d\udc68\u200d\ud83d\udcbc<\/div>\n                        <div>\uae40\ucca0\uc218<\/div>\n                    <\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc9c1\ucc45\">\uacfc\uc7a5<\/div>\n                    <div class=\"div-table-col\" data-label=\"\ubd80\uc11c\">\ub9c8\ucf00\ud305\ud300<\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc774\uba54\uc77c\">chulsoo.kim@company.com<\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc5f0\ub77d\ucc98\">010-1234-5678<\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc0c1\ud0dc\"><span class=\"status active\">\ud65c\uc131<\/span><\/div>\n                <\/div>\n\n                <!-- \ud589 2 -->\n                <div class=\"div-table-row\">\n                    <div class=\"div-table-col\" data-label=\"\uc774\ub984\">\n                        <div class=\"avatar\">\ud83d\udc69\u200d\ud83d\udcbc<\/div>\n                        <div>\uc774\uc601\ud76c<\/div>\n                    <\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc9c1\ucc45\">\ub300\ub9ac<\/div>\n                    <div class=\"div-table-col\" data-label=\"\ubd80\uc11c\">\uac1c\ubc1c\ud300<\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc774\uba54\uc77c\">younghee.lee@company.com<\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc5f0\ub77d\ucc98\">010-2345-6789<\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc0c1\ud0dc\"><span class=\"status inactive\">\ud734\uac00<\/span><\/div>\n                <\/div>\n\n                <!-- \ud589 3 -->\n                <div class=\"div-table-row\">\n                    <div class=\"div-table-col\" data-label=\"\uc774\ub984\">\n                        <div class=\"avatar\">\ud83e\uddd1\u200d\ud83d\udcbc<\/div>\n                        <div>\ubc15\ubbfc\uc218<\/div>\n                    <\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc9c1\ucc45\">\uc0ac\uc6d0<\/div>\n                    <div class=\"div-table-col\" data-label=\"\ubd80\uc11c\">\uc778\uc0ac\ud300<\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc774\uba54\uc77c\">minsu.park@company.com<\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc5f0\ub77d\ucc98\">010-3456-7890<\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc0c1\ud0dc\"><span class=\"status active\">\ud65c\uc131<\/span><\/div>\n                <\/div>\n\n                <!-- \ud589 4 -->\n                <div class=\"div-table-row\">\n                    <div class=\"div-table-col\" data-label=\"\uc774\ub984\">\n                        <div class=\"avatar\">\ud83d\udc68\u200d\ud83d\udcbb<\/div>\n                        <div>\uc815\ud0dc\uc601<\/div>\n                    <\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc9c1\ucc45\">\ucc28\uc7a5<\/div>\n                    <div class=\"div-table-col\" data-label=\"\ubd80\uc11c\">\uae30\ud68d\ud300<\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc774\uba54\uc77c\">taeyoung.jung@company.com<\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc5f0\ub77d\ucc98\">010-4567-8901<\/div>\n                    <div class=\"div-table-col\" data-label=\"\uc0c1\ud0dc\"><span class=\"status pending\">\uc2b9\uc778\ub300\uae30<\/span><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","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":"","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":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"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":""},"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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"categories":[23],"tags":[],"class_list":["post-8718","post","type-post","status-publish","format-standard","hentry","category-development_web"],"_links":{"self":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/8718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8718"}],"version-history":[{"count":0,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/8718\/revisions"}],"wp:attachment":[{"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasu0707.duckdns.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}