스티키 헤더Sticky Header
한 줄 정의
스티키 헤더는 방문자가 페이지를 아래로 스크롤해도 화면 맨 위에 붙어 따라오는 헤더(로고와 메뉴가 있는 맨 위 영역)예요.
쉽게 말하면
헤더는 페이지 맨 위에 있어서, 고정하지 않으면 스크롤을 내릴 때 화면 밖으로 사라져요. 스티키 헤더는 스크롤을 내려도 화면 위쪽에 계속 붙어 있어요. 영어 sticky(끈적한)라는 말처럼 헤더가 화면 위에 달라붙어 있는 모양을 가리켜요.
언제 쓰면 좋나요
글이 긴 페이지에서 쓸모가 커요. 방문자가 페이지 중간까지 읽다가 다른 메뉴로 옮기고 싶을 때, 헤더가 고정돼 있으면 맨 위로 다시 올라가지 않고 바로 메뉴를 누를 수 있어요.
대신 고정된 헤더의 높이만큼 본문이 가려져요. 휴대폰처럼 화면이 작은 기기에서는 가려지는 비율이 더 커지니, 헤더를 고정한다면 높이를 낮게 잡아 두는 편이 좋아요. 키보드로 사이트를 쓰는 사람도 생각해야 해요. W3C 웹 접근성 지침(WCAG 2.2)에는 키보드로 고른 요소(포커스를 받은 요소)가 사이트에서 올린 다른 콘텐츠에 완전히 가려지면 안 된다는 기준이 있어요(W3C). 고정 헤더 아래로 고른 링크가 숨어 버리지 않는지 확인해 보세요.
큐샵에서는
클래식 에디터와 스튜디오 에디터 모두에서 헤더를 화면 위에 고정할 수 있어요.
헷갈리는 말
| 헷갈리는 말 | 뜻 | 스티키 헤더와 다른 점 |
|---|---|---|
| 띠배너 | 페이지 맨 위에 얇고 길게 놓여 공지나 할인 소식을 알리는 배너 | 띠배너는 소식을 알리는 배너이고, 스티키 헤더는 메뉴가 든 헤더를 화면에 고정하는 방식이에요. 띠배너가 늘 화면에 고정되는 것은 아니에요 |
| 플로팅 버튼 | 화면 구석에 떠서 스크롤을 따라오는 버튼 | 둘 다 스크롤을 따라오지만, 플로팅 버튼은 상담 · 전화 같은 버튼 몇 개이고 스티키 헤더는 메뉴 전체가 든 맨 위 영역이에요 |
같은 말
아래 이름으로도 불러요. 모두 같은 뜻이에요.
고정 헤더Sticky Header