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

gywjd0630

작성한 질문수

반응형 웹사이트 포트폴리오(Architecture Agency)

메인페이지 레이아웃 모바일 변환 #07(Project Section)

네비게이션 메뉴 눌렀을 때 페이지의 처음부터 보이게 하는 방법

작성

244

안녕하세요, 이번 강의 마지막 부분에 전반적으로 모바일버전이 잘 작동하는지 확인하시는 과정에서 네비게이션 메뉴를 눌러 각 페이지로 이동하는지도 보여주셨는데요, 이 과정에서 상단에 고정되어 있는 header가 페이지의 내용을 일부 가리게 되는 현상이 보입니다. 이를 조정해서 페이지의 전체가 보이도록 하는 방법이 있을까요?

HTML/CSS 웹 디자인 jquery 반응형 웹

답변 2

alvinlog

앵커에서 헤더가 fixed일때 스크롤 위치를 변경하고 싶어서 고민을 해봤습니다.

원하는 타겟을(여기서는 cd-section 이겠죠?) margin-top: -○○px 헤더 높이만큼 올리고, 다시 padding-top:○○px 다시 원래 자리로 돌리면 잘 됩니다!

.cd-section {
  height: 100vh;
  margin-top: -60px;
  padding-top: 60px;
}

코딩웍스(Coding Works)

지식공유자

상단부분을 말하시는거면 헤더가 fixed 되어 있어서 헤더가 섹션의 상단 컨텐츠를 가린다는 말씀 같아요.

그런 부분이 걸리시면 모바일에서 섹션의 상하 패딩을 좀 더 여유있게 주시는 방법이 있습니다.

그런데 네비게이션을 사용하지 않고 스크롤하는 경우 섹션의 상하 패딩이 너무 크면 부담스러울 수도 있어요.

gywjd0630

작성한 질문수

전체 Q&A

질문하기