GWC 라이브러리 – Quick Start Page

GWC 라이브러리의 UI를 이용해 샘플 페이지를 개발할 때 사용하는 시작 코드입니다. 참조하세요.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Noto Sans KR';
            }

            body {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100vh;
                background-color: rgb(30,30,30);
            }

            #main-layout {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0.001;
                transition: 2s opacity;
            }

            #main-layout.show {
                opacity: 1;
            }
        </style>

        <link rel="stylesheet" href="../js/gwc/geoservice-web-components.css">
        <script src="../js/gwc/geoservice-web-components.js" defer>
        <title>GWC Library Quick Start Page</title>
    </head>
    <script>
        window.addEventListener("load", () => {
            document.querySelector("#main-layout").classList.add("show");
        });

        window.addEventListener("DOMContentLoaded", () => {
            GeoServiceWebComponentManager.instance.update();
        });
    </script>
    <body>
        <div id="main-layout">
        </div>
    </body>
</html>

Page에 대한 UI 구성이 모두 완료되면 서서히 나타나도록 하는 효과가 포함되어 있습니다. 만약 Page에 UI가 그렇게 많지 않다면 이 효과는 제거 시켜도 됩니다.

답글 남기기 응답 취소