\n Hello World\n

{"status":1,"code":"essepage_fetched","payload":{"html":"\n\n\n\n

({y:0,SearchOpened:false,async init(){},SearchToggle(){this.SearchOpened?this.SearchClose():this.SearchOpen()},SearchOpen(){this.SearchOpened=true;this.disableBodyScroll();setTimeout((()=>{$root.querySelector('[x-ref="searchInput"]').focus()}),50)},SearchClose(){this.SearchOpened=false;this.enableBodyScroll()},disableBodyScroll(){document.querySelector('body').style.overflow='hidden'},enableBodyScroll(){document.querySelector('body').style.overflow='visible'},setDark(){document.documentElement.classList.add('dark');localStorage.EssepressTheme='dark';$store.global.darkMode=true},unsetDark(){document.documentElement.classList.remove('dark');localStorage.EssepressTheme='light';$store.global.darkMode=false},isDark(){if(document.documentElement.classList.contains('dark')){return true}return false}});;\">\n\n\n

({tocAnchors:[],tocLinks:[],async init(){this.essepressMarkdownPreprocess(document.querySelector('.markdown-content'));this.essepressSyntax(document.querySelector('.markdown-content'));Prism.highlightAllUnder(document.querySelector('.markdown-content'));await $nextTick();this.tocAnchors=document.querySelectorAll('.markdown-content h2, .markdown-content h3');this.tocLinks=document.querySelectorAll('.toc-content ul > li > a')},essepressMarkdownPreprocess(e){const t={elements:[],container:e,selector:'pre.code-block'};t.elements=Array.prototype.slice.apply(t.container.querySelectorAll(t.selector));if(t.elements.length){for(const[e,o]of Object.entries(t.elements)){if(o.classList.contains('code-block')){this.essepressMarkdownPreprocessCodeBlock(o)}}}},essepressMarkdownPreprocessCodeBlock(e){const t=e?.dataset?.lang||'';const o=e?.dataset?.extra||'';let s=e.querySelector('& > code')?.innerText;if(s){e.outerHTML=`\\n

\\n

\\n \\n ${t}\\n ${o}\\n

\\n ${e.outerHTML}\\n

\\n `}},essepressSyntax(e){const t={elements:[],container:e,selector:'div.ep-code-group, div.ep-tip, div.ep-details'};t.elements=Array.prototype.slice.apply(t.container.querySelectorAll(t.selector));for(let e=0,o;o=t.elements[e++];){if(o.classList.contains('ep-code-group')){this.essepressSyntaxCodeGroup(o)}if(o.classList.contains('ep-tip')){this.essepressSyntaxTip(o)}if(o.classList.contains('ep-details')){this.essepressSyntaxDetails(o)}}},essepressSyntaxCodeGroup(e){const t=e.querySelectorAll('div.es-code-block');let o=``;let s=``;if(t.length){for(const[e,n]of Object.entries(t)){console.log(`codeBlockEl:`,n);o+=`\\n \\n `;s+=`

${n.outerHTML}

`}}if(s){e.innerHTML=`

${o}

${s}

`}else{e.innerHTML=`

No 'ep-code-group' or in-code-blocks here.

`}},essepressSyntaxTip(e){const t=e.querySelector('h6')?.innerText?.trim();const o=e.querySelectorAll('p, div.es-code-block');if(o.length){let s='';for(const[e,t]of Object.entries(o)){s+=`${t.outerHTML}`}e.classList.add(...'bg-violet-100 px-5 py-0.5 rounded-lg text-sm leading-relaxed'.split(' '));e.innerHTML=`\\n

${t||'TIP'}

\\n ${s}\\n `}},essepressSyntaxDetails(e){console.log(`Details class:`);console.log(e);const t=e.querySelector('h6')?.innerText?.trim();console.log(`h6TitleEl: `+t);const o=e.querySelectorAll('p, div.es-code-block');if(o.length){let s='';for(const[e,t]of Object.entries(o)){s+=`${t.outerHTML}`}e.classList.add(...'px-5 py-0.5 rounded-lg text-sm font-light leading-relaxed'.split(' '));e.innerHTML=`\\n

\\n

\\n \\n

${t||'TIP'}

\\n

\\n ${s}\\n

\\n

\\n `}},floatMenu(){$store.global.mobileMenuOpen=false;if(window.matchMedia('screen and (max-width: 768px)').matches){return}const e=document.querySelector('.menu-scroll-area');const t=e.scrollTop;const o=e.offsetLeft;console.log(`스크롤 저장...1 scrollHeight: ${t} px`);e.style.position='fixed';e.style.top=0;e.style.bottom=0;e.style.left=o+`px`;e.classList.add('hide-scroll-bar');let s=document.querySelector('body');s.append(e);e.scrollTop=t},removeFloatMenu(){const e=$refs.menu_scroll_area;const t=document.querySelector('body > .menu-scroll-area');if(t){e.scrollTop=t.scrollTop;t.remove()}},tocHighlight(e){const t=this.tocAnchors;const o=this.tocLinks;if(typeof t!='undefined'&&t!=null&&typeof o!='undefined'&&o!=null){let e=window.scrollY;let n=false;if(document.body.offsetHeight+e>=document.body.scrollHeight){n=true}if(o){o.forEach(((e,t)=>{e.classList.remove(`after:bg-[var(--highlight-color)]`)}));if(n){o[t.length-1].classList.add(`after:bg-[var(--highlight-color)]`)}else{for(var s=t.length-1;s>=0;s--){if(e>t[s].offsetTop-91){o[s].classList.add(`after:bg-[var(--highlight-color)]`);break}}}}}}});;\" @scroll.window.debounce.100ms=\"tocHighlight\" @scroll.window.throttle.100ms=\"tocHighlight\">\n\n\t\n \n

\n \n

\n\n \n

\n\n

\n \n \n \n \n $\"logo\"$ \n Essepage\n \n

\n \n

\n \n \n\n

\n\n \n 문서\n \n\n \n \n \n 예제\n \n\n \n \n\n \n 쇼케이스\n \n\n \n\n\n

\n \n \n

\n\n \n\n \n \n\n \n

{ close() }, 50)\" x-on:keydown.escape=\"close\">\n \n

\n \n 문서\n \n \n 예제\n \n \n 쇼케이스\n \n\n \n 자주 묻는 질문\n \n \n 개인정보처리방침\n \n \n 이용약관\n \n \n 사용 기간 및 환불정책\n \n \n

\n\n \n

\n \n English\n

\n \n \n

\n \t\t\t\t\t\t\t\n 한국어\n

\n \n \n

\n \n 日本語\n

\n \n\n

\n Appearance\n

\n \n \n

\n\n\n\n

\n\n

\n\n\n

\n \n

\n\n \n \n\n\n\n

{ SearchClose() }, 50)\" x-on:keydown.escape=\"SearchClose\">\n \n\n

