동적 고정 탭 바 구현

소개

이 프로젝트에서는 사용자가 아래로 스크롤할 때 페이지 상단에 고정되는 동적 탭 바를 구현하는 방법을 배우게 됩니다. 이 기능은 모바일 앱과 웹사이트에서 흔히 볼 수 있으며, 부드럽고 직관적인 사용자 경험을 제공합니다.

👀 미리보기

🎯 과제

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

• CSS 포지셔닝을 사용하여 동적 탭 바를 설정하는 방법
• 사용자가 제목 표시줄을 지나 스크롤할 때까지 탭 바를 원래 위치에 유지하기 위한 스크롤 동작을 구현하는 방법
• 동적 탭 바 기능을 테스트하고 예상대로 작동하는지 확인하는 방법

🏆 성과

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

• CSS position: sticky 속성을 사용하여 고정 탭 바를 생성합니다.
• 원활한 사용자 경험을 제공하기 위해 동적 탭 바 기능을 테스트하고 디버깅합니다.

프로젝트 구조 설정

시작하려면 실험 환경을 열고, 디렉토리 구조는 다음과 같습니다:

├── css
│   └── style.css
├── images
│   ├── 1.png
│   └── 2.png
├── index.html
└── js
    └── index.js

그 중:

• css/style.css는 스타일 파일입니다.
• index.html은 메인 페이지입니다.
• js/index.js는 페이지의 js 파일입니다.
• images 폴더에는 프로젝트에서 사용되는 이미지 파일이 포함되어 있습니다.

1. WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

2. VM 상단에서 "Web 8080"을 열고 수동으로 새로 고침하면 다음과 같은 효과가 나타납니다:

   

3. 위의 이미지에서 http 로 시작하는 주소를 브라우저에 복사하여 새 창을 엽니다.

동적 탭 바 설정

이 단계에서는 사용자가 아래로 스크롤할 때 페이지 상단에 고정될 동적 탭 바를 설정하는 방법을 배우게 됩니다.

1. css 디렉토리에서 style.css 파일을 엽니다.
2. CSS 파일에서 .buttons 클래스를 찾습니다. 이 클래스는 탭 바를 나타냅니다.
3. .buttons 클래스 내부에 다음 CSS 코드를 추가합니다:

position: sticky;
top: 0;

position: sticky 속성은 사용자가 아래로 스크롤할 때 탭 바가 페이지 상단에 고정되도록 합니다. top: 0 속성은 탭 바가 페이지 상단에 고정되도록 보장합니다.

동적 탭 바 테스트

1. style.css 파일에 변경 사항을 저장합니다.
2. 웹 페이지를 표시하는 브라우저 창을 새로 고칩니다.
3. 페이지를 위아래로 스크롤하여 탭 바의 동작을 관찰합니다. 사용자가 제목 표시줄을 지나 아래로 스크롤할 때까지 원래 위치에 유지되어야 하며, 그 시점부터 페이지 상단에 고정되어야 합니다.

축하합니다! 코스 웹사이트에 동적 탭 바 기능을 성공적으로 구현했습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.