와플앱 도구 안내

CSS 카드 생성기

  • CSS 카드 생성기는 웹페이지 제작에 필요한 코드 조각을 만들거나 정리하는 도구입니다.
  • 제목, 설명, 색상, 규칙, 디자인 옵션을 입력하면 CSS나 HTML 메타 코드를 생성합니다.
  • 생성된 코드를 확인해 사이트 헤더, 스타일, SEO 설정에 붙여 넣을 수 있습니다.
관련 도구 그라데이션 생성기 그림자 생성기 색상 팔레트 명도대비 검사 랜덤 색상 생성 색상 혼합기

CSS 카드 생성기

카드형 UI의 여백, 모서리, 그림자, 테두리, hover 효과를 조절해서 CSS를 만듭니다.

radius
shadow
padding
Image

카드 제목

설명 문구가 들어가는 카드 UI입니다. 목록, 상품, 글 미리보기에 사용할 수 있습니다.

자세히 보기

카드 내부에 이미지가 있으면 .card-media, 본문은 .card-body 클래스를 사용하면 됩니다.