Week 3 · 레이아웃과 컴포넌트 조립 Day 16 / 42

Post Card 컴포넌트 완성형

동작하는 카드를, 실제로 쓸 만한 카드로 다듬습니다

10초 핵심 요약

카드 전체를 <a>로 감싸되, 그 안에 또 다른 <a>를 넣으면 안 됩니다 (HTML 명세 위반, 브라우저마다 다르게 깨짐).
aspect-ratio로 썸네일 비율을 고정해 카드 높이가 들쭉날쭉해지는 걸 막습니다.
hover 효과는 "클릭할 수 있다"는 걸 사용자에게 알려주는 신호입니다.

<a> 안에 또 <a>를 넣으면 안 되는 이유

Day 11에서 카드 전체를 <a>로 감싸는 방법을 배웠습니다. 그런데 카드 안에 "카테고리 바로가기" 같은 링크를 추가로 넣고 싶다면 어떻게 될까요? <a> 안에 <a>를 중첩하면 HTML 명세 위반이고, 브라우저마다 클릭 이벤트가 다르게(때로는 예측 불가능하게) 처리됩니다.

해결 방법 — 카드 안쪽 링크는 <a> 대신 버튼 + JS location.href로 처리하거나, 카드 바깥 링크를 없애고 제목에만 <a>를 거는 구조로 바꿉니다. 실무에서는 후자(제목만 링크)가 훨씬 흔합니다.

    // 카드 안 링크가 필요 없다면 (Week 2 방식 유지)

    <a href={link} class="post-card">...</a>

    // 카드 안에 추가 링크가 필요하다면 (제목에만 링크)

    <article class="post-card">

      <h3><a href={link}>{title}</a></h3>

      <a href={categoryLink} class="post-card__tag">{category}</a>

    </article>

썸네일 비율 고정 — aspect-ratio

썸네일 이미지 크기가 제각각이면 카드 높이도 들쭉날쭉해집니다. aspect-ratio로 비율을 고정하면 이미지 크기와 무관하게 항상 같은 비율의 박스가 유지됩니다.

    .post-card__thumb {

      aspect-ratio: 16 / 9; /* 가로:세로 = 16:9로 항상 고정 */

      overflow: hidden;

    }

    .post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

hover 효과 — 클릭 가능함을 알리기

예상해보세요 — 카드에 마우스를 올렸을 때 아무 변화가 없다면, 사용자는 이 카드가 클릭되는지 어떻게 알 수 있을까요?

예시 포스트 제목

마우스를 카드 위에 올려보세요

    .post-card { transition: transform .2s, box-shadow .2s; }

    .post-card:hover {

      transform: translateY(-4px);

      box-shadow: 0 8px 20px rgba(0,0,0,0.08);

    }

transition이 없으면 값이 순간적으로 뚝 바뀌어 딱딱해 보입니다. 아주 작은 이동(4px)과 그림자만으로도 "이건 누를 수 있는 것"이라는 신호가 충분히 전달됩니다. 과한 애니메이션은 오히려 방해가 됩니다.

Day 16 완료 체크리스트

a 태그 중첩이 안 되는 이유와 대안(제목만 링크)을 설명할 수 있다.

aspect-ratio로 썸네일 비율을 고정했다.

hover 효과로 카드에 transform/box-shadow를 적용했다.

스스로 설명해보기 — a 태그 안에 또 다른 a 태그를 넣으면 안 되는 이유를 설명할 수 있나요?

오늘의 용어

aspect-ratio

요소의 가로세로 비율을 고정하는 CSS 속성

transition

속성 값이 바뀔 때 순간이 아니라 부드럽게 바뀌게 하는 속성