728x90
카드유형01
모바일 사용자가 폭발적으로 증가하면서 반응형 디자인이 어쩌면 필수적으로 적용되고 있는 지금, 카드형 디자인은 웹과 모바일 모두 화면크기에 맞게 최적화되는 모듈식 UI 패턴입니다. 수 많은 컨텐츠를 사용자에게 제공하는 서비스가 인기를 끌면서 카드 UI에 대한 관심이 지속적으로 높아지고 있으며, 뉴스나 커머스까지도 카드형 디자인이 다양하게 적용되고 있습니다. 카드 유형 중 첫 번째 카드 유형 제작 방법에 대해 알아보겠습니다.
1. Figma로 디자인하기
Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 각 구역간의 수치는 정확히 해주는게 중요합니다.
2. HTML
웹표준 준수를 위해 시맨틱 태그를 사용합니다. section태그는 보통 제목태그를 포함합니다. 내용을 한꺼번에 넣는 것이 아니라, 하나씩 확인하면서 진행하면 실수와 시간을 줄일 수 있습니다.
<section id="cardType" class="card__wrap nexon section"> //폰트 편하게 설정하기 위해 클래스 지정
<h2>필라테스 강의</h2>
<p>각각의 기구에 맞는 필라테스 운동 강의입니다.</p>
<div class="card__inner container">
<article class="card"> //카드 영역을 표시하기 위해 article태그 사용
//fiture 태그 사용하여 image 삽입. 이미지 삽입 시 정확한 경로가 중요 !
<figure class="card__header">
<img src="img/card_bg01.jpg" alt="매트 운동"> //alt는 이미지가 나타나지 않았을 때 나오는 설명
</figure>
<div class="card__body">
<h3 class="tit">매트 운동</h3>
<p class="desc">소도구를 이용한 매트운동입니다. 아령을 이용하여 여러 가지 근육을 움직이며 운동을 할 수 있습니다. 요가매트와 1kg 아령을 준비해 주세요.</p>
<a class="btn" href="/">더 자세히 보기</a> //더 자세히 보기를 클릭했을 때 링크가 연결되어야 하므로 button태그가 아닌 a태그 사용
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg02.jpg" alt="리포머 운동">
</figure>
<div class="card__body">
<h3 class="tit">리포머 운동</h3>
<p class="desc">리포머를 이용한 필라테스 운동입니다. 각각의 무게별로 스프링이 있으며, 자신에게 맞게 스프링을 선택하시면 됩니다. 다칠 위험이 있으니 주의하여 주세요.</p>
<a class="btn" href="/">더 자세히 보기</a>
</div>
</article>
<article class="card">
<figure>
<img src="img/card_bg03.jpg" alt="캐딜락 운동">
</figure>
<div class="card__body">
<h3 class="tit">캐딜락 운동</h3>
<p class="desc">캐딜락을 이용한 필라테스 운동입니다. 다양한 동작을 할 수 있는 기구이지만, 떨어질 위험이 있으니 주의하여 주세요. 캐딜락을 이용한 코어 운동을
알아보겠습니다.</p>
<a class="btn" href="/">더 자세히 보기</a>
</div>
</article>
</div>
</section>
3. CSS
Figma를 이용해 만든 디자인을 보며 css설정을 합니다. display: flex;와 justify-content: space-between;를 사용하여 정렬을 맞춰줍니다.
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); //import 방식으로 폰트 설정
//폰트만 따로 클래스 지정하여 설정
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* 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;
}
.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;
}
/* cardType */
.card__inner {
display: flex;
justify-content: space-between;
}
.card {
width: 32%;
background: #f5f5f5;
}
.card__body {
padding: 24px;
}
.card__body .tit {
font-size: 24px;
margin-bottom: 10px;
}
.card__body .desc {
font-size: 18px;
line-height: 1.4;
color: #666;
margin-bottom: 20px;
font-weight: 300;
}
최종결과
728x90
반응형
'웹 사이트 제작' 카테고리의 다른 글
| [웹 사이트 제작]이미지유형 03 (3) | 2022.08.19 |
|---|---|
| [웹 사이트 제작]이미지유형 02 (2) | 2022.08.17 |
| [웹 사이트 제작]이미지유형 01 (3) | 2022.08.17 |
| [웹 사이트 제작]카드유형 03 (10) | 2022.08.10 |
| [웹 사이트 제작]카드유형 02 (6) | 2022.08.09 |
댓글