내비게이션과 링크

웹사이트에 여러 페이지를 만들었다면 링크를 사용해 페이지를 서로 연결할 수 있습니다.

에스페이지에서도 일반 HTML과 동일하게 <a> 요소의 href 속성으로 링크를 만듭니다. 에스페이지에서는 /public 안의 폴더와 페이지 파일 구조에 따라 URL이 만들어지므로 별도의 라우터를 설치하거나 내비게이션 설정 파일을 작성할 필요는 없습니다.

링크에는 /public과 +page.essepage를 제외하고, 사이트의 시작 위치를 기준으로 한 URL 경로를 입력합니다.

<a href="/about">About Us</a>

링크를 클릭하면 사이트의 /about 페이지로 이동합니다.

페이지 URL 확인하기

페이지를 연결하려면 먼저 해당 페이지의 URL을 알아야 합니다.

다음과 같은 파일 구조가 있다고 가정해보겠습니다.

/public
├── +page.essepage
├── about
│   └── +page.essepage
└── contact
    └── +page.essepage

각 페이지의 URL은 다음과 같습니다.

링크의 href에는 페이지 파일의 경로가 아니라 방문자가 사용하는 URL 경로를 입력합니다.

<a href="/about">About Us</a>

다음과 같이 페이지 파일의 경로를 입력하지 마세요.

<a href="/public/about/+page.essepage">About Us</a>

+page.essepage의 파일 이름은 URL에 표시되지 않습니다.

index.html처럼 일반 HTML 파일을 연결할 때는 파일 이름까지 입력합니다.

<a href="/about/index.html">About Us</a>

페이지 파일과 URL이 연결되는 자세한 규칙은 페이지 만들기와 URL에서 알아볼 수 있습니다.

사이트 내부 페이지 연결하기

같은 사이트 안의 페이지를 연결할 때는 사이트의 시작 위치를 기준으로 하는 경로를 사용하는 것이 좋습니다.

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>

각 링크는 다음 페이지로 이동합니다.

내비게이션 메뉴 만들기

여러 링크를 <nav> 요소 안에 작성하면 기본적인 내비게이션 메뉴를 만들 수 있습니다.

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</nav>

<main>
    <h1>Welcome to Our Website</h1>

    <p>Explore our website using the menu above.</p>
</main>

간단한 CSS를 추가해 메뉴 링크 사이의 간격을 조정할 수도 있습니다.

<style>
    nav {
        display: flex;
        gap: 20px;
    }
</style>

방문자가 사이트의 주요 페이지를 쉽게 찾을 수 있도록 모든 페이지에서 메뉴의 순서와 이름을 동일하게 사용하는 것이 좋습니다.

메뉴를 여러 페이지에서 함께 사용하기

각 페이지에 같은 메뉴를 직접 작성하면 메뉴를 수정할 때 모든 페이지의 코드를 변경해야 합니다.

페이지가 많아지면 공통 메뉴를 레이아웃이나 컴포넌트로 분리해 한 번에 관리하는 것이 좋습니다.

사이트 전체에서 공통 메뉴를 사용하려면 /public/+layout.essepage 파일에 레이아웃을 작성할 수 있습니다.

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</nav>

<essepage-slot></essepage-slot>

<style>
    nav {
        display: flex;
        gap: 20px;
    }
</style>

<essepage-slot>이 있는 위치에 각 페이지 파일의 콘텐츠가 표시됩니다.

페이지 파일에서 <main>을 사용했다면 해당 요소도 슬롯이 있는 위치에 그대로 표시됩니다.

공통 메뉴를 한 곳에서 관리하면 링크를 추가하거나 수정할 때 여러 페이지를 따로 변경하지 않아도 됩니다.

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

외부 웹사이트 연결하기

다른 웹사이트로 이동하는 링크에는 https://로 시작하는 전체 URL을 입력합니다.

<a href="https://example.com">Visit Example</a>

다음 단계

내비게이션과 링크를 만드는 방법을 이해했다면 다음 문서로 넘어가세요.

• URL의 일부를 값으로 사용하는 페이지 만들기: 파라미터 폴더
• 존재하지 않는 주소에 표시할 페이지 만들기: 사용자 정의 404 페이지
• 여러 페이지에서 공통 메뉴 사용하기: 레이아웃
• 메뉴와 반복되는 요소를 별도의 파일로 관리하기: 컴포넌트
• 에스페이지의 페이지 이동 방식 알아보기: CSR과 SSR