방문자가 페이지를 아래로 스크롤할 때 머리글이 어떻게 동작할지 설정합니다. 메뉴에 계속 접근할 수 있도록 머리글을 고정하거나, 콘텐츠를 전체 화면으로 표시할 수 있도록 머리글이 사라지거나 서서히 흐려지게 한 후 방향, 거리 및 실행 시점을 세부 조정합니다.
머리글 스크롤 효과 추가 및 설정하기
페이지에 맞게 머리글 동작을 설정합니다. 방문자가 언제든 메뉴를 사용해야 한다면 머리글을 고정하고, 콘텐츠에 집중해야 한다면 화면에서 사라지도록 설정합니다.
머리글에 스크롤 효과를 추가하려면 다음 단계를 따르세요.
에디터로 이동합니다.
머리글을 클릭합니다.
액션바에서 동작 변경을 클릭합니다.
스크롤 효과를 선택합니다.
모든 디자인 옵션을 클릭해 속성 검사 패널에서 효과를 설정합니다.
속성 검사 패널에서 머리글 설정을 클릭해 섹션을 펼칩니다.
선택한 스크롤 효과를 설정합니다.
머리글이 페이지의 나머지 부분과 함께 스크롤되어 사라집니다. 이는 기본 동작이며 추가 설정은 없습니다.
방문자가 아래로 스크롤하면 머리글이 화면 밖으로 이동합니다.
겹치기: 머리글을 아래 섹션 위에 겹쳐 표시할지 선택합니다.
스크롤 시 색상: 방문자가 스크롤할 때 머리글의 배경 색상을 변경하려면 버튼을 활성화한 후 색상과 투명도를 설정합니다.
방향: 머리글이 화면에서 사라질 때 이동할 방향을 선택합니다.
거리: 머리글이 이동할 거리를 설정합니다. 100%로 설정하면 화면에서 완전히 사라집니다.
지연 시간(초): 효과가 시작되기 전까지의 대기 시간을 설정합니다.
지속 시간(초): 효과가 진행되는 시간을 설정합니다.
이징: 애니메이션이 빨라지고 느려지는 방식을 선택합니다(예: 선형(없음), 인 사인, 아웃 큐빅).
방문자가 스크롤해도 머리글이 제자리에 고정되어 항상 표시됩니다.
방문자가 아래로 스크롤하면 머리글이 서서히 사라집니다.
겹치기: 머리글을 아래 섹션 위에 겹쳐 표시할지 선택합니다.
스크롤 시 색상: 방문자가 스크롤할 때 머리글의 배경 색상을 변경하려면 버튼을 활성화한 후 색상과 투명도를 설정합니다.
지연 시간(초): 효과가 시작되기 전까지의 대기 시간을 설정합니다.
지속 시간(초): 효과가 진행되는 시간을 설정합니다.
스크롤 효과 제거하기
머리글이 다시 페이지와 함께 움직이도록 하려면 효과를 제거합니다. 머리글 디자인은 유지되며 스크롤 동작만 변경됩니다.
스크롤 효과를 제거하려면 다음 단계를 따릅니다.
- 에디터로 이동합니다.
- 머리글을 클릭합니다.
- 액션바에서 동작 변경을 클릭합니다.
- 스크롤 효과 드롭다운에서 사이트와 함께 스크롤을 선택합니다.
머리글 동작을 직접 설정합니다. 고급 설정을 활성화하면 머리글의 위치와 움직임을 각각 설정할 수 있습니다. 예를 들어 머리글을 화면 하단에 고정하거나 원하는 실행 시점과 이징을 설정할 수 있습니다.
고급 머리글 설정을 사용하려면 다음 단계를 따르세요.
에디터로 이동합니다.
머리글을 클릭합니다.
액션바에서 동작 변경을 클릭합니다.
모든 디자인 옵션을 클릭합니다.
속성 검사 패널 상단에서 추가 작업
아이콘을 클릭한 후 고급 설정 버튼을 활성화합니다.
머리글 설정을 클릭해 섹션을 펼칩니다.
위치 유형을 선택합니다.
기본: 머리글의 위치가 고정되지 않으며 페이지의 나머지 요소와 함께 스크롤되어 화면에서 사라집니다.
스티키: 방문자가 스크롤해도 머리글이 화면 가장자리에 고정됩니다.
핀 고정: 머리글이 페이지 콘텐츠 위의 화면에 고정됩니다.
선택한 위치 유형을 설정합니다.
머리글에 다음 옵션을 추가할지 선택합니다:
참고:
이용 가능한 설정은 선택한 전환 효과(이동 또는 페이드)에 따라 달라집니다.
고정 위치: 머리글을 고정할 가장자리를 상단, 하단 또는 상단 및 하단 중에서 선택합니다.
오프셋: 머리글과 해당 가장자리 사이의 거리(%)를 설정합니다.
맨 앞으로 유지: 머리글을 페이지의 다른 콘텐츠보다 앞에 표시하려면 체크박스를 선택합니다.
스크롤 시 색상: 방문자가 스크롤할 때 머리글의 배경 색상을 변경하려면 버튼을 활성화한 후 색상과 투명도를 설정합니다.
전환 효과: 방문자가 위아래로 스크롤할 때 효과를 표시하려면 버튼을 활성화합니다.
이동 또는 페이드를 선택합니다.
애니메이션을 설정합니다:
방향: 머리글이 이동할 방향을 선택합니다.
거리: 머리글이 이동할 거리(%)를 설정합니다.
이징: 애니메이션의 가속 및 감속 방식을 선택합니다(예: 선형(없음), 사인 인, 큐빅 아웃).
지연 시간(초) 및 재생 시간(초): 애니메이션의 실행 시점을 설정합니다.
참고:
이용 가능한 설정은 선택한 전환 효과(이동 또는 페이드)에 따라 달라집니다.
화면 하단에 고정: 머리글을 화면 상단이 아닌 하단에 고정하려면 버튼을 활성화합니다.
스크롤 시 색상: 방문자가 스크롤할 때 머리글의 배경 색상을 변경하려면 버튼을 활성화한 후 색상과 투명도를 설정합니다.
전환 효과: 방문자가 위아래로 스크롤할 때 효과를 표시하려면 버튼을 활성화합니다.
이동 또는 페이드를 선택합니다.
애니메이션을 설정합니다:
방향: 머리글이 이동할 방향을 선택합니다.
거리: 머리글이 이동할 거리(%)를 설정합니다.
이징: 애니메이션의 가속 및 감속 방식을 선택합니다(예: 선형(없음), 사인 인, 큐빅 아웃).
지연 시간(초) 및 재생 시간(초): 애니메이션의 실행 시점을 설정합니다.
참고:
자주 묻는 질문
아래 질문을 클릭해 머리글 스크롤 효과에 대해 자세히 알아보세요.
**'스크롤 효과'** 드롭다운이 더 이상 표시되지 않는 이유는 무엇인가요?
이 옵션은 고급 설정이 비활성화된 경우에만 이용할 수 있습니다. 옵션이 표시되지 않는다면 머리글의 고급 설정 버튼이 활성화되어 있을 수 있습니다.
Option + I 또는 Alt + I를 눌러 이전 모드로 돌아갑니다.
스크롤 효과와 **모션** 탭의 애니메이션은 어떻게 다른가요?
스크롤 효과는 페이지를 스크롤할 때 머리글이 작동하는 방식을 제어합니다. 속성 검사 패널의 **머리글 설정**에서 설정할 수 있습니다.
속성 검사 패널의 **모션** 탭에서는 머리글에 또 다른 움직임 레이어를 추가할 수 있습니다. 예를 들어 마우스오버 또는 클릭 애니메이션을 적용해 방문자의 관심을 머리글에 유도할 수 있습니다.
