사이트 만들기
카드 유형02
Figma
일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다.
HTML 작성
시멘틱 태그를 이용해서 구역에 맞게 태그를 작성합니다. 큰 틀을 만들면서 확인해 가면서 제작합니다. 화살표 모양은 svg파일을 불러와 만들었습니다.
<section id="cardType" class="card__wrap GmarketSans section">
<h2>배고픈 동물들</h2>
<p>동물들은 항상 배가고픕니다. 다양한 동물들이 어떻게 살아가는지,<br>사냥은 어떻게 하는지 알아보도록 합시다.</p>
<div class="card_inner container">
<article class="card">
<figure class="card__header">
<img src="img/animal01.jpg" alt="축구 기초 강의">
</figure>
<div class="card__body">
<h3 class="tit">북극 여우
<span aria-hidden="true" class="btn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="31" height="31" rx="5" fill="#D77474" />
<path
d="M3 14C2.44772 14 2 14.4477 2 15C2 15.5523 2.44772 16 3 16V14ZM28.7071 15.7071C29.0976 15.3166 29.0976 14.6834 28.7071 14.2929L22.3431 7.92893C21.9526 7.53841 21.3195 7.53841 20.9289 7.92893C20.5384 8.31946 20.5384 8.95262 20.9289 9.34315L26.5858 15L20.9289 20.6569C20.5384 21.0474 20.5384 21.6805 20.9289 22.0711C21.3195 22.4616 21.9526 22.4616 22.3431 22.0711L28.7071 15.7071ZM3 16H28V14H3V16Z"
fill="white" />
</svg>
</span>
</h3>
<p class="desc">북극에 사는 여우입니다. 일반적인 여우와는 다르게 북극은 항상 겨울이기에 북극곰을 따라다니며 먹고..</p>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/animal02.jpg" alt="슈팅 기초 강의">
</figure>
<div class="card__body">
<h3 class="tit">사자
<span aria-hidden="true" class="btn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="31" height="31" rx="5" fill="#D77474" />
<path
d="M3 14C2.44772 14 2 14.4477 2 15C2 15.5523 2.44772 16 3 16V14ZM28.7071 15.7071C29.0976 15.3166 29.0976 14.6834 28.7071 14.2929L22.3431 7.92893C21.9526 7.53841 21.3195 7.53841 20.9289 7.92893C20.5384 8.31946 20.5384 8.95262 20.9289 9.34315L26.5858 15L20.9289 20.6569C20.5384 21.0474 20.5384 21.6805 20.9289 22.0711C21.3195 22.4616 21.9526 22.4616 22.3431 22.0711L28.7071 15.7071ZM3 16H28V14H3V16Z"
fill="white" />
</svg>
</span>
</h3>
<p class="desc">사자는 동물의 왕이라고 하죠, 고양이과 포유류이며, 의외로 사냥에 참여하지 않고, 사냥해온 고기를..</p>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/animal03.jpg" alt="축구 기초 강의">
</figure>
<div class="card__body">
<h3 class="tit">표범
<span aria-hidden="true" class="btn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="31" height="31" rx="5" fill="#D77474" />
<path
d="M3 14C2.44772 14 2 14.4477 2 15C2 15.5523 2.44772 16 3 16V14ZM28.7071 15.7071C29.0976 15.3166 29.0976 14.6834 28.7071 14.2929L22.3431 7.92893C21.9526 7.53841 21.3195 7.53841 20.9289 7.92893C20.5384 8.31946 20.5384 8.95262 20.9289 9.34315L26.5858 15L20.9289 20.6569C20.5384 21.0474 20.5384 21.6805 20.9289 22.0711C21.3195 22.4616 21.9526 22.4616 22.3431 22.0711L28.7071 15.7071ZM3 16H28V14H3V16Z"
fill="white" />
</svg>
</span>
</h3>
<p class="desc">표범또한 고양이과 포유류입니다. 고기를 주식으로 섭취하며 고릴라들또한 위협하는 몇안되는 포식자..</p>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/animal04.jpg" alt="슈팅 기초 강의">
</figure>
<div class="card__body">
<h3 class="tit">햄스터
<span aria-hidden="true" class="btn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="31" height="31" rx="5" fill="#D77474" />
<path
d="M3 14C2.44772 14 2 14.4477 2 15C2 15.5523 2.44772 16 3 16V14ZM28.7071 15.7071C29.0976 15.3166 29.0976 14.6834 28.7071 14.2929L22.3431 7.92893C21.9526 7.53841 21.3195 7.53841 20.9289 7.92893C20.5384 8.31946 20.5384 8.95262 20.9289 9.34315L26.5858 15L20.9289 20.6569C20.5384 21.0474 20.5384 21.6805 20.9289 22.0711C21.3195 22.4616 21.9526 22.4616 22.3431 22.0711L28.7071 15.7071ZM3 16H28V14H3V16Z"
fill="white" />
</svg>
</span>
</h3>
<p class="desc">햄스터는 해바라기씨, 곡류, 야채, 과일, 곡물 플레이크, 펠릿 등 건조된 식재료가 혼합된것을 주로 먹..</p>
</div>
</article>
</div>
<div class="card_inner container">
<article class="card">
<figure class="card__header">
<img src="img/animal05.jpg" alt="축구 기초 강의">
</figure>
<div class="card__body">
<h3 class="tit">너구리
<span aria-hidden="true" class="btn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="31" height="31" rx="5" fill="#D77474" />
<path
d="M3 14C2.44772 14 2 14.4477 2 15C2 15.5523 2.44772 16 3 16V14ZM28.7071 15.7071C29.0976 15.3166 29.0976 14.6834 28.7071 14.2929L22.3431 7.92893C21.9526 7.53841 21.3195 7.53841 20.9289 7.92893C20.5384 8.31946 20.5384 8.95262 20.9289 9.34315L26.5858 15L20.9289 20.6569C20.5384 21.0474 20.5384 21.6805 20.9289 22.0711C21.3195 22.4616 21.9526 22.4616 22.3431 22.0711L28.7071 15.7071ZM3 16H28V14H3V16Z"
fill="white" />
</svg>
</span>
</h3>
<p class="desc">너구리는 잡식성으로, 곤충, 설치류, 양서류, 조류, 어류, 파충류, 연체동물, 부육, 식물 가리지 않고..</p>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/animal06.jpg" alt="드리블 기초 강의">
</figure>
<div class="card__body">
<h3 class="tit">토끼
<span aria-hidden="true" class="btn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="31" height="31" rx="5" fill="#D77474" />
<path
d="M3 14C2.44772 14 2 14.4477 2 15C2 15.5523 2.44772 16 3 16V14ZM28.7071 15.7071C29.0976 15.3166 29.0976 14.6834 28.7071 14.2929L22.3431 7.92893C21.9526 7.53841 21.3195 7.53841 20.9289 7.92893C20.5384 8.31946 20.5384 8.95262 20.9289 9.34315L26.5858 15L20.9289 20.6569C20.5384 21.0474 20.5384 21.6805 20.9289 22.0711C21.3195 22.4616 21.9526 22.4616 22.3431 22.0711L28.7071 15.7071ZM3 16H28V14H3V16Z"
fill="white" />
</svg>
</span>
</h3>
<p class="desc">물은 토끼가 살아서 가는데 가장 중요한 하나이다. 먹이 없이 몇 일간은 식분에 의지해 살 수 있다만..</p>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/animal07.jpg" alt="슈팅 기초 강의">
</figure>
<div class="card__body">
<h3 class="tit">독수리
<span aria-hidden="true" class="btn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="31" height="31" rx="5" fill="#D77474" />
<path
d="M3 14C2.44772 14 2 14.4477 2 15C2 15.5523 2.44772 16 3 16V14ZM28.7071 15.7071C29.0976 15.3166 29.0976 14.6834 28.7071 14.2929L22.3431 7.92893C21.9526 7.53841 21.3195 7.53841 20.9289 7.92893C20.5384 8.31946 20.5384 8.95262 20.9289 9.34315L26.5858 15L20.9289 20.6569C20.5384 21.0474 20.5384 21.6805 20.9289 22.0711C21.3195 22.4616 21.9526 22.4616 22.3431 22.0711L28.7071 15.7071ZM3 16H28V14H3V16Z"
fill="white" />
</svg>
</span>
</h3>
<p class="desc">독수리의 주된 먹이는 토끼와 다람쥐, 청설모와 같은 작은 포유류로, 이들의 비율이 전체 먹이의 대부..</p>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/animal08.jpg" alt="축구 기초 강의">
</figure>
<div class="card__body">
<h3 class="tit">늑대
<span aria-hidden="true" class="btn">
<svg width="31" height="31" viewBox="0 0 31 31" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="31" height="31" rx="5" fill="#D77474" />
<path
d="M3 14C2.44772 14 2 14.4477 2 15C2 15.5523 2.44772 16 3 16V14ZM28.7071 15.7071C29.0976 15.3166 29.0976 14.6834 28.7071 14.2929L22.3431 7.92893C21.9526 7.53841 21.3195 7.53841 20.9289 7.92893C20.5384 8.31946 20.5384 8.95262 20.9289 9.34315L26.5858 15L20.9289 20.6569C20.5384 21.0474 20.5384 21.6805 20.9289 22.0711C21.3195 22.4616 21.9526 22.4616 22.3431 22.0711L28.7071 15.7071ZM3 16H28V14H3V16Z"
fill="white" />
</svg>
</span>
</h3>
<p class="desc">늑대는 주로 대형 유제류를 먹이로 삼으나 이 먹이들이 부족한 경우에는 작은 동물, 가축, 썩은 고기, 쓰..</p>
</div>
</article>
</div>
</section>
CSS 작성
/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmarket {
font-family: 'GmarketSans';
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;
}
.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;
}
/* cardType */
.card_inner {
display: flex;
justify-content: space-between;
/* 양쪽 정렬 */
}
.card {
width: 25%;
padding-right: 25px;
}
.card__body {
padding-top: 20px;
}
.card__body .tit {
font-size: 24px;
margin-bottom: 10px;
position: relative;
}
.card__body .desc {
font-size: 18px;
line-height: 1.4;
color: #666;
margin-top: 11px;
margin-bottom: 50px;
font-weight: 300;
}
.card__body .btn {
position: absolute;
top: 0;
right: 0;
}
ir 효과(이미지 대체 효과 == alt)
웹 표준을 준수하기위해서 사용합니다. 스크린 리더기에는 읽혀야하고 눈에 보일 필요는 없습니다. 글씨위에 사진을 올렸을 때 만약 사진이 업로드가 되지않는다면 글씨가 보이게 설정하고, 평소에는 글씨가 보이지 않게 설정합니다.
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
글자를 한줄로 나오게 하기
글자가 한줄만 보이고싶은데, 두줄 이상인경우 한줄만 출력하고 짤리는 부분은 ... 으로 나오게 표현합니다. 세줄 이상인경우 -webkit-line-clamp로 줄 수를 설정할 수 있다.
/* 한줄효과 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 20px;
/* 세줄이상이면 ...으로 보이게 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
결과
'사이트 만들기' 카테고리의 다른 글
| 사이트만들기 - 이미지유형 03 (9) | 2022.08.19 |
|---|---|
| 사이트 만들기 - 이미지 유형02 (9) | 2022.08.17 |
| 사이트만들기 - 이미지 유형01 (8) | 2022.08.17 |
| 사이트 만들기 - 카드 유형03 (14) | 2022.08.10 |
| 사이트 만들기 - 카드 유형01 (8) | 2022.08.08 |
댓글