페이지 파일의 구조

에스페이지에서는 일반적으로 +page.essepage 파일을 사용해 웹페이지를 만듭니다.

일반 HTML 파일과 같은 방법으로 HTML, CSS와 JavaScript를 작성할 수 있습니다.

index.html처럼 원하는 이름의 HTML 파일을 만들어 사용할 수도 있습니다. 다만 +page.essepage는 파일이 들어 있는 폴더의 경로로 접속하고, 일반 HTML 파일은 URL에 파일 이름까지 입력해야 합니다.

페이지 파일	URL
/public/about/+page.essepage	/about
/public/about/index.html	/about/index.html

파일 이름을 URL에 표시하지 않고 폴더의 경로를 페이지 주소로 사용하려면 +page.essepage 파일을 사용하세요.

HTML 문서의 기본 구조는 생략할 수 있습니다

에스페이지는 페이지를 구성할 때 생략된 HTML 문서의 기본 구조를 자동으로 추가합니다.

전체 HTML 문서를 작성해도 사용할 수 있지만, 일반적인 페이지 파일에서는 반복되는 기본 태그를 생략하고 페이지에 필요한 내용만 작성할 수 있습니다.

일반적인 HTML 문서는 다음과 같은 구조로 작성됩니다.

<!doctype html>
<html>
    <head>
        <title>About Us</title>
    </head>

    <body>
        <h1>About Us</h1>
        <p>Learn more about our website.</p>
    </body>
</html>

에스페이지에서는 이 전체 구조를 매번 작성하지 않아도 됩니다.

다음과 같이 페이지 제목과 브라우저에 표시할 내용만 작성해도 충분합니다.

<head>
    <title>About Us</title>
</head>

<h1>About Us</h1>

<p>Learn more about our website.</p>

생략한 <!doctype html>, <html>과 <body>는 페이지를 구성할 때 자동으로 추가됩니다.

전체 HTML 문서 구조를 직접 작성해도 문제는 없으므로 프로젝트와 작업 방식에 맞는 방법을 선택할 수 있습니다.

HTML

페이지에 표시할 제목, 문장, 이미지와 링크 같은 콘텐츠는 일반적인 HTML과 같은 방법으로 작성합니다.

<main>
    <h1>About Us</h1>

    <p>
        We create simple tools that help people
        build and publish websites.
    </p>

    <a href="/contact">Contact Us</a>
</main>

에스페이지를 사용하기 위해 별도의 HTML 문법을 새로 배울 필요는 없습니다. 기존에 알고 있던 HTML 요소와 속성을 그대로 사용하면 됩니다.

CSS

페이지에서 사용하는 CSS는 <style> 요소를 사용해 같은 파일 안에 작성할 수 있습니다.

<h1>About Us</h1>

<p>Learn more about our website.</p>

<style>
    h1 {
        color: royalblue;
    }

    p {
        line-height: 1.7;
    }
</style>

페이지 파일 안에 작성한 <style> 요소는 페이지를 구성할 때 자동으로 문서의 <head> 영역에 배치됩니다.

따라서 CSS 파일을 별도로 만들지 않아도 현재 페이지에 필요한 디자인을 바로 추가할 수 있습니다.

여러 페이지에서 같은 디자인을 사용해야 한다면 CSS를 별도의 파일이나 레이아웃으로 분리하는 것이 좋습니다. 자세한 방법은 CSS와 에셋에서 알아볼 수 있습니다.

JavaScript

일반적인 웹페이지와 마찬가지로 <script> 요소도 같은 파일 안에 작성할 수 있습니다.

<button id="messageButton">Show Message</button>

<p id="message"></p>

<script>
    const button = document.getElementById("messageButton");
    const message = document.getElementById("message");

    button.addEventListener("click", () => {
        message.textContent = "Hello from Essepage!";
    });
</script>

버튼을 클릭하면 다음 문장이 표시됩니다.

Hello from Essepage!

일반적인 웹페이지에서 사용하는 JavaScript와 브라우저 API를 그대로 사용할 수 있습니다.

일반 HTML 문서에서는 <script>의 위치에 따라 실행 시점이 달라질 수 있습니다. 에스페이지에서는 페이지 파일에 직접 작성한 <script>가 기본적으로 페이지 콘텐츠가 모두 표시된 뒤 실행됩니다.

