사이트 만들기 : 카드 유형 02
사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다.
가장 먼저 공부해 볼 유형은 카드유형 입니다.
피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다.
이번 카드 만들기에는 svg파일 삽입, flex가 추가됩니다.
01. Figma로 레이아웃 잡기
Figma로 전체적인 틀을 잡아줍니다.
02. HTML
화살표 이미지를 svg파일로 받아서 코드로 넣어줍니다.
8개의 이미지를 2층으로 배치하는 구조입니다.
{
<body>
<section id="cardType02" class="card__wrap gmark section gray">
<h2>운동을 해봅시다</h2>
<p>
여러가지 운동을 해봅시다. 유산소 운동 근력 운동<br>
골고루 해봅시다
</p>
<div class="card__inner container">
<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">웨이트 트레이닝을 대표하는 3대 운동
(스쿼트, 벤치 프레스, 데드리프트) 중 하나이다....</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>
</body>
}
03. CSS
Figma에서 정해놓은 수치대로 CSS를 넣어 줍니다.
flex를 이용하여 4개씩 2층 구조를 잡아줍니다.
{
/* 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;
/* 1줄효과 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 18px;
}
.card__inner .card .desc {
font-size: 18px;
font-weight: 300;
color: #666;
line-height: 1.4;
/* 3줄효과 */
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);
background-color: #2E7EF5;
display: block;
position: absolute;
right: 0;
top: 230px;
border-radius: 5px;
}
댓글