Figma로만들고 싶은 카드 사이트 만들어 보기
1. 피그마에 들어가서 Frame 을 크기를 설정합니다.
2. layout grid로 가서 count 12개를 만들어 주시고 color의 투명도를 10%, margin을 380 Gutter를 20으로 해줍니다.
3. 만들고 싶은 사이트의 주제와 내용들 그리고 카드 이미지를 Shift+R을 이용해 간격을 정하고 색도 넣어줍니다.
ex)
그리고 HTML,CSS을 이용해 Figma를 통해 만들어본 사이트의 주제와 내용들 그리고 카드 이미지의 간격과 색을 설정해줍니다.
일단 코드를 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카드유형01</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
/* common */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0, 0, 0, 0.1); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* card type */
.card__wrap {
/* background-color: #ccc; */
}
.card__inner {
display: flex;
justify-content: space-between;
}
.card__inner .card {
width: 32.3333%;
background-color: #f8f8f8;
}
.card__body {
padding: 24px;
}
.card__body .title {
font-size: 24px;
margin-bottom: 15px;
}
.card__body .desc {
font-size: 16px;
color: #666;
line-height: 1.5;
margin-bottom: 15px;
}
.card__body .btn {
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='8' viewBox='0 0 32 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5C0.723858 3.5 0.5 3.72386 0.5 4C0.5 4.27614 0.723858 4.5 1 4.5V3.5ZM31.3536 4.35355C31.5488 4.15829 31.5488 3.84171 31.3536 3.64645L28.1716 0.464466C27.9763 0.269204 27.6597 0.269204 27.4645 0.464466C27.2692 0.659728 27.2692 0.976311 27.4645 1.17157L30.2929 4L27.4645 6.82843C27.2692 7.02369 27.2692 7.34027 27.4645 7.53553C27.6597 7.7308 27.9763 7.7308 28.1716 7.53553L31.3536 4.35355ZM1 4.5H31V3.5H1V4.5Z' fill='black'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
}
</style>
</head>
<body>
<section class="card__wrap section nexon">
<div class="container">
<h2 class="section__h2">쿠키 만드는 방법</h2>
<p class="section__desc">쿠키 만드는 방법은 다양하며, 재료나 조리 방법을 바꿔서 다양한 종류의 쿠키를 만들 수 있습니다. 레시피를 찾아보거나 실험을 해보면서 자신만의 맛있는 쿠키를 만들어보세요!</p>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardtype01_01.jpg" alt="오레오 쿠키">
</figure>
<div class="card__body">
<h3 class="title">오레오 쿠키</h3>
<p class="desc">코코아 가루, 밀가루, 설탕, 식용유, 코코아 크림 등으로 만든 쿠키입니다.미국의 대표적인 스낵 중 하나로 세계 각국에서 판매되고 있습니다. 대표 적인 쿠키중 하나 입니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardtype01_02.jpg" alt="오레오 쿠키">
</figure>
<div class="card__body">
<h3 class="title">마카롱</h3>
<p class="desc">아몬드 가루, 설탕, 계란 흰자 등으로 만든 프렌치 쿠키입니다.컬러와 맛을 다양하게 만들 수 있어 남녀노소 누구나 맛있게 먹어 인기가 매우 높습니다. </p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardtype01_03.jpg" alt="오레오 쿠키">
</figure>
<div class="card__body">
<h3 class="title">초코칩 쿠키</h3>
<p class="desc">설탕, 버터, 박력분, 베이킹 소다, 소금, 달걀, 바닐라 추출물, 초콜릿 칩 등으로 만든 쿠키입니다.세계적으로 가장 유명한 쿠키 중 하나입니다. 대표 적인 쿠키 중 하나입니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</div>
</section>
</body>
</html>
우선 body부분에 박스를 만들어 사이트에 들어갈 글과 링크등을 넣고 class를 이용해 각 목록에 이름을 주고 묶어 줍니다.
그리고 head부분에 자기가 바꾸고 싶은 폰트의 링크를 가져와 올려줍니다.
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}그리고 이렇게 font-familly로 가져온 폰트를 지정해 주고 font-weight를 지정해줍니다. 그러면 class가 nexon인 곳에 폰트가 적용 됩니다.
이제부터 위에서 순서대로 보도록 합시다.
·*를 이용해 전체에 margin 0 과 padding 0 을 줍니다.
·모든 a 태그에 텍스트 장식을 없애주고 색상을 검정색으로 설정합니다.
·h1~h6까지의 폰트 굵기를 노말로 설정합ㄴ지다.
·모든 img 태그에 vertical-align:top을 주어 부모 요소 내에서 상단에 위치 하도록 지정 하고 폭을 100%로 설정 합니다.
· class가 container인 곳에 폭 1160px을 주고, margin: 0 auto 를 주어 중간으로 위치 시키고, padding을 주어 간격을 정해줍니다. (주석 표시 된곳은 사이트를 만들기 전에 박스의 간격을 알기 위해 설정 처음에만 설정해주고 나중에 주석 표시를 하였습니다.)
·class가 section인 곳에 padding을 주어 간격을 정해 줍니다.
·class가 section인 곳중에서 또다른 class가 center인곳의 블록요소를 가운데로 정렬합니다.
·class가 section__h2인 곳에 font- size 50px, weight 400을 주고 margin-bottom에 30px의 간격을 준후. line-height(한줄의 높이)를 1로 설정해줍니다.
·class가 section__desc 인곳에 font-size 22px,색,margin-bottom,weight, line-height를 설정해 줍니다.
·class가 card__wrap(주석 표시 된곳은 사이트를 만들기 전에 박스의 간격을 알기 위해 설정 처음에만 설정해주고 나중에 주석 표시를 하였습니다.)
·card__inner에 display: flex를 justify-content(주축을 따라 콘텐츠르 정렬하는 방법 지정):space-between설정해 주고 콘텐츠 간에 동일한 간격을 유지하면서 주 축의 시작점과 끝점을 각각 배치합니다.
·class가 card__inner곳중에 또 다른 calss가 card인곳의 폭을 32.3333%로 지정해주고 배경색을 흰색으로 해줍니다.
·class가 card__body 인곳에 padding 24px을 줍니다.
·class가 card__body 인곳 중에서 또 다른 class가 title 인곳에 font-size 24px을 주고, margin-bottom에 15px의 간격을 줍니다.
·class가 card__body 인곳 중에 또 다른 class가 desc 인곳에 font-size 16px을 주고, 색상과 line-height1.5를 주고 margin-bottom에 15px의 간격을 줍니다.
·class가 card__body 인곳 중에 또 다른 class가 btn 인곳에 padding-right 40px을 주고, 아이콘을 가져와서 background-repeat:no-repeat,background-position:right center를주면 완성이된다.