\n \n\n\n

({searchDebounceTimer:null,testFetchedData:[{title:'Calendar',value:'/blog/dev-tips',description:'aaa'},{title:'Search Emoji',value:'emoji',description:'bbb'},{title:'Calculator',value:'calculator',description:'ccc'},{title:'Calculator2',value:'calculator2',description:'aadddda'},{title:'Calculator3',value:'calculator3',description:'eeeeeeee'},{title:'Calculator4',value:'calculator4',description:'aaffffffa'},{title:'Calculator5',value:'calculator5',description:'aattttttta'},{title:'Calculator6',value:'calculator6',description:'ayyyyyyyyyya'},{title:'Calculator7',value:'calculator7',description:'aaiiiiiiia'},{title:'Calculator8',value:'calculator8',description:'aaoooooooooa'}],beforeInputSearch:'',searchItems:[],searchItemsFiltered:[],searchItemActive:null,searchItemSelected:null,searchId:$id('search'),inputSearch:'',inputSearchIsEmpty(){return this.inputSearch.length==0},commandItemIsActive(e){return this.searchItemActive&&this.searchItemActive.value==e.value},searchItemActiveNext(){clearTimeout(this.searchDebounceTimer);this.searchDebounceTimer=setTimeout((()=>{let e=this.searchItemsFiltered.indexOf(this.searchItemActive);if(e{let e=this.searchItemsFiltered.indexOf(this.searchItemActive);if(e>0){this.searchItemActive=this.searchItemsFiltered[e-1];this.searchScrollToActiveItem()}}),5)},searchScrollToActiveItem(){if(this.searchItemActive){activeElement=document.getElementById(this.searchItemActive.value+'|'+this.searchId);if(!activeElement)return;newScrollPos=activeElement.offsetTop+activeElement.offsetHeight-this.$refs.searchItemsList.offsetHeight;if(newScrollPos>0){this.$refs.searchItemsList.scrollTop=newScrollPos}else{this.$refs.searchItemsList.scrollTop=0}}},inputSearchItems(){this.searchItemsFiltered=this.searchItems;this.searchItemActive=this.searchItemsFiltered[0]},searchItemsReorganize(){},async init(){this.inputSearchItems()},async search(){if(this.beforeInputSearch!=this.inputSearch){console.log('haha');console.log(`searching... ${this.inputSearch}`);console.log('haha2');console.log(Essepage);console.log(Essepage);console.log(Essepage);console.log(Essepage);console.log(Essepage);console.log(Essepage);console.log('haha3');if(this.inputSearch){const e=[];const t=await Essepage.pageSearch(this.inputSearch,`/`,{pageType:'article',sort:'desc'});console.log(t);if(t?.status>0&&t?.payload?.pageList){for(const[s,a]of Object.entries(t?.payload?.pageList)){const t=new RegExp(`(${this.inputSearch})`,'ig');a.pageContent=a.pageContent.replaceAll(t,`$1`);e.push({value:a.path+`/`+a?.slug,title:a.pageTitle,description:a.pageContent||a.pageDescription})}}console.log(e);this.searchItems=e}else{this.searchItems=[]}this.inputSearchItems()}this.beforeInputSearch=this.inputSearch}});;\" @keydown.down=\"event.preventDefault(); searchItemActiveNext();\" @keydown.up=\"event.preventDefault(); searchItemActivePrevious()\" @keypress=\"if($event?.code=='Enter'){searchItemSelected=searchItemActive;SearchClose();Essepage.goto(searchItemSelected.value)}\" class=\"flex min-h-[170px] justify-center w-full max-w-xl items-start\">\n

\n \n \n \n

\n \n \n

\n\n

\n \n

\n\n

\n\n \n \n

\n \n

\n \n \n

\n \n 처음으로\n \n

\n \n

({tocs:[],async init(){const o=document.querySelector('.markdown-toc');if(o?.dataset?.toc){const t=JSON.parse(o?.dataset?.toc);if(t.length){for(const[o,e]of Object.entries(t)){if(1\n\n \n\n \n\n\n

\n\n

\n\n\n\n\n\t

\n\n

\n\n \n\n \n\n

\n \n

\n\n \n

\n \n

\n\n

({menuOpenState:true,async init(){let e=false;let t=false;if(window.__lang!=Essepage?.pageLanguage){window.__lang=Essepage?.pageLanguage;e=true}let o='';if(Essepage?.pageFolderPath){o='/'+Essepage.pageFolderPath.split('/')[0]}if(window.__categoryFolder!=o){window.__categoryFolder=o;t=true}const a=$refs.menu_scroll_area;a.classList.add('hide-scroll-bar');if($store.global.menuCategoryList.length<1||e||t){let e=await Essepage.articleList(o||`/guide`,{sort:'asc',pageRow:100});let t=[];for(const[o,a]of Object.entries(e?.payload?.pageArticleList)){const e=JSON.parse(a.pageMetaInfo);if(e['essepage:not_on_the_list']){continue}const o=t.findIndex((e=>e.category===a.categoryPath));a.currentView=false;const s=new RegExp(`${a.path}/${a.slug}$`);if(s.test(window.location.href)){a.currentView=true}if(o<0){t=[...t,{category:a.categoryPath,categoryOpen:this.menuOpenState,items:[a]}]}else{t[o].items=[...t[o].items,a]}}$store.global.menuCategoryList=t}await $nextTick();removeFloatMenu();a.classList.remove('hide-scroll-bar');for(const[e,t]of Object.entries($store.global.menuCategoryList)){for(const[t,o]of Object.entries($store.global.menuCategoryList[+e].items)){$store.global.menuCategoryList[e].items[t].currentView=false;const o=$store.global.menuCategoryList[e].items[t].path;const a=$store.global.menuCategoryList[e].items[t].slug;const s=new RegExp(`${o}/${a}$`);if(s.test(window.location.href)){$store.global.menuCategoryList[e].items[t].currentView=true;$store.global.menuCategoryList[e].categoryOpen=true}}}},openMenuAll(){for(const[e,t]of Object.entries($store.global.menuCategoryList)){$store.global.menuCategoryList[+e].categoryOpen=true}},closeMenuAll(){for(const[e,t]of Object.entries($store.global.menuCategoryList)){$store.global.menuCategoryList[+e].categoryOpen=false}},capitalizeFirstLetter(e){return e.charAt(0).toUpperCase()+e.slice(1)},isMenuSelected(e){console.log(e);console.log(window.location.href);if(window.location.href?.includes(e)){return true}return false},decodeHtml(e){var t=document.createElement('textarea');t.innerHTML=e;return t.value}});;\" class=\"pt-4 md:pt-0\">\n\n \n\n \n\n \n\n

\n\n

\n\n \n \n \n \n

\n\n

\n\n \n

\n\n

\n \n

\n\n \n \n \n \n \n \n\n

\n\n \n\n# Hello World\n\n에스페이지에서는 기본적으로 HTML의 `<body></body>` 안쪽 부분을 코딩합니다. `<body></body>` 바깥쪽 부분은 에스페이지에서 처리하므로 신경 쓰지 않아도 됩니다.\n\nHTML 관련 책이나 웹페이지로 학습할 경우에는 `<body></body>` 안쪽 부분을 중심으로 진행하면 됩니다.\n\n\n\n\n## 소스 코드\n\n```html:/public/basic/hello-world/+page.essepage\n<h1>Hello World!</h1>\n\n```\n\n## 실행\n\n\n\n[브라우저에서 확인](https://espg.dev/examples/basic/hello-world#_blank)\n\n \n\n\n\n\n

\n\n

({PrevPost:null,NextPost:null,async init(){let t=await Essepage.articleList(`./`,{articleSlug:Essepage.articleSlug,sort:'asc'});const e=t?.payload?.pageArticleList;this.PrevPost=e.find((t=>t.articleDirection=='prev'));this.NextPost=e.find((t=>t.articleDirection=='next'));await $nextTick()}});;\">\n\n \n\n \n\n

\n \n \n Last updated: \n \n

\n\n\n

\n \n\n\n\n\n

\n \n \n

\n\n

\n \n

\n\n

\n\n \n

\n\n

\n\n \n

({tocs:[],async init(){const o=document.querySelector('.markdown-toc');if(o?.dataset?.toc){const t=JSON.parse(o?.dataset?.toc);if(t.length){for(const[o,e]of Object.entries(t)){if(1\n\n \n\n \n\n\n

\n\n\n\n \n

\n\t

\n\n\t\n\n

\n\n

\n\n\n\n","script":"if(twindCss?.tw&&twindCss?.css){twindCss.tw(twindCss.css({':global':{'.markdown-content':twindCss.css`\n h1 {\n @apply font-bold text-3xl tracking-tight;\n & > code {\n @apply text-3xl;\n }\n }\n h2 {\n @apply tracking-tight text-2xl font-bold mt-12 mb-6 border-t pt-6;\n border-color: color(from var(--text-color) srgb r g b / 0.085);\n html.dark & {\n border-color: color(from var(--dark-text-color) srgb r g b / 0.1);\n }\n & > code {\n @apply text-2xl;\n }\n }\n h3 {\n @apply tracking-tight text-xl font-semibold mt-4 mb-4 pt-4;\n & > code {\n @apply text-xl;\n }\n }\n h4, h5, h6 {\n @apply my-4 overflow-hidden;\n }\n p {\n \n \n \n \n \n \n @apply my-4 leading-relaxed;\n\n \n overflow-wrap: break-word;\n\n }\n :not(pre) > code {\n \n @apply text-xs py-0.5 px-1.5 mx-1 rounded relative -top-0.5 border border-gray-300 dark:border-gray-600;\n background-color: color(from var(--text-color) srgb r g b / 0.055);\n html.dark & {\n background-color: color(from var(--dark-text-color) srgb r g b / 0.15);\n }\n }\n a {\n @apply underline;\n color: oklch(from var(--highlight-color) calc(l - 0.03) c h);\n }\n a:hover {\n color: oklch(from var(--highlight-color) l c h);\n }\n img {\n @apply max-w-full h-auto block my-8 shadow rounded;\n }\n pre {\n \n @apply relative overflow-auto; \n }\n pre code {\n @apply block;\n width: fit-content;\n }\n h1, h2, h3, h4, h5 {\n \n }\n hr {\n @apply my-10 border-t border-collapse border-gray-300;\n }\n ul, ol {\n @apply text-base pl-6 mb-6;\n }\n ul {\n @apply list-disc;\n }\n ol {\n @apply list-decimal;\n }\n li {\n @apply my-2;\n }\n table {\n @apply border-collapse my-8 border-0; \n \n display: block;\n overflow-x: auto;\n white-space: nowrap; \n }\n table thead {\n @apply bg-gray-100;\n }\n table thead th {\n @apply text-gray-700 px-4 py-1 border border-gray-300;\n }\n table td {\n @apply px-4 py-1 border border-gray-300;\n }\n\n \n `}}))}Essepage.afterUpdate((async()=>{__unocss_runtime.update();document.querySelector('body').style.overflow='visible'}));","css":"figure{margin-top:2rem;margin-bottom:2rem}figure img{margin-bottom:0 !important}figure figcaption{margin-top:0.25rem;font-size:0.875rem;line-height:1.25rem;color:oklch(from var(--light-text-color) calc(l + 0.6) c h)}html.dark figure figcaption{color:oklch(from var(--dark-text-color) calc(l - 0.4) c h)}.hide-scroll-bar{-ms-overflow-style:none;scrollbar-width:none}.hide-scroll-bar::-webkit-scrollbar{display:none}.markdown-content h1,.markdown-content h2{scroll-margin-top:90px}.markdown-content h3{scroll-margin-top:70px}@media only screen and (max-width:768px){.markdown-content h1,.markdown-content h2{scroll-margin-top:30px}.markdown-content h3{scroll-margin-top:40px}}.code-block{background-color:rgba(33, 33, 33, 0.1)}.es-code-block{overflow:hidden;position:relative;margin:1rem 0;border-radius:0.5rem}.es-code-block pre[class*=language-]{padding:1em !important;margin:0 !important;border-radius:0 !important}.es-code-block .copy{direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border-radius:4px;width:40px;height:40px;border:1px solid oklch(from var(--text-color) calc(l + 0.9) c h);background-color:color(from var(--bg-color) srgb r g b/0.99);cursor:pointer;outline:2px solid transparent;outline-offset:2px}html.dark .es-code-block .copy{border:1px solid oklch(from var(--dark-text-color) calc(l - 0.4) c h);background-color:color(from var(--dark-bg-color) srgb r g b/0.9)}.es-code-block .copy.checked{background-color:oklch(from var(--highlight-color) calc(l + 1) calc(c - 0.05) h)}html.dark .es-code-block .copy.checked{background-color:oklch(from var(--highlight-color) calc(l - 0.3) c h)}.es-code-block .lang{position:absolute;top:2px;right:8px;z-index:1;font-size:12px;font-weight:500;color:oklch(from var(--text-color) calc(l + 0.6) c h)}html.dark .es-code-block .lang{color:oklch(from var(--dark-text-color) calc(l - 0.2) c h)}.es-code-block .extra{position:absolute;top:2px;left:8px;z-index:1;font-size:12px;font-weight:500;color:oklch(from var(--text-color) calc(l + 0.6) c h)}html.dark .es-code-block .extra{color:oklch(from var(--dark-text-color) calc(l - 0.2) c h)}.ep-code-group{background-color:light-dark(#f5f2f0, #282a36);border-radius:0.5rem 0.5rem 0.5rem 0.5rem;overflow:hidden;margin:1em 0}.ep-code-group .tabs{overflow:auto;padding:0 10px;display:flex;gap:4px;box-shadow:inset 0 -1px 0 0 oklch(from var(--text-color) calc(l + 0.9) c h)}html.dark .ep-code-group .tabs{box-shadow:inset 0 -1px 0 0 oklch(from var(--dark-text-color) calc(l - 0.5) c h)}.ep-code-group .tabs>button{display:block;padding:10px 10px;flex-shrink:0;outline:2px solid transparent;outline-offset:2px;position:relative}.ep-code-group .tabs>button::before{z-index:2;content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;transition:background-color 0.1s, opacity 0.1s}.ep-code-group .blocks .es-code-block{margin:0}.ep-code-group .blocks .es-code-block .code-block{margin:0.25rem 0}.ep-code-group .blocks .es-code-block .extra{display:none}.ep-details{background-color:oklch(from var(--bg-color) calc(l - 0.025) c h)}html.dark .ep-details{background-color:oklch(from var(--dark-bg-color) calc(l + 0.06) c h)}.ep-tip{margin:1rem 0;background-color:oklch(from var(--highlight-color) calc(l + 0.28) calc(c - 0.13) h)}html.dark .ep-tip{background-color:oklch(from var(--highlight-color) calc(l + 0.28) calc(c + 0.4) h/0.07)}.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6{position:relative}.markdown-content .anchor[name]{position:absolute;opacity:0;transition:color 0.25s, opacity 0.25s;left:0}.markdown-content .anchor[name]::before{content:\"#\";opacity:0.75;font-size:1em;font-weight:normal;position:absolute;top:0px;right:0;padding-right:0.25em;z-index:1}.markdown-content h1:hover .anchor[name],.markdown-content h2:hover .anchor[name]{opacity:1}","essepage_head":"\n Hello World\n \n\n\t\n\t\n\t\n\t\n\t\n\n\t\n\n\n\t\n\n\t\n\t\t\n\n\t\n\n\t\n\t\n\t\n\t\n \n\t\n \n \n\t\n\n\t\n\t\n\t\n\n\n\t\n\n\t","page_title":"Hello World","page_meta":{"title":"Hello World","description":"Hello World! 표시하기","date":"2022-01-01 12:34:56","viewport":"width=device-width, initial-scale=1","og:title":"Hello World","og:description":"Hello World! 표시하기","og:image":"https://i.esdrop.com/d/f/bh8rwl3bwU/EJyuLJkyVb.png"},"progressbar_bg":"linear-gradient(45deg, #FFA297 14%, #FFBCA5 0, #FFBCA5 28%, #FFF5D1 0, #FFF5D1 42%, #80FEE3 0, #80FEE3 56%, #8CD2FA 0,#8CD2FA 70%, #B1BEFF 0, #B1BEFF 84%, #F0CFFF 0)","additional_languages":["ko","ja"],"default_language":"en","file_type":"essepage","page_token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MzMwMzY1MjUsIm5iZiI6MTczMzAzNjUyNSwiZXhwIjoxNzMzMDQwMTI1LCJmcCI6ImFwaV9lc3NlcGFnZV9jb20iLCJkYXRhIjp7ImVzc2VwYWdlX3N0YXR1cyI6IjkwMCJ9fQ.P7Rfrx8SwP-0z4biDShoEXbrwP8IBbyWsx4i-tEz8sQ","s_fetch":true,"use_ssr_cache":false,"href_path":"/ko/examples/basic/hello-world","article_mode":true,"category_folder":"examples/basic","slug":"hello-world","cv":"20241118031356"}}

${t||'TIP'}

${t||'TIP'}

\n \n 목차\n

\n Title\n

\n \n 목차\n