단일 페이지 웹사이트는 모든 콘텐츠를 한 페이지에 표시합니다. 이러한 웹사이트는 로드되면 전체 페이지(웹사이트)가 나타나고, 방문자가 헤더에 있는 메뉴 항목을 클릭하면 페이지의 다른 섹션이 표시되도록 구성되어 있습니다.
이러한 유형의 웹사이트는 간편하고 쉬운 탐색, 모바일 친화성, 웹사이트 방문자 참여도 향상, 높은 전환율, 손쉬운 제작 및 유지 관리 등 여러 장점을 가지고 있습니다. 랜딩 페이지 , 이벤트 기반 웹사이트, 포트폴리오를 간결하고 명확하게 보여주는 데 적합합니다.
이는 섹션 설정 에서 지정할 수 있는 섹션 ID 라는 중요한 요소를 사용하여 구현할 수 있습니다.
이 문서에서는 섹션 ID와 링크 메뉴 항목을 사용하여 단일 페이지 웹사이트를 만드는 방법을 안내합니다.
이 기사는 다음 주제들로 구성되어 있습니다 :
페이지 생성 및 섹션 추가
섹션 ID 지정
- 페이지에 섹션을 추가했으면 추가된 모든 섹션의 섹션 설정을 방문하고 섹션 ID 지정 그들 각각에게.
페이지를 홈페이지로 설정
다음으로 웹사이트 섹션 으로 이동하여 페이지를 홈페이지로 설정하고 (1) 웹사이트 메뉴/탐색에서 숨깁니다 (2).
섹션 ID를 사용하여 링크 메뉴 항목 만들기
이제 홈, 소개, 업무, 연락처 등과 같은 링크 메뉴 항목을 만드세요.
새 링크 메뉴 항목을 추가하려면 검색 상자에 링크 추가 (1)를 입력하고 링크 추가 작업(2)을 클릭합니다.
링크 메뉴 항목을 페이지 섹션에 연결하려면 다음 단계를 따르십시오.
- 에서 웹 사이트 섹션에서 링크 메뉴 항목 위로 마우스를 이동하고 세 개의 수직 점 아이콘 (1) 옆에.
- 선택 설정 드롭다운에서 옵션 (2).
- 다음으로 아래로 스크롤하여 링크 대상 섹션 (3)에서 페이지 섹션 탭(4)을 클릭하고 다음을 지정합니다. 섹션 ID (5) 연결하려는 섹션.
- 섹션 ID는 공백 없이 페이지 섹션에 지정된 것과 동일해야 합니다.
- 마지막으로 찜하기 버튼 (6).
위로 가기 버튼 활성화
브라우저 하단을 따라 아래로 스크롤하고 플로팅할 때 시야에 사라지는 버튼이 있으면 유용합니다. 클릭하면 쉽게 맨 위로 스크롤할 수 있습니다.
- 다음으로 아래로 스크롤하여 맨 위로 가기 버튼 섹션을 클릭하고 버튼을 활성화합니다.
고정 탐색 사용
웹사이트 디자인을 개선하기 위해 헤더 위에 고정 내비게이션을 활성화할 수도 있습니다. 자세히 알아보세요.
고정 내비게이션이 적용된 데모 사이트를 확인해 보세요.
짜잔! 이제 단일 페이지 웹사이트가 완성되었습니다. 상단에 있는 ' 사이트 보기' 버튼을 클릭하면 웹사이트를 확인할 수 있습니다 .
Pixpa에서 웹사이트 구축하기 - 완벽 가이드 글을 확인하시면 웹사이트를 맞춤 설정할 수 있는 다른 방법들을 알아보실 수 있습니다.
- 섹션 ID는 대소문자를 구분합니다.
- 섹션 ID에는 문자, 숫자, 하이픈만 사용하세요. #, 공백, 특수 문자는 사용하지 마세요.
- 대시를 사용하여 섹션 ID 내에서 단어를 구분하십시오.
다음은 몇 가지 데모 단일 페이지 웹사이트입니다.