Softonic

CSS 카드 생성기

단계 1 / 2

카드 제목

이것은 카드의 미리보기입니다.

다음

카드는 제품 타일, 블로그 미리보기, 프로필, 대시보드 위젯 뒤에 있는 컨테이너입니다. 이 생성기는 그 컨테이너를 스타일링합니다. 배경색과 테두리 색, 모서리 반경, 안쪽 여백과 부드러운 그림자를 고르면 결과가 페이지에 바로 표시됩니다. 미리보기는 임시 콘텐츠를 보여 주므로 자신의 제목, 텍스트, 액션으로 바꾸세요. 결과물은 바로 쓸 수 있는 CSS 클래스 하나입니다.

카드 컨테이너 스타일링 방법

  1. 1

    색상 고르기

    카드의 배경색과 테두리 색을 정합니다.

  2. 2

    모양 정하기

    레이아웃에 맞는 모서리 반경과 안쪽 여백을 고릅니다.

  3. 3

    그림자 추가

    카드 아래 부드러운 그림자의 흐림과 불투명도를 조절합니다.

  4. 4

    미리 보고 복사

    라이브 미리보기를 확인하고 생성된 .card CSS를 스타일시트에 복사합니다.

생성되는 CSS의 내용

도구는 .card라는 단일 클래스를 만듭니다:

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • background는 선택한 배경색
  • border는 선택한 색의 1px 실선
  • border-radius와 padding은 선택한 px 값
  • box-shadow는 선택한 흐림과 불투명도 값을 쓰고 아래쪽으로 4px 고정 오프셋을 사용

미리보기는 임시 콘텐츠

미리보기는 비율을 가늠할 수 있도록 제목과 문단을 보여 줍니다. 도구 자체는 HTML을 출력하지 않습니다. 클래스를 자신의 컨테이너에 적용하고 그 안에 제목, 텍스트, 이미지 또는 액션 버튼을 넣으세요. 카드가 색이 있는 페이지 배경 위에 놓일 예정이라면 미리보기에서만이 아니라 그 자리에서 테두리 대비를 확인하세요.

합리적인 한계

0 미만의 값은 0으로 고정되고 그림자 불투명도는 0과 1 사이를 유지합니다. 여백이나 흐림 값이 지나치게 크면 예상 밖의 결과가 나올 수 있으니 실제 레이아웃에서 쓸 범위로 컨트롤을 유지하세요.

자신의 마크업과 조합

페이지의 최소 예:

<div class="card">
  <h3>제품 이름</h3>
  <p>간단한 설명</p>
</div>

컨테이너 스타일은 안의 내용을 제한하지 않습니다. 배경, 테두리, 간격, 그림자만 처리합니다.

자주 묻는 질문

아니요. .card CSS 클래스만 출력합니다. 제목, 텍스트, 액션을 감싸는 div나 article 같은 마크업은 직접 만드세요.

생성되는 테두리는 항상 선택한 색의 1px 실선입니다. 다른 두께나 스타일이 필요하면 CSS의 border 줄을 수정하세요.

고정 4px 세로 오프셋이 그림자를 은은하고 읽기 쉽게 유지합니다. 부드러움(흐림)과 강도(불투명도)는 사용자가 조절합니다.

아니요. 미리보기 텍스트는 표시용일 뿐입니다. 복사한 CSS에는 콘텐츠가 없고 컨테이너 스타일만 담겨 있습니다.

관련 도구

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

ASCII 이진수 변환기

ASCII 문자열을 이진수 표현으로 변환하세요. 각 문자는 8비트가 되고 공백으로 구분되어 프로토콜 추적이나 과제에 바로 붙여넣기 좋습니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

이 도구는 다른 언어로도 제공됩니다