{"id":6861,"date":"2021-06-22T15:22:24","date_gmt":"2021-06-22T06:22:24","guid":{"rendered":"http:\/\/tq2guide-kr.tqoon.com\/?p=6861"},"modified":"2021-07-02T16:25:56","modified_gmt":"2021-07-02T07:25:56","slug":"%eb%a0%88%ec%9d%b4%ec%95%84%ec%9b%83-%ec%98%88%ec%8b%9c%ed%99%94%eb%a9%b4","status":"publish","type":"post","link":"http:\/\/tq2guide-kr.tqoon.com\/?p=6861","title":{"rendered":"\ub808\uc774\uc544\uc6c3 \uc608\uc2dc\ud654\uba74"},"content":{"rendered":"\n<div><header><script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1\/jquery.min.js\"><\/script><\/header><\/div>\n<div class=\"header\">\n<div class=\"previous\"><a class=\"goto-previous\" href=\"http:\/\/tq2guide-kr.tqoon.com\/?p=6464\"> \uc774\uc804 \ud398\uc774\uc9c0\ub85c <\/a><\/div>\n<\/div>\n<div class=\"content-wrap\">\n<div class=\"content clear\">\n<div class=\"layout-img\"><img src=\"http:\/\/tq2guide-kr.tqoon.com\/wp-content\/uploads\/2021\/06\/product-description-page.png\" alt=\"layout\">\n<div class=\"cover-wrap\">\n<div class=\"sec-top dfr\">\n<section class=\"sec1\">1<\/section>\n<div class=\"sec-right-wrap\">\n<section class=\"sec2\">2<\/section>\n<section class=\"sec3\">3<\/section>\n<section class=\"sec4\">4<\/section>\n<section class=\"sec5\">5<\/section>\n<\/div>\n<\/div>\n<div class=\"sec-bottom dfr\">\n<section class=\"sec6\">6<\/section>\n<section class=\"sec7\">7<\/section>\n<section class=\"sec8\">8<\/section>\n<section class=\"sec9\">9<\/section>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sticky-wrap\">\n<div class=\"link-tree-wrap\">\n<p class=\"link-tree-title\">MainMenu &gt; \uce74\ud14c\uace0\ub9ac \ub9c1\ud06c \ud2b8\ub9ac<\/p>\n<div class=\"link-tree-main\">\n<div class=\"sec-top dfr\"><!-- \uc0c1\ub2e8 5\uac1c -->\n<section id=\"sec1\"><!-- \uc0c1\ud488 \uc774\ubbf8\uc9c0 --> \uc0c1\ud488 \uc774\ubbf8\uc9c0<\/section>\n<div class=\"sec-right-wrap\">\n<section id=\"sec2\">\uc0c1\ud488 \uae30\ubcf8\uc815\ubcf4<\/section>\n<section id=\"sec3\">SNS \uacf5\uc720<\/section>\n<section id=\"sec4\">\uae30\ubcf8 \ucee8\ud150\uce20<\/section>\n<section id=\"sec5\">\n<p>\uc218\ub7c9 \ubc0f \uc635\uc158 \uc785\ub825<br>\uc0c1\ud488 \ucd5c\uc885\uae08\uc561 \ud45c\uc2dc<\/p>\n<div class=\"btn-wrap dfnr\">\n<p class=\"bg-gray\">\uc7a5\ubc14\uad6c\ub2c8<\/p>\n<p class=\"bg-gray\">\ubc14\ub85c\uad6c\ub9e4<\/p>\n<\/div>\n<\/section>\n<\/div>\n<\/div>\n<div class=\"sec-bottom\">\n<section id=\"sec6\">\uc0c1\uc138 \ucee8\ud150\uce20<\/section>\n<section id=\"sec7\">\uacf5\ud1b5 \ud558\ub2e8 \ucee8\ud150\uce20<\/section>\n<section id=\"sec8\">\ub9ac\ubdf0<\/section>\n<section id=\"sec9\">\uc0c1\ud488 Q&amp;A<\/section>\n<\/div>\n<\/div>\n<\/div>\n<p class=\"warn\">\uac01 \uc694\uc18c\ub97c \ud074\ub9ad\ud558\uba74 <br>\ud574\ub2f9 \uc704\uce58\ub85c \uc2a4\ud06c\ub864 \uc774\ub3d9\ub429\ub2c8\ub2e4.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div><style type=\"text\/css\">\n    \/* ----------- \uacf5\ud1b5 S ---------- css *\/\n    .entry-title,\n    .entry-meta {\n        display: none;\n    }\n    .entry-content li {\n        margin-bottom: 0px;\n    }\n    ul,\n    ol,\n    dl,\n    p,\n    h2 {\n        list-style: none;\n        margin: 0px;\n    }\n    h2,\n    h3,\n    p {\n        font-weight: 400;\n        color: #000;\n        font-family: 'Noto sans KR';\n    }\n    a {\n        display: block;\n        color: #000;\n    }\n    .dfr {\n        display: flex;\n        flex-flow: row wrap;\n    }\n    .dfnr {\n        display: flex;\n        flex-flow: row nowrap;\n    }\n    .f-l {\n        float: left;\n    }\n    .clear:after {\n        clear: both;\n        display: block;\n        content: '';\n    }\n    a.over:hover {\n        opacity: 0.8;\n    }\n    a.over.bg-gray {\n        width: fit-content;\n        background-color: #e7e7e7;\n        padding: 2px 5px;\n        font-size: 17px;\n    }\n    .previous .goto-previous {\n        padding-left: 38px;\n        background: url('http:\/\/tq2guide-kr.tqoon.com\/wp-content\/uploads\/2021\/06\/%EB%92%A4%EB%A1%9C%EA%B0%80%EA%B8%B0.png') no-repeat 0;\n        background-size: 30px 30px;\n        font-size: 24px;\n        color: #000;\n        margin-bottom: 82px;\n    }\n    .layout-img {\n        max-width: 661px;\n        float: left;\n        position: relative;\n        margin-right: 12px;\n    }\n    .layout-img img {\n        width: 100%;\n    }\n    \/*------------ \uc88c\uce21 \uc774\ubbf8\uc9c0 \uc601\uc5ed -------------*\/\n    .cover-wrap {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 999;\n    }\n    .cover-wrap section {\n        text-indent: -9999px;\n        color: #fff;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n    .cover-wrap .sec-top {\n        width: 100%;\n        height: 1000px;\n        display: flex;\n        flex-flow: row nowrap;\n    }\n    .cover-wrap section.sec1 {\n        width: 328px;\n        height: 956px;\n        margin: 48px 5px 0px 9px;\n    }\n    .cover-wrap .sec-right-wrap {\n        width: 312px;\n        height: 956px;\n        margin-top: 48px;\n    }\n    .cover-wrap .sec-right-wrap section {\n        margin-bottom: 6.5px;\n    }\n    .cover-wrap .sec-right-wrap section.sec2 {\n        height: 275px;\n    }\n    .cover-wrap .sec-right-wrap section.sec3 {\n        height: 93px;\n    }\n    .cover-wrap .sec-right-wrap section.sec4 {\n        height: 255px;\n    }\n    .cover-wrap .sec-right-wrap section.sec5 {\n        height: 314px;\n    }\n    .cover-wrap .sec-bottom section {\n        height: 46px;\n        margin-bottom: 6px;\n    }\n    .cover-wrap .sec-bottom {\n        width: 646px;\n        margin: 9px 0px 0px 9px;\n        flex-flow: column wrap;\n    }\n    .cover-wrap .sec-bottom section.sec6 {\n        height: 338px;\n    }\n    .cover-wrap .sec-bottom section.sec7 {\n        height: 593px;\n    }\n    .cover-wrap .sec-bottom section.sec8 {\n        height: 399px;\n    }\n    .cover-wrap .sec-bottom section.sec9 {\n        height: 814px;\n    }\n    \/*------------ \uc6b0\uce21 \ucee8\ud2b8\ub864\ub7ec \uc601\uc5ed -------------*\/\n    .sticky-wrap {\n        float: left;\n        position: sticky;\n        top: 30px;\n    }\n    .sticky-wrap .warn {\n        font-size: 14px;\n        line-height: 1.3;\n        margin-top: 15px;\n        color: #000;\n    }\n    .link-tree-wrap {\n        width: 100%;\n        max-width: 267px;\n        padding: 10px 12px 3px 12px;\n        background-color: #eeeff0;\n    }\n    .link-tree-wrap .link-tree-title {\n        font-size: 11px;\n        margin-bottom: 5px;\n    }\n    .link-tree-wrap section {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-size: 11px;\n        font-weight: 400;\n        background-color: #fff;\n        color: #000;\n        cursor: pointer;\n    }\n    .link-tree-wrap .sec-top {\n        justify-content: space-between;\n    }\n    .link-tree-wrap section#sec1 {\n        width: 49%;\n        margin-bottom: 6.5px;\n    }\n    .link-tree-wrap .sec-right-wrap {\n        width: 49%;\n    }\n    .link-tree-wrap .sec-right-wrap section {\n        margin-bottom: 6.5px;\n    }\n    .link-tree-wrap .sec-right-wrap section#sec2 {\n        height: 55px;\n    }\n    .link-tree-wrap .sec-right-wrap section#sec3 {\n        height: 29px;\n    }\n    .link-tree-wrap .sec-right-wrap section#sec4 {\n        height: 48px;\n    }\n    .link-tree-wrap .sec-right-wrap section#sec5 {\n        flex-wrap: wrap;\n        height: 72px;\n        text-align: center;\n        align-content: space-evenly;\n    }\n    .link-tree-wrap .sec-right-wrap section#sec5>p {\n        line-height: 1.1;\n        font-size: 11px;\n        font-weight: 400;\n        color: #000\n    }\n    .link-tree-wrap .sec-right-wrap section#sec5 .btn-wrap {\n        width: 90%;\n        justify-content: space-around;\n    }\n    .link-tree-wrap .sec-right-wrap section#sec5 .btn-wrap p {\n        width: 48%;\n        background-color: #c4c4c4;\n        font-weight: 300;\n    }\n    .link-tree-wrap .sec-bottom section {\n        height: 46px;\n        margin-bottom: 6.5px;\n    }\n<\/style><\/div>\n<p>&nbsp;<\/p>\n<div><script>\n    $(document).ready(function () {\n        var sectionLi = $('.link-tree-main').find('section')\n        var ViewLi = $('.right-area-wrap > div')\n        $(sectionLi).each(function () {\n            $(this).on({\n                mouseenter: function (e) {\n                    e.preventDefault();\n                    var idV = $(this).attr('id')\n                    var idNum = idV.replace(\/[^0-9]\/g, '');\n                    var target = $('.cover-wrap section.sec' + idNum)\n                    $('.cover-wrap section').css({\n                        'border': 'none',\n                        'background-color': 'unset'\n                    })\n                    $(target).css({\n                        'background-color': 'rgba(255, 184, 184, 0.1)',\n                        'border': '5px dotted #ec6459'\n                    })\n                    $(sectionLi).css({ 'background-color': '#fff', 'border': 'none' })\n                    $(this).css('background-color', '#ffb2ac')\n                },\n                click: function (e) {\n                    e.preventDefault();\n                    var idV = $(this).attr('id')\n                    var idNum = idV.replace(\/[^0-9]\/g, '');\n                    var target = $('.cover-wrap section.sec' + idNum)\n                    var loca = target.offset().top;\n                    $('.cover-wrap section').css({\n                        'border': 'none',\n                        'background-color': 'unset'\n                    })\n                    $(target).css({\n                        'border': '5px dotted #ec6459'\n                    })\n                    $(sectionLi).css({ 'background-color': '#fff', 'border': 'none' })\n                    $(this).css('background-color', '#ffb2ac')\n                    move(loca)\n                }\n            })\n            function move(loca) {\n                $('html, body').animate({ scrollTop: loca - 130 }, 400);\n            }\n        })\n    })\n<\/script><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/tq2guide-kr.tqoon.com\/index.php?rest_route=\/wp\/v2\/posts\/6861"}],"collection":[{"href":"http:\/\/tq2guide-kr.tqoon.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/tq2guide-kr.tqoon.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/tq2guide-kr.tqoon.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/tq2guide-kr.tqoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6861"}],"version-history":[{"count":55,"href":"http:\/\/tq2guide-kr.tqoon.com\/index.php?rest_route=\/wp\/v2\/posts\/6861\/revisions"}],"predecessor-version":[{"id":7270,"href":"http:\/\/tq2guide-kr.tqoon.com\/index.php?rest_route=\/wp\/v2\/posts\/6861\/revisions\/7270"}],"wp:attachment":[{"href":"http:\/\/tq2guide-kr.tqoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/tq2guide-kr.tqoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6861"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/tq2guide-kr.tqoon.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}