Week 3 · 레이아웃과 컴포넌트 조립
Day 17 / 42
Sidebar 컴포넌트
스크롤해도 따라오는 영역을 만듭니다
10초 핵심 요약
- Sidebar도 카테고리 목록·최근 글 데이터를 props로 받는 독립 컴포넌트입니다 (Day 9-10과 같은 패턴).
position: sticky로 스크롤해도 일정 지점까지 화면에 붙어있게 만듭니다.- sticky는 부모 요소의 높이 안에서만 작동합니다 — 부모가 너무 짧으면 sticky 효과가 안 보입니다.
01
Sidebar 컴포넌트 구조
카테고리 목록과 최근 글 목록을 받아 렌더링하는 컴포넌트입니다. 본문과 간접적으로만 관련된 보조 콘텐츠이므로 aside 태그로 감쌉니다. Day 10에서 배운 .map()이 여기서도 그대로 쓰입니다.
// src/components/Sidebar.astro
---
const { categories, recentPosts } = Astro.
props;
---
<aside
class=
"sidebar">
<section>
<h4>카테고리</h4>
<ul>
{categories.
map((c) => <li><a href={c.link}>{c.name}</a></li>)}
</ul>
</section>
<section>
<h4>최근 글</h4>
<ul>
{recentPosts.
map((p) => <li><a href={p.link}>{p.title}</a></li>)}
</ul>
</section>
</aside>
사용하는 쪽(index.astro)에서는 다른 컴포넌트와 똑같이 props를 넘기기만 하면 됩니다.
02
position: sticky — 스크롤을 따라오는 영역
예상해보세요 — 본문은 길고 사이드바는 짧을 때, 아무 설정 없이 두면 스크롤을 내리는 순간 사이드바는 어떻게 될까요?
본문(스크롤 됨)
아래로 스크롤 하세요...
...
...
...끝
사이드바
.sidebar {
position: sticky;
top: 20px; /* 화면 위에서 20px 지점에서 멈춤 */
align-self: start; /* Grid/Flex 부모 안에서 늘어나지 않게 */
}
흔한 함정 — sticky는 부모 요소의 높이 범위 안에서만 붙어있습니다. 부모(보통 본문+사이드바를 감싼 Grid 컨테이너)가 사이드바보다 짧으면 sticky 효과가 전혀 안 보입니다.
03
Day 17 완료 체크리스트
categories, recentPosts를 props로 받는 Sidebar 컴포넌트를 만들었다.
position: sticky로 스크롤해도 붙어있는 사이드바를 만들어봤다.
sticky가 부모 높이에 의존한다는 함정을 이해했다.
스스로 설명해보기 — position: sticky가 부모 요소의 높이에 의존한다는 게 무슨 뜻인지 설명할 수 있나요?
오늘의 용어
position: sticky
스크롤 중 지정 지점에 도달하면 화면에 붙는 위치 지정 방식
aside
본문과 간접적으로만 관련된 보조 콘텐츠를 담는 시맨틱 태그