포털 기능 웹 페이지 구현 방법

소개

이 프로젝트에서는 웹 페이지에서 포털과 유사한 기능을 구현하는 방법을 배우게 됩니다. 포털 기능은 사용자가 긴 웹 페이지에서 원하는 콘텐츠를 빠르게 찾고 탐색할 수 있도록 해줍니다.

👀 미리보기

포털 기능 데모

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다:

프로젝트 파일 및 구조 설정 방법
JavaScript 및 jQuery 를 사용하여 포털 기능 구현 방법
사용자의 스크롤 위치에 따라 사이드 버튼의 색상이 변경되도록 하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

웹 개발 프로젝트를 구조화하고 설정할 수 있습니다.
JavaScript 및 jQuery 를 사용하여 DOM 을 조작하고 사용자 상호 작용을 처리할 수 있습니다.
긴 웹 페이지에서 사용자 경험을 향상시키기 위해 포털과 유사한 기능을 구현할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── index.html
├── css
├── images
└── js
    ├── index.js
    └── jquery-3.6.0.min.js

이 구조에서:
- index.html은 메인 페이지입니다.
- css는 스타일 파일 폴더입니다.
- images는 이미지 리소스 폴더입니다.
- js/index.js는 완성해야 하는 JS 파일입니다.
- js/jquery-3.6.0.min.js는 jQuery 라이브러리 파일입니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

포털 기능 구현

이 단계에서는 포털 기능을 구현하기 위해 js/index.js 파일의 코드를 완성합니다.

js/index.js 파일에 다음 코드를 추가합니다:

$(window).scroll(function () {
  // 페이지가 지정된 범위로 스크롤되면 해당 사이드 버튼의 색상이 변경됩니다.
  let top = scrollY;
  $("#lift a").removeClass("active-color");
  if (top >= 0 && top < 960) {
    $("#lift a:nth-of-type(1)").addClass("active-color");
  } else if (top >= 960 && top <= 1920) {
    $("#lift a:nth-of-type(2)").addClass("active-color");
  } else {
    $("#lift a:nth-of-type(3)").addClass("active-color");
  }
});

function toFunction(scrollTopVal) {
  // 버튼을 클릭하면 지정된 위치로 스크롤됩니다.
  window.scrollTo(0, scrollTopVal);
}

설명:
- $(window).scroll() 함수는 페이지의 스크롤 위치를 감지하는 데 사용됩니다.
- 페이지가 지정된 범위로 스크롤되면 해당 사이드 버튼에 활성 스타일 (.active-color) 이 적용되고, 다른 버튼의 스타일은 기본값 (.default-color) 으로 설정됩니다.
- toFunction() 함수는 사용자가 사이드 버튼을 클릭하면 페이지를 지정된 위치로 스크롤하는 데 사용됩니다.

포털 기능 테스트

브라우저로 돌아가 페이지를 새로 고칩니다.
페이지 측면의 top, middle, or bottom 버튼을 클릭하고 페이지가 해당 범위로 스크롤되는지 확인합니다.
페이지가 지정된 범위로 스크롤될 때 해당 사이드 버튼에 활성 스타일 (.active-color) 이 적용되는지 확인합니다.

최종 결과는 아래와 같습니다: