사이트 만들기
카드 유형03
Figma
일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다.
HTML 작성
<body>
<section id="cardType03" class="card__wrap score section">
<h2 class="blind">건축의 세계</h2>
<div class="card__inner container">
<article class="card">
<figure class="card__header">
<img src="img/card_bg03_01.jpg" alt="나무">
<figcaption>나무</figcaption>
</figure>
<div class="card__contents">
<h3>나무는 나무질로 된 줄기 또는 가지를 가진 여러해살이 식물을 통틀어 이르는 말이다. 나무는 흔히 지구에서 가장 거대한 단일 생명체라고 알려져 있다.</h3>
<p>나무가 무엇인지는 누구나 다 알지만, 막상 엄밀하게 정의되지 않는 식물의 분류이다. 다양한 나무들을 보면 나무들끼리 서로 유전자상의 공통점이 많이 있을 것 같지만, 실은 나무들은 다양한 식물들이 생존에 유리한 방향으로 진화하는 과정에서 서로 독립적으로 도달한 이상적인 형태이다.</p>
<div class="card__footer">
<h4>김나무에오<em>18 resources</em></h4>
<span><img src="img/card_bg03_icon01.png" alt=""></span>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg_03_02.jpg" alt="딸기">
<figcaption>딸기</figcaption>
</figure>
<div class="card__contents">
<h3>딸기는 쌍떡잎식물의 이판화군 장미목 장미과의 여러해살이풀 혹은 그 열매를 가리킨다.</h3>
<p>학문적 관점에 따라 딸기를 과일, 과채류(채소) 등으로 분류한다. 대한민국 법적으로는 부가가치세법 시행규칙 제24조 2항에서는 과일 또는 농업통계조사 규칙 제2조에서는 과채류 등으로 분류한다.</p>
<div class="card__footer">
<h4>김딸기에오<em>18 resources</em></h4>
<span><img src="img/card_bg03_icon02.png" alt=""></span>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg_03_03.jpg" alt="과일">
<figcaption>과일</figcaption>
</figure>
<div class="card__contents">
<h3>일반적인 정의는 "나무에서 나는 단맛이 포함된 식용 가능한 열매"다. 풀에서 수확하는 열매는 채소, 나무에서 수확하는 열매는 과일로 분류하기도 한다.</h3>
<p>계통분류학이 발달하지 않았던 시절에는 대충 단맛이 나는 열매라면 과일 취급을 했다. 그러다가 계통분류학이 정립되면서 이런 혼선을 빚게 되는 것. 서양권과 한국의 과일 분류의 차이는 언어적인 면도 무시할 수 없다.</p>
<div class="card__footer">
<h4>김종합이오<em>18 resources</em></h4>
<span><img src="img/card_bg03_icon03.png" alt=""></span>
</div>
</article>
</div>
</section>
</body>
CSS 작성
/* fonts */
@import url('https://webfontworld.github.io/score/SCoreDream.css');
.score {
font-family: "SCoreDream";
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
img {
width: 100%;
}
/* 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: 20px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* blind : 접근성때문에 눈에 보이지 않게 제작 */
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
/* cardType03 */
body {
background-color: #2254c3;
}
.card__inner {
display: flex;
}
.card__inner .card {
padding: 26px;
width: 33.3333%;
background-color: #fff;
}
.card__inner .card:nth-child(1) {
border-right: 1px solid #eee;
}
.card__inner .card:nth-child(2) {
border-right: 1px solid #eee;
}
.card {}
.card__header {
position: relative;
}
.card__header img{
border-radius: 10px;
box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
.card__header figcaption {
position: absolute;
right: 10px;
top: 10px;
padding: 6px 16px;
border-radius: 50px;
background-color: #fff;
text-align: center;
font-size: 14px;
color: #7b7b7b;
}
.card__contents h3 {
font-size: 20px;
line-height: 1.3;
margin-bottom: 10px;
/* 두줄효과 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.card__contents p {
color: #666;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
margin-bottom: 30px;
}
.card__footer {
display: flex;
justify-content: end;
}
.card__footer h4 {
text-align: right;
color: #950505;
}
.card__footer em {
display: block;
color: #666;
font-style: normal;
}
.card__footer span {
width: 40px;
height: 40px;
background-color: #000;
border-radius: 50%;
overflow: hidden;
display: block;
margin-left: 10px;
margin-top: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
결과
'사이트 만들기' 카테고리의 다른 글
| 사이트만들기 - 이미지유형 03 (9) | 2022.08.19 |
|---|---|
| 사이트 만들기 - 이미지 유형02 (9) | 2022.08.17 |
| 사이트만들기 - 이미지 유형01 (8) | 2022.08.17 |
| 사이트 만들기 - 카드 유형02 (16) | 2022.08.09 |
| 사이트 만들기 - 카드 유형01 (8) | 2022.08.08 |
댓글