컴포넌트 만들때 스타일링

이 글은 예전에 따로 적어두었던 컴포넌트 만들때 스타일링 메모를 옮기면서 다시 정리한 버전입니다.. 원문이 짧은 편이라, 나중에 다시 볼 때 덜 끊기게 핵심 흐름만 조금 붙여뒀습니다.

.card {
  width: 300px; /* 고정 너비 기준 */
  max-width: 100%;
  padding: 1.5rem; /* 시스템 spacing */
  border-radius: 8px; /* px로 부드러운 둥글기 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 그림자는 px로 */
}

.card h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* 반응형 폰트 */
}

.card p {
  font-size: 1rem; /* 시스템 본문 기본 폰트 */
  margin-top: 1rem;
}

.card button {
  padding: 0.5em 1.25em; /* 글자 크기 기준 간격 */
  font-size: 0.875rem;
  border: 1px solid #ccc; /* 1px 테두리 */
}