[케이테마 v2] 풀페이지 스크롤과 섹션별 헤더 설정하기

예상 읽기 시간:1분 9 조회수

적용 대상	케이테마 v2 풀페이지 지원 버전
작업 위치	페이지 편집 → KTheme 랜딩 페이지 설정 / 외모 → 사용자 정의하기 → 헤더
권장 작업 시간	15~25분

풀페이지 화면에서는 한 번의 휠 또는 트랙패드 동작으로 다음 섹션으로 이동합니다. 스크롤 중에도 메뉴가 보이게 하려면 스티키 헤더를 켜고, 헤더가 현재 섹션 위에 투명하게 겹치도록 설정합니다.

시작하기 전에

준비 항목	권장 기준
섹션 구성	Elementor 최상위 컨테이너를 화면 순서대로 배치
섹션 높이	PC 기준 최소 높이 100vh
어두운 섹션	사용자가 위에서부터 번호를 확인해 기록
모바일	일반 스크롤과 메뉴 가독성 별도 확인

WordPress 관리자에서 대상 페이지를 편집합니다. 오른쪽의 KTheme 랜딩 페이지 설정에서 페이지 스크롤 → GSAP 풀페이지를 선택합니다. 점 형태의 섹션 이동 메뉴가 필요하면 GSAP 섹션 내비게이션 → 표시를 선택합니다.

Elementor에서 각 화면이 되는 최상위 컨테이너의 CSS 클래스에 ktheme-gsap-section을 입력합니다. 내부 컨테이너가 아니라 화면 하나를 감싸는 가장 바깥 컨테이너에만 입력하세요.

외모 → 사용자 정의하기 → 헤더 → 헤더 스타일로 이동합니다. 첫 페이지에서 별도 헤더 스타일을 사용한다면 다음 조합을 권장합니다.

relative는 헤더가 문서 흐름의 별도 흰색 영역을 차지할 수 있습니다. 풀페이지에서 섹션과 헤더를 겹치려면 absolute를 사용합니다.

외모 → 사용자 정의하기 → 헤더 → 스티키 헤더에서 다음과 같이 설정합니다.

이 조합은 헤더 배경을 투명하게 유지하면서 현재 섹션 위에 메뉴를 표시합니다. 흰색 고정 배경을 강제로 사용하지 않으므로 밝은 섹션과 어두운 섹션 사이를 이동할 때 섹션 자체의 분위기가 유지됩니다.

페이지 편집 화면의 KTheme 랜딩 페이지 설정 → 어두운 배경 섹션 번호에 흰색 메뉴와 흰색 로고가 필요한 섹션 번호를 입력합니다.

설정 후 1번부터 마지막 섹션까지 이동하며 메뉴, 로고, 검색 아이콘이 배경과 충분히 대비되는지 확인합니다.

같은 스티키 헤더 구역의 헤더 하단그림자/선 표시여부에서 원하는 효과를 선택합니다.

투명 헤더에서는 강한 그림자가 섹션 디자인을 가릴 수 있습니다. 먼저 비활성화 또는 보더로 확인한 뒤 필요할 때만 쉐도우를 사용하세요.

설정을 바꾼 뒤에는 발행하고 캐시를 비운 다음 비로그인 창에서도 다시 확인합니다.