“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
카드유형
다양한 사이트 유형 중 오늘은 카드 유형을 만들어 보았습니다!
FIgma사용
만드는 방법
- 먼저 피그마를 열어서 프레임을 만들어 주며 width 값 1920 height값을 800정도 설정해 줍니다.
- layout grid 설정에서 columns로 바꿔준 후 count 12, margin 380, gutter20으로 설정해줍니다.
- R을 누르면 프레임 값이 만들어 지는데 height값 20으로 양쪽 끝 그리드를 빨간선으로 눈금을 잡아줍니다.
- 다시 프레임을 만들어서 카드 섹션이 들어갈 수 있도록 3개의 프레임을 만들어 줍니다.
- 제목사이의 간격을 150으로 잡아준후 30간격을 만들어 준 후 2줄 내용이 들어갈 수 있도록 65정도 간격을 줍니다.
- 카드 사이에 간격이 70정도 준 후 카드에 들어가는 그림을 넣어줍니다.
- 카드에 들어가는 이미지 높이는 270정도 만들어 줍니다.
- 이미지를 넣어준 후 다시한번 눈금을 체크 해주는데 24,22,20을 잡아서 카드 밑에 들어갈 소제목과 내용을 써줍니다.
- 글을 써준 후 눈금을 16,20,20,24로 잡줍니다.
제작시 유의점
- 글자를 써 줄 때 line heigth를 150%로 변경해야 합니다.
- 자세히 보기 화살표 만드는 방법 : 왼쪽 윗 상단에 네모 박스를 클릭하면 화살표를 만들 수 있습니다. width값 30, 굵기는 1로 해준 후 모양은 살짝 둥근 모양으로 바꿔줍니다.
HTML과 CSS로 제작하기
피그마로 기본 틀을 만들어 주었으니 비주얼코드에서 코딩으로 카드유형을 작업해 줍니다.
HTML CSS 이용해서 만들기
<!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;
}
/* image__type */
.image__inner {
display: flex;
justify-content: space-between;
}
.image__inner .image {
width: 570px;
height: 370px;
background-color: #ccc;
position: relative;
}
.image__body {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
text-align: left;
padding: 30px;
}
.image__body .title {
margin-bottom: 15px;
font-size: 32px;
line-height: 1;
}
.image__body .desc {
margin-bottom: 15px;
line-height: 1.5;
padding-right: 20%;
}
.image__body .btn {
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 30px;
display: inline-block;
}
/* card__type */
.card__wrap {}
.card__inner {
display: flex;
justify-content: space-between;
}
.card__inner .card {
width: 32.3333%;
background-color: #f8f8f8;
}
.card__header {}
.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%0A");
background-repeat: no-repeat;
background-position: right center;
}
</style>
</head>
<body>
<section class="card__wrap section nexon">
<div class="container">
<h2 class="section__h2">2023년 DJ Festival</h2>
<p class="section__desc">2023년 다시 돌아온 DJ Festival에 여러분을 초대합니다.
세계 최고의 DJ이들이 모여 함께 즐기는 Festival 다양한 장르를 넘나드는 DJ의 세계로 빠져보세요! </p>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01.jpg" alt="페스티벌 장소 및 일시">
</figure>
<div class="card__body">
<h3 class="title">페스티벌 장소 및 일시</h3>
<p class="desc">공연 일정은 2023년 8월에 시작합니다.장소는 잠실 종합운동장에서 개최합니다. 일정과 장소를 한번더 체크해 주시고 2023년 개최된 DJ 페스티벌에 많은 관심과 사랑 부탁드립니다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType02.jpg" alt="페스티벌 장소 및 일시">
</figure>
<div class="card__body">
<h3 class="title">예매시 주의사항</h3>
<p class="desc">본 공연은 비지정석 공연이며 한정 수량으로 판매 되고 있습니다.본 공연은 19세 이상 관람으로 제한되 있으니 19세 미만은 관람이 제한 되는 점 유의 부탁드리겠습니다.
</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType03.jpg" alt="페스티벌 장소 및 일시">
</figure>
<div class="card__body">
<h3 class="title">페스티벌 장소 및 일시</h3>
<p class="desc">공연 일정은 2023년 8월에 시작합니다.장소는 잠실 종합운동장에서 개최합니다. 일정과 장소를 한번더 체크해 주시고 2023년 개최된 DJ 페스티벌에 많은 관심과 사랑 부탁드립니다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</section>
</body>
</html>만드는 방법
- 먼저 웹 페이지에서 section 위치에 들어갈꺼기 때문에 body 태그에 section 태그를 만들어주고 class 명을 "card__wrap section nexon"으로 입력해줍니다.
- body 태그로 넘어가서 class명이 "container" 안에 자식으로 h2 태그와 p 태그를 사용해 제목과 내용을 입력 해줍니다.
- h2 태그와 p 태그에도 class 명을 "section"으로 입력하고 각각 class 명을 "section__h2", "section__desc"으로 추가로 입력 해줍니다.
- 실행을 하게 되면 부제로 쓴 설명 글자 수가 많아 글자 높이 스타일을 입력해 주기 위해 style 태그로 가서 "section__desc"에 line-height 값을 입력해줍니다.
- 다시 body 태그로 넘어가서 이미지를 넣기 위해 class명이 "container" 안에 자식으로 div 태그를 만들고 class명을 "card__inner"으로 입력해줍니다.
- 위에 입력했던 세 개의 article 태그 자식으로 figure 태그를 사용해서 class명을 "card__body"로 주고 안에 자식으로 img 링크를 주고 원하는 이미지를 넣어줍니다.
- style태그로 넘어가서 "card__inner .card"에 이미지 width값을 넣어줍니다.
- 이미지는 블록 구조라 세로로 나열되는데 이를 가로로 나열해주기 위해서 "card__inner"에 스타일로 display: flex;를 입력해 가로로 나열하게 만들주는데 이미지가 서로 붙어서 justify-content: space-between; 스타일을 사용해 "card__inner . card" class에 줬던 width값에 맞춰줍니다.
- body 태그로 넘어와서 세 개의 article 태그 자식으로 figure 태그 밑에 div 태그를 주고 class명 "card__body" 각각 만들어줍니다.
- div 태그 자식으로 이미지의 제목과 부제 설명을 주기 위해 h3 태그와 p 태그를 주고 상세한 설명을 위해 버튼식으로 a 링크 태그를 사용해 만들어줍니다.
- 각 h3,p,a링크 각 class명으로 "tittle',"desc","btn"을 줍니다.
- style 태그로 넘어가서 "card_body"에 알맞은 padding값, "card_body .title"에 알맞은 font-size, margin-bottom값, "card_body .desc"에 알맞은 font-size, color, line-height, margin-bottom값을 입력해줍니다.
- 화살표 표시는 피그마로 가서 파일을svg 유형으로 만들어서 인터넷에서 검사 후 코드를 복사해서 가져옵니다.
- 가져온 코드를 이용해 style 태그로 와서 "card_body .btn"에 background-image : url( ) 속성에 가로안에 붙여넣기 합니다.
- "card_body .btn"에 가서 bakcground-repeat 를 no-repeat 값으로 주고 background-position 를 right center 값으로 주게 되면 한번만 등장하고 텍스트의 오른쪽 가운데 정렬이 됩니다.
- 그 다음 "card_body .btn" 그대로에 알맞은 padding-rigth값을 주면 원하는 위치에 이동하게 됩니다.
결과물