사이트 만들기 : 카드 유형 01
사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다.
가장 먼저 공부해 볼 유형은 카드유형 입니다.
피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다.
01. Figma로 레이아웃 잡기
Figma로 전체적인 틀을 잡아줍니다.
02. HTML
웹 표준을 준수하기 위해 시맨틱 태그를 사용합니다. 시맨틱 태그를 사용한 후에는 제목태그를 사용해야 합니다.
{
<body>
<section id="cardType01"class="card__wrap nexon section">
<h2>닭의 쓰임새</h2>
<p>닭은 많은것을 나눠주는 유익한 생물 입니다.</p>
<div class="card__inner container">
<article class="card">
<figure class="card__header">
<img src="img/card_bg01_01.jpg" alt="치킨">
</figure>
<div class="card__body">
<h3 class="tit">치킨</h3>
<p class="desc">일반적인 닭튀김을 말하며 닭을 잘라 구운 것도 치킨이라고는 한다. 치킨 반죽을 어떻게 만들고 닭을 어떻게 튀기느냐에 따라서 맛의 차이가 상당하다. </p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure>
<img src="img/card_bg01_02.jpg" alt="달걀">
</figure>
<div class="card__body">
<h3 class="tit">달걀</h3>
<p class="desc">조리법에 따라 그 형태와 식감 등이 달라지기 때문에 특유의 약한 맛과 다양하게 뽑아낼 수 있는 비주얼이 여러 요리에 잘 어우러져 다양한 요리에 들어간다.</p>
<a class="btn" href="/">
더 자세히 보기
<!-- 읽지않고 넘어감 -->
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure>
<img src="img/card_bg01_03.jpg" alt="삼계탕">
</figure>
<div class="card__body">
<h3 class="tit">삼계탕</h3>
<p class="desc">삼계탕은 어린 닭에다가 찹쌀, 인삼, 대추, 밤, 황기 등을 넣고 푹 고아서 만든 닭 요리다. 한국의 대표적인 보양식으로 유명하며, 특히 복날에 주로 먹는 여름 보양식이다.</p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
</div>
</section>
</body>
}
03. CSS
Figma에서 정해놓은 수치대로 CSS를 넣어 줍니다.
{
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.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;
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;
}
/* cardType */
.card__inner {
display: flex;
justify-content: space-between;
}
.card {
width: 32%;
background-color: #f5f5f5;
}
.card__body {
padding: 24px;
}
.card__body .tit {
font-size: 24px;
margin-bottom: 10px;
/* 1줄효과 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.card__body .desc {
font-size: 18px;
line-height: 1.4;
color: #666;
margin-bottom: 20px;
font-weight: 300;
/* 4줄효과 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
}
댓글