한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
카드 유형 정리
1. 피그마에서 레이아웃틀을 제작을 완성한다.
2. visual studio code 에서 div section를 만듭니다. 그 후 head에 스타일 태그를 추가 한 뒤 리셋 값을 설정합니다.
리셋값 이란?
CSS 리셋(CSS reset)은 웹 브라우저의 기본 스타일을 초기화하고, 모든 HTML 요소가 동일한 시작점에서 시작하도록 설정하는 CSS 스타일 시트입니다.
리셋 값 폰트 를 다 설정해준다.
그 후 작업을 할 영역인 1200px의 구역을 만들기 위해 <div class="container"> 를 생성해준 뒤 h2와 p 를 이용하여
제목과 내용을 입력해주고 카드의 섹션인 artcle을 하나 더 생성 해줍니다.
카드가 3개이기 때문에 artcle 안에 div class card 를 3개 만들어 줍니다. 그 후 카드가 잘 정렬이 되게 각 클래스 값을 주고css를 추가 시켜 줍니다. 그 후 그 각 3개의 카드에도 이미지,제목,본문,버튼으로 나눠 지기 때문에 각 3개의 카드를 각각
4개의 구역으로 분할 시켜준 뒤 이미지가 들어가는 구역은 figure 태그로 감싸 줍니다. 나머지 3개의 구역도 div 태그로 감싸 준뒤 제목은 h2 본문은 p 버튼은 연결되는 a링크로 분할 해줍니다. 그 뒤 각 택스트를 입력 해준 뒤 피그마에서 만든 이미지 같이 만들기 위해 각 클래스 값을 부여해 css로 수정해준다. btn 부분의 화살표는 의미가 없는 부분이기 때문에 백그라운드 이미지로 넣어주었다.
이렇게 기존의 사용하던 리셋 값을 사용하면 웹 사이트를 만들 때 브라우저 간의 차이점을 최소화하고, 일관성 있는 레이아웃을 구현하는 데 도움이 됩니다.
코드보기
<!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>card Type01</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
/* reset */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
.mt10 {margin-top: 10px !important}
.mt20 {margin-top: 20px !important}
.mt30 {margin-top: 30px !important}
.mt40 {margin-top: 40px !important}
.mt50 {margin-top: 50px !important}
.mt60 {margin-top: 60px !important}
.mt70 {margin-top: 70px !important}
.mb10 {margin-bottom: 10px !important}
.mb20 {margin-bottom: 20px !important}
.mb30 {margin-bottom: 30px !important}
.mb40 {margin-bottom: 40px !important}
.mb50 {margin-bottom: 50px !important}
.mb60 {margin-bottom: 60px !important}
.mb70 {margin-bottom: 70px !important}
/* commmon */
.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 {}
.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");
background-repeat: no-repeat;
background-position: right center;
}
</style>
</head>
<body>
<section class="card__wrap section nexon">
<div class="container">
<h2 class="section__2">가구를 고르는 방법</h2>
<p class="section__desc">가구를 선택하기 전에 원하는 스타일을 결정합니다. 현대적인 디자인, 전통적인 디자인, 미니멀한 디자인 등 다양한 스타일이<br>
있으므로, 자신이 원하는 스타일을 먼저 결정해야 합니다.</p>
<artcle class="card__inner">
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
</artcle>
</div>
</section>
</body>
</html>