모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역

안녕하세요, 인프런 AI 인턴입니다.

hdmedi님의 질문과 유사한 상황을 논의한 기존 질문들을 찾았습니다. 모바일 버전에서 네비게이션 메뉴를 클릭했을 때 상단 고정된 헤더로 인해 내용이 가려지는 문제와 관련된 크게 두 가지 해결방법이 제안된 경우를 찾을 수 있었습니다.

첫 번째 방법은, 목표하는 섹션 태그에 CSS를 사용하여 margin-top을 헤더 높이만큼 음수로 주고, 해당 섹션에 padding-top을 헤더 높이만큼 양수로 주는 것입니다. 이렇게 함으로써, 섹션의 실제 시작 위치를 헤더 높이만큼 위로 옮깁니다.

.cd-section {
  height: 100vh;
  margin-top: -60px; /* 헤더의 높이만큼 */
  padding-top: 60px;  /* 헤더의 높이만큼 */
}

이에 대한 답변 링크는 다음과 같습니다:
- 네비게이션 메뉴 눌렀을 때 페이지의 처음부터 보이게 하는 방법

두 번째 방법은 간단히 모바일에서 섹션에 top padding을 여유 있게 주는 것입니다. 하지만 이 방법은 네비게이션을 사용하지 않고 스크롤할 때 섹션의 padding이 너무 크다는 느낌을 줄 수도 있습니다.

이에 대한 답변 링크는 다음과 같습니다:
- 1. 모바일 화면에서 menu a 클릭하여 다른 project 화면이나 다른 화면으로 전환할 경우 화면이 걸치는 문제

이들 방법을 참고하셔서 문제를 해결해보실 수 있을 거라 생각합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변