Week 2 · 컴포넌트와 빌드타임 데이터 Day 11 / 42

동적 필드 확장 — 날짜·썸네일·요약·링크

제목 하나 성공했다면, 나머지는 같은 패턴의 반복입니다

10초 핵심 요약

01

날짜 — 시맨틱하게 마크업하기

날짜는 그냥 <p>가 아니라 <time> 태그를 씁니다. 검색엔진이 "이건 날짜 정보다"라고 알아보게 해주는 시맨틱 태그입니다.

const { date } = Astro.props;
<time datetime={date}>{date}</time>
datetime 속성에는 기계가 읽는 형식, 태그 안쪽 텍스트에는 사람이 읽는 형식이 들어간다고 이해하면 됩니다. 지금은 둘 다 같은 값을 넣어도 충분합니다.
02

썸네일 — 텍스트가 아니라 URL입니다

props.thumbnail은 사진 파일 자체가 아니라, "사진이 있는 위치(URL)"가 적힌 쪽지입니다. 이 쪽지를 그냥 화면에 붙이면 주소 텍스트가 그대로 보일 뿐이고, img 태그의 src 자리에 넣어줘야 그 주소로 가서 실제 사진을 가져옵니다.

<img src={thumbnail} alt="" style="object-fit: cover;">
자주 하는 실수 — 썸네일 값을 그냥 <p>{thumbnail}</p>처럼 두면 URL 텍스트가 화면에 그대로 출력됩니다. 반드시 img src 안에 넣으세요.
03

썸네일 없는 포스트 대비하기

글에 사진을 안 넣은 포스트는 반드시 존재합니다. 이때 img 자리가 텅 비어 카드가 찌그러지는 걸 막으려면 배경색으로 미리 자리를 채워둡니다.

.post-card__thumb {
  background: linear-gradient(135deg, #ECF5F3, #F6F7F4); /* 썸네일 없을 때 보일 기본 배경 */
  aspect-ratio: 16 / 9;
}
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

object-fit은 이미지 원본 비율은 그대로 두면서, 박스 크기에 맞춰 잘리거나 채워지는 방식을 정하는 속성입니다. cover 값을 주면 박스를 꽉 채우도록 넘치는 부분만 잘라냅니다.

04

요약과 링크

<p>{summary}</p>

<a href={link} class="post-card">
  // ...(카드 전체 내용)...
</a>

카드 전체를 <a>로 감싸면 어디를 클릭해도 그 포스트로 이동합니다. 다만 <a> 안에 또 다른 <a>를 중첩하면 안 됩니다(Day 16에서 자세히).

05

오늘의 실습

Day 10의 검증 루틴(저장 → 새로고침 → 확인)을 그대로, 날짜 → 썸네일 → 요약 → 링크 순서로 하나씩 반복합니다.

안 될 때 확인하세요 썸네일이 깨진 이미지 아이콘으로 보인다면 props 이름 오타보다는, 더미 데이터에 실제로 유효한 이미지 URL을 안 넣은 경우일 확률이 높습니다.
스스로 설명해보기 — 썸네일 값을 그냥 텍스트로 출력하면 안 되고 img의 src에 넣어야 하는 이유를 설명할 수 있나요?

오늘의 용어

<time>
"이건 날짜다"를 검색엔진에 알려주는 시맨틱 태그. datetime 속성과 함께 씀
object-fit
이미지 비율은 유지하면서 박스를 꽉 채우는 속성(cover 값 사용)
fallback
데이터가 없을 때 대신 보여주는 기본 화면(대체 화면)