카드 타입 사이트
카드UI란, 카드 형식으로 된 UI 요소를 말하며, 대표적으로 SNS에서 사용되는 피드(FEED)나 쇼핑몰에서 사용되는 상품 목록 등에서 활용됩니다. 카드UI 사이트에서는 이러한 카드UI를 구현하는 방법과 관련된 디자인 가이드, 코드 및 라이브러리 등을 제공하여 웹 개발자나 디자이너들이 카드UI를 보다 쉽게 구현할 수 있도록 돕습니다.
피그마
제가 만들어볼 사이트를 피그마로 디자인 한 사진입니다.
VSCode
<body>
<section class="card__wrap section nexon">
<div class="container">
<h2 class="section__h2">어떤 간식을 먹어볼까요</h2>
<p class="section__desc">어떤 간식이 야무지게 나를 만족시킬수 있을까요? 아무리 먹어도 질리지 않는 간식을 어떤 종류를 먹어야 자신을 만족시킬 수 있을까 하고 행복한 고민을 해보아요.</p>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01_01.jpg" alt="케이크는 어떠신가요?">
</figure>
<div class="card__body">
<h3 class="title">케이크는 어떠신가요?</h3>
<p class="desc">케이크는 특별한 이벤트나 기념일을 축하하기 위해 자주 사용되는 디저트입니다. 달콤하고 부드러운 케이크의 맛과 향기는 매우 매력적입니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01_02.jpg" alt="아이스크림은 어떠신가요?">
</figure>
<div class="card__body">
<h3 class="title">아이스크림은 어떠신가요?</h3>
<p class="desc">아이스크림은 시원하고 달콤하며 부드러운 식감이 매력적입니다. 바닐라, 초콜릿, 딸기, 카라멜, 민트 등 각기 다른 맛이 있어서 취향에 맞게 선택할 수 있습니다.</p>
<a href="#" class=" btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01_03.jpg" alt="식사는 없어. 배고파도">
</figure>
<div class="card__body">
<h3 class="title">식사는 없어. 배고파도</h3>
<p class="desc">쿠키는 작고 손쉽게 먹을 수 있는 디저트로, 간식으로 자주 즐겨먹습니다. 달콤하고 부드러운 식감이 매력적이며, 취향에 따라 초콜릿 칩, 땅콩 버터, 오트밀 등 다양한 재료를 다양합니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</div>
</div>
</section>
</body>
많은 코드들이 겹겹이 쌓여 있습니다~
한번 이해하기 쉽게 그림을 준비해봤습니다.
가장 먼저 card_wrap으로 시작합니다.
그 바로 container로 틀을 잡아주고 그 틀안에 secion__h2 제목을 붙여주고
section__desc 부제목 느낌으로 내용이 또 들어갑니다.
그 다음 카드사진과 카드 설명칸이 들어가야 합니다.
card__inner로 카드사진과 설명칸이 들어갈 자리를 틀을 잡아줍니다.
사진들이 블록구조여서 세로로 세워져 있었지만
card__inner쪽에 display: flex를 줘서 가로로 정렬이 되게끔 만들었습니다.
디테일하진 않지만 대충 이런 형식으로 있구나~하고 이해하시면 될거같습니다.
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color:#000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
/* common */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0,0,0,0.1); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__h2 {
font-size: 50px;
color: #000;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* card__type */
.card__wrap {
/* background-color: #ccc; */
}
.card__inner {
display: flex;
justify-content: space-between;
}
.card__inner .card {
width: 32.3333%;
background-color: #F8F8F8;
}
.card__header {}
.card__body {
padding: 24px;
}
.card__body .title {
font-size: 24px;
margin-bottom: 15px;
}
.card__body .desc{
font-size: 16px;
color: #666;
line-height: 1.5;
margin-bottom: 15px;
}
.card__body .btn{
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='8' viewBox='0 0 32 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5C0.723858 3.5 0.5 3.72386 0.5 4C0.5 4.27614 0.723858 4.5 1 4.5V3.5ZM31.3536 4.35355C31.5488 4.15829 31.5488 3.84171 31.3536 3.64645L28.1716 0.464466C27.9763 0.269204 27.6597 0.269204 27.4645 0.464466C27.2692 0.659728 27.2692 0.976311 27.4645 1.17157L30.2929 4L27.4645 6.82843C27.2692 7.02369 27.2692 7.34027 27.4645 7.53553C27.6597 7.7308 27.9763 7.7308 28.1716 7.53553L31.3536 4.35355ZM1 4.5H31V3.5H1V4.5Z' fill='black'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: right center;
}
reset ~ section 부분까진 다른 형식 사이트 제작시에도 공용으로 사용해 주는 부분입니다.
card__inner쪽에 display: flex를 줘서 가로로 정렬이 되게끔 만들었고,
justify-content: space-between를 줘서 사진 세장이 나란히 좌우로 퍼질수 있게 속성을 준 모습입니다.
.card__inner .card 쪽에 width값 32.3333%를 줘서 나란히 퍼트려줬습니다.
완성된 사이트입니다~
눌러 보시면 피그마로도 연결이 되네요! 신기해라.