따라서 관련 HTML 요소가 먼저 만들어졌는지 확인하기 위해 <script>의 위치를 조정할 필요는 없습니다. 다만 코드의 구조를 이해하기 쉽도록 관련 HTML 아래에 <script>를 작성하는 것을 권장합니다.

페이지가 표시되기 전에 실행해야 하는 코드는 <script>에 data-essepage-before-render 속성을 추가합니다.

<script data-essepage-before-render>
    // 페이지가 표시되기 전에 실행할 코드
</script>

하지만 코드가 길어지거나 여러 페이지에서 같은 JavaScript를 사용한다면 별도의 파일로 분리하는 것이 좋습니다.

JavaScript의 메시지와 오류를 확인하는 방법은 콘솔과 디버깅에서 알아볼 수 있습니다.

코드 작성 순서

에스페이지 페이지 파일 안에서 HTML, <style>과 <script>를 반드시 다음 순서로 작성해야 하는 것은 아닙니다.

다만 다음과 같이 정리하면 페이지의 구조를 이해하고 관리하기 쉽습니다.

<head>에 들어갈 제목과 메타데이터
화면에 표시할 HTML
페이지에서 사용하는 CSS
페이지에서 실행할 JavaScript

<head>
    <title><!-- Title --></title>
</head>

<main>
    <!-- HTML -->
</main>

<style>
    /* CSS */
</style>

<script>
    // JavaScript
</script>

이 순서로 작성하면 페이지가 길어지더라도 페이지 정보, 콘텐츠, 디자인과 동작을 구분해서 확인할 수 있습니다.

전체 페이지 예제

앞에서 살펴본 내용을 하나의 페이지 파일로 작성하면 다음과 같습니다.

<head>
    <title>About Us</title>
</head>

<main>
    <h1>About Us</h1>

    <p>
        We create simple tools that help people
        build and publish websites.
    </p>

    <button id="messageButton">Learn More</button>

    <p id="message"></p>
</main>

<style>
    main {
        max-width: 640px;
        margin: 80px auto;
        padding: 20px;
        font-family: system-ui;
    }

    h1 {
        color: royalblue;
    }

    p {
        line-height: 1.7;
    }

    button {
        padding: 12px 20px;
        color: white;
        background: royalblue;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
    }
</style>

<script>
    const button = document.getElementById("messageButton");
    const message = document.getElementById("message");

    button.addEventListener("click", () => {
        message.textContent = "Thank you for visiting our website.";
    });
</script>

이 페이지 파일에는 다음 내용이 포함되어 있습니다.

<head>: 페이지 제목과 메타데이터
<main>: 방문자에게 표시할 콘텐츠
<style>: 페이지에 적용할 CSS
<script>: 페이지의 동작을 구현하는 JavaScript

HTML, CSS와 JavaScript를 하나의 파일에서 확인할 수 있으므로 페이지를 빠르게 만들고 수정하기 편리합니다.

레이아웃과 컴포넌트 사용하기

웹사이트가 커지면 메뉴, 헤더와 푸터처럼 여러 페이지에서 반복되는 코드를 매번 작성하는 것이 불편해집니다.

이러한 공통 코드는 레이아웃이나 컴포넌트로 분리할 수 있습니다.

레이아웃을 사용하는 경우 페이지 파일의 콘텐츠는 레이아웃이 지정한 위치에 표시됩니다. 따라서 페이지 파일에는 각 페이지에서 달라지는 콘텐츠만 작성할 수 있습니다.

컴포넌트를 사용하면 메뉴, 버튼과 카드처럼 반복해서 사용하는 요소도 별도의 파일로 관리할 수 있습니다.

레이아웃과 컴포넌트의 자세한 사용법은 레이아웃과 컴포넌트에서 알아볼 수 있습니다.

다음 단계

페이지 파일의 기본 구조를 이해했다면 다음 문서로 넘어가세요.

페이지를 메뉴와 링크로 연결하는 방법: 내비게이션과 링크
여러 페이지에서 공통 구조를 사용하는 방법: 레이아웃
반복되는 요소를 별도의 파일로 관리하는 방법: 컴포넌트
CSS와 이미지 파일을 관리하는 방법: CSS와 에셋
<head>의 자세한 작동 방식 알아보기: <head> 이해하기
에스페이지 전용 요소의 사용법 확인하기: 에스페이지 태그

언어

목차

Title