CSS Academy · 강의

CSS 사용자 지정 속성을 사용한 카드 구성 요소

쉬운 테마 설정을 위해 CSS 사용자 지정 속성만으로 구동되는 유연한 카드 구성 요소를 만듭니다.

CSS 사용자 지정 속성을 사용한 카드 구성 요소은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

디자인 목표

카드 컴포넌트는 콘텐츠를 담는 독립적인 컨테이너입니다. 디자인 목표는 간격 토큰을 사용한 일관된 패딩, 별칭 토큰을 사용한 테마 적용 가능한 색상, JS 없이 반응형 크기 조정, CSS 사용자 지정 속성을 통한 변형 지원(입체형, 테두리형, 평면형)입니다.

기본 카드 구조

구성 가능한 값에는 CSS 사용자 지정 속성을 사용하고 단일 .card 클래스를 사용하십시오. 내부 요소(헤더, 본문, 푸터)는 카드의 범위에서 상속됩니다. 이를 통해 코드베이스 전체의 카드 인스턴스 간 스타일 편차를 제한할 수 있습니다.

<div class="card">
  <h3>Card Title</h3>
  <p>Card content styled via custom properties.</p>
</div>

변형 클래스

별도의 규칙 집합을 작성하는 대신 변형 클래스로 카드 수준의 사용자 지정 속성을 재정의하십시오. 변형 클래스는 변경된 변수만 다시 정의하면 되므로, 변경되지 않은 속성은 반복 없이 기본값을 자동으로 상속합니다.

<div class="card card--elevated">
  <p>Elevated variant</p>
</div>
<div class="card card--outlined">
  <p>Outlined variant</p>
</div>

카드 테마 적용

상위 테마 클래스가 --color-surface를 변경하면 해당 테마 안의 모든 카드가 배경을 자동으로 업데이트합니다. 별도의 카드별 테마 재정의 코드는 필요하지 않으며, 별칭 토큰 시스템이 이 작업을 투명하게 처리합니다.

반응형 카드 패딩

유동적인 패딩에는 사용자 지정 속성 재정의와 함께 clamp()를 사용합니다: --card-padding: clamp(1rem, 4vw, 2rem). 더 큰 뷰포트에는 더 넉넉한 패딩을 적용하고 작은 뷰포트에는 최소한의 패딩을 적용하며, 이 모든 설정을 하나의 토큰 정의로 제어합니다.

카드 그리드 레이아웃

CSS Grid의 auto-fill과 minmax를 사용하는 카드 그리드는 스스로 정리되는 레이아웃을 만듭니다: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). 카드는 사용 가능한 공간을 채우고 미디어 쿼리 중단점 없이 자동으로 줄바꿈됩니다.

이미지 가로세로 비율

이미지 컨테이너에 aspect-ratio: 16/9를 적용하여 카드 이미지의 가로세로 비율을 일관되게 유지합니다. object-fit: cover를 사용하면 이미지가 컨테이너를 채우므로 원본 이미지 크기와 관계없이 카드 높이가 균일해집니다.

상호 작용 상태

마우스 오버 및 내부 포커스 상태에서 카드를 약간 들어 올립니다: transform: translateY(-2px)와 증가된 box-shadow를 사용합니다. 전환 효과에서 변환과 상자 그림자에 각각 200ms ease를 지정하여 부드럽고 합성기 친화적인 상호 작용 피드백을 구현합니다.

접근 가능한 카드 링크

링크를 확장하여 카드 전체를 클릭할 수 있게 합니다. 카드에는 상대 위치를 지정하고 기본 링크에는 inset: 0과 함께 절대 위치를 지정합니다. 화면 낭독기는 링크 텍스트를 읽고, 오버레이가 시각적으로 카드를 덮어 마우스 사용자가 카드 전체를 클릭할 수 있게 합니다.

로딩 상태

CSS 애니메이션을 사용한 스켈레톤 반짝임 효과로 콘텐츠를 대체하는 .card--loading 변형을 추가합니다: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to))에 background-size: 200%와 animation: shimmer 1.5s infinite를 적용하여 애니메이션을 실행합니다.

어두운 모드 카드

어두운 모드에서는 --color-surface 토큰이 밝은 색상에서 어두운 색상으로 자동 변경됩니다. 높이감에 상자 그림자를 사용하는 카드의 경우 어두운 배경에서 그림자가 사라지므로, 어두운 모드에서도 높이감을 인식할 수 있도록 은은한 테두리를 추가하거나 표면 색상의 대비를 높입니다.

지식 확인

CSS 사용자 지정 속성을 사용하면 전체 규칙 집합을 중복하지 않고 카드 변형을 어떻게 만들 수 있습니까?

요약

CSS 사용자 지정 속성으로 카드 구성 요소를 만들면 유연하고 테마를 적용할 수 있으며 변형을 지원하는 사용자 인터페이스 기본 요소를 구현할 수 있습니다. 기본 변수는 기본값을 설정하고, 변형 클래스는 필요한 부분만 재정의하며, 테마 클래스는 전역적으로 재정의합니다. 반응형 크기 조정, 접근 가능한 링크, 로딩 상태를 함께 사용하면 이 패턴을 디자인 시스템 전반에 깔끔하게 확장할 수 있습니다.

자주 묻는 질문

“CSS 사용자 지정 속성을 사용한 카드 구성 요소” 강의는 무료인가요?

네 — “CSS 사용자 지정 속성을 사용한 카드 구성 요소” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“CSS 사용자 지정 속성을 사용한 카드 구성 요소”에서 뭘 배우나요?

쉬운 테마 설정을 위해 CSS 사용자 지정 속성만으로 구동되는 유연한 카드 구성 요소를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“CSS 사용자 지정 속성을 사용한 카드 구성 요소” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기