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>
<!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>
<!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가 그렇게 많지 않다면 이 효과는 제거 시켜도 됩니다.