인프런 커뮤니티 질문&답변

components/ui/card.tsx

function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card"
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className
      )}
      {...props}
    />
  )
}

여기서 py-6 부분이 카으 내에서 상단 여백을 생성하고 있네요. 저도 아무래도 이 부분이 너무 안예뻐서 py-6 부분을 제거했습니다

다만, 이렇게 하면 모든 Card 전체에 대해서 영향을 주게 되므로, 옆의 태그 목록 등도 전부 이상해집니다. 블로그 카드 목록에서만 적용을 하고 싶다면

components/features/blog/PostCard.tsx 파일에서

return 부분에서 명시적으로 py-0 이라는 className 을 추가해서 여기서만 py 를 0 으로 명시적ㅇ로 변경을 해주면 됩니다

<Card className="py-0 group bg-card/50 border-border/40 hover:border-primary/20 overflow-hidden border backdrop-blur-sm transition-all duration-300 hover:scale-[1.02] hover:shadow-lg">

Shadcnui가 업데이트 되면서 강의 시점과 스타일이 조금 변경될 수 있어서요.

커스텀 스타일과 기본 스타일의 충돌로 여백이 발생할 수 있습니다.

개발자 도구로 요소검사 후에 스타일을 디버깅 후 해결하면 될 것 같아요!

안녕하세요, 인프런 AI 인턴입니다. 주병규님.

블로그의 PostCard 구성에서 이미지 상단에 여백이 생기는 문제는 종종 CSS 스타일 속성과 관련이 있습니다. ‘object-cover’ 스타일을 제대로 적용했더라도 예상치 못한 여백이 생기는 경우가 있습니다. 이런 문제를 해결하기 위해 고려할 수 있는 몇 가지 사항은 다음과 같습니다.

문제 원인 및 해결 방법

1. 부모 div의 스타일 속성:

   • 이미지가 감싸고 있는 부모 div 요소가 제대로 설정되어 있는지 확인하세요. position이나 margin, padding과 같은 스타일 속성이 이미지 여백에 영향을 미칠 수 있습니다. div에 추가적인 스타일이 있는지 확인해 보세요.
     

2. 이미지 태그의 스타일 속성:

   • 이미지 태그가 다른 스타일에 의해 덮어쓰여지지 않았는지 확인해 보세요. 특히, margin, display, position 속성이 예상치 못한 여백을 발생시킬 수 있습니다. 예를 들어, margin-top 속성이 암묵적으로 설정되어 있을 수 있습니다.
     

3. 브라우저 스타일 시트:

   • 모든 브라우저는 기본 스타일 시트가 있으며, 이로 인해 예기치 못한 여백이 생길 수 있습니다. 이를 방지하기 위해 전역 스타일로 * { margin: 0; padding: 0; box-sizing: border-box; } 와 같은 CSS 리셋을 적용해 보세요.
     

4. 외부 CSS or 라이브러리:

   • 혹시 외부 CSS 라이브러리나, 다른 스타일 파일들이 프로젝트에 영향주는지 확인하세요. 이런 라이브러리가 object-cover 속성을 덮어쓸 수 있습니다.
     

참고 자료

문제를 명확하게 이해하고 해결하기 위해 CSS ‘object-fit’ 속성에 대한 MDN 웹 문서를 참고하시면 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.