728x90
카드유형02
모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금, 카드형 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI 패턴입니다. 수 많은 컨텐츠를 사용자에게 제공하는 서비스가 인기를 끌면서 카드 UI에 대한 관심이 지속적으로 높아지고 있으며, 뉴스나 커머스까지도 카드형 디자인이 다양하게 적용되고 있습니다. 카드 유형 중 두 번째 카드 유형 제작 방법에 대해 알아보겠습니다.
1. Figma로 디자인하기
Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다.
2. HTML
화살표 버튼을 넣어주기 위해 svg파일로 저장 후 페이지 소스를 복사해 붙여줍니다. 웹표준 준수를 위해 aria-hidden="true"도 함께 넣어줍니다.
<section id="cardType02" class="card__wrap gmark section">
<h2>반려견 기르기</h2>
<p>
반려견을 기르는 분들을 위한 사이트 입니다.<br>
유용하고 다양한 정보들이 많이 있으니 소중히 봐주세요.
</p>
<div class="card__inner container gray">
<article class="card">
<img src="img/card_bg02_01.jpg" alt="반려견 산책">
<h3 class="tit">반려견 산책</h3>
<p class="desc">
반려견 산책시 의 준비물과 주의사항들입니다. 동네별로 산책하기 좋은 장소들 소개도 있습니다. 산책 시에는
</p>
<a href="#" class="more"><span class="ir">더보기</span></a>
</article>
<article class="card">
<img src="img/card_bg02_02.jpg" alt="반려견 산책">
<h3 class="tit">반려견 산책</h3>
<p class="desc">
반려견 산책시 의 준비물과 주의사항들입니다. 동네별로 산책하기 좋은 장소들 소개도 있습니다. 산책 시에는
</p>
<a href="#" class="more"><span class="ir">더보기</span></a>
</article>
<article class="card">
<img src="img/card_bg02_03.jpg" alt="반려견 산책">
<h3 class="tit">반려견 산책</h3>
<p class="desc">
반려견 산책시 의 준비물과 주의사항들입니다. 동네별로 산책하기 좋은 장소들 소개도 있습니다. 산책 시에는
</p>
<a href="#" class="more"><span class="ir">더보기</span></a>
</article>
<article class="card">
<img src="img/card_bg02_04.jpg" alt="반려견 산책">
<h3 class="tit">반려견 산책</h3>
<p class="desc">
반려견 산책시 의 준비물과 주의사항들입니다. 동네별로 산책하기 좋은 장소들 소개도 있습니다. 산책 시에는
</p>
<a href="#" class="more"><span class="ir">더보기</span></a>
</article>
<article class="card">
<img src="img/card_bg02_05.jpg" alt="반려견 산책">
<h3 class="tit">반려견 산책</h3>
<p class="desc">
반려견 산책시 의 준비물과 주의사항들입니다. 동네별로 산책하기 좋은 장소들 소개도 있습니다. 산책 시에는
</p>
<a href="#" class="more"><span class="ir">더보기</span></a>
</article>
<article class="card">
<img src="img/card_bg02_06.jpg" alt="반려견 산책">
<h3 class="tit">반려견 산책</h3>
<p class="desc">
반려견 산책시 의 준비물과 주의사항들입니다. 동네별로 산책하기 좋은 장소들 소개도 있습니다. 산책 시에는
</p>
<a href="#" class="more"><span class="ir">더보기</span></a>
</article>
<article class="card">
<img src="img/card_bg02_07.jpg" alt="반려견 산책">
<h3 class="tit">반려견 산책</h3>
<p class="desc">
반려견 산책시 의 준비물과 주의사항들입니다. 동네별로 산책하기 좋은 장소들 소개도 있습니다. 산책 시에는
</p>
<a href="#" class="more"><span class="ir">더보기</span></a>
</article>
<article class="card">
<img src="img/card_bg02_08.jpg" alt="반려견 산책">
<h3 class="tit">반려견 산책</h3>
<p class="desc">
반려견 산책시 의 준비물과 주의사항들입니다. 동네별로 산책하기 좋은 장소들 소개도 있습니다. 산책 시에는
</p>
<a href="#" class="more"><span class="ir">더보기</span></a>
</article>
</div>
</section>
3. CSS
Figma를 이용해 만든 디자인을 보며 css설정을 합니다. display: flex;와 justify-content: space-between;를 사용하여 정렬을 맞춰줍니다. 웹표준을 준수하기 위해 ir효과를 사용합니다.
/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmark {
font-family: 'GmarketSans';
font-weight: 500;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
min-width: 1160px;
}
.section {
padding: 120px 0;
}
.section>h2 {
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 20px;
}
.section>p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
.gray {
background-color: #f5f5f5;
}
/* ir 효과(이미지 대체 효과 == alt) */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
/* cardType02 */
.card__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card__inner .card {
width: 24%;
position: relative;
}
.card__inner .card:first-child {
margin-bottom: 50px;
}
.card__inner .card img {
margin-bottom: 20px;
border-radius: 10px;
}
.card__inner .card .tit {
font-size: 28px;
margin-bottom: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 20px;
}
.card__inner .card .desc {
font-size: 18px;
font-weight: 300;
color: #666;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.card__inner .card .more {
width: 24px;
height: 24px;
background-image: url(img/arrow.svg);
display: block;
position: absolute;
right: 0;
top: 230px;
border-radius: 5px;
}
최종결과
728x90
반응형
'웹 사이트 제작' 카테고리의 다른 글
| [웹 사이트 제작]이미지유형 03 (3) | 2022.08.19 |
|---|---|
| [웹 사이트 제작]이미지유형 02 (2) | 2022.08.17 |
| [웹 사이트 제작]이미지유형 01 (3) | 2022.08.17 |
| [웹 사이트 제작]카드유형 03 (10) | 2022.08.10 |
| [웹 사이트 제작]카드유형 01 (8) | 2022.08.08 |
댓글