“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
01. 디자인
우선 피그마로 디자인을 만들어 보았습니다.
기본적인 그리드 시스템을 칼럼을 12줄로 주고 여백은 380을 주어 콘텐츠가 들어가는 부분의 기본적인 그리드 시스템을 주었습니다. 그리드 시스템은 하나를 주게되면 한 사이트에 여러번 사용되기때문에 계속 숙지하는 것이 좋습니다.
그리드시스템 말고도 가이드 라인을 주어 자신이 어떤 요소를 어디에 넣고 여백을 얼마를 줄지 지정하는 것이 좋습니다.
02.코딩
이제 위와같은 디자인을 코딩으로 구현하고자 합니다. 우선 코드를 먼저 보여드리자면
<!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;
}
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;}
/* 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__small {
font-size: 14px;
border-radius: 50px;
background-color: #17C37B;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.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 {
height: 600px;
/* 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,%0A%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">아침이 주는 효과</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 class="btn" href="#">자세히보기</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 class="btn" href="#">자세히보기</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 class="btn" href="#">자세히보기</a>
</div>
</article>
</div>
</div>
</section>
</body>
</html>이런 식으로 코딩이 되어있습니다.
리셋(reset)
우선 리셋되는 부분을 따로 구분하여
전체를 magin과 padding을 0으로 만들었습니다.
그후
a태그에 text decoration으로 기본적으로 들어가는 색상과 효과(기본적으로 파란색으로 되는것)을 리셋시켰습니다.
h1~h6까지의 font-weight값을 nomal로 만들어 폰트 굵기를 기본으로 만들었습니다.
img는 우선 vertical-align를 top으로 주어 정렬 기준을 상단으로 주어 기본적으로 있는 여백을 없앴습니다.
클래스 mt10~70과 클래스 mb10~70 각각 magin-top과 magin bottom을 10부터 70까지로 지정하는 것을 클래스로 주어 이 클래스를 사용하며 우선적으로 사용하도록 !important을 주어 우선적으로 적용되도록 하였습니다. 이렇게 되면 이미지와 텍스트 간의 일관성을 유지할 수있습니다.
이렇게 reset을 위한 준비가 끝났습니다.
재활용하기위한 css(common)
이 후에
콘텐츠가 들어가는 클래스 container에 width값을 1160px를 주고 마진은 상하는 0으로 주고 좌우는 auto로 주었으며 과 패딩은 상하는 0을 주고 좌우에 20px를 주었습니다.
그후 nexon이라는 클래스로 font-family을 NexonLv1Gothic로 주고 weight값을 400을 주어 통일하기 위해 클래스을 만들었습니다.
그후 html에서 가장 큰(body다음으로 모두를 감싸는) section의 남은 클래스인 section 클래스에 padding을 주어 상하는 120px 좌우는 0으로 주었습니다.
그리고 클래스 section. center에 text-align를 center로 주어 section의 텍스트정렬을 가운데로 주었습니다.
secton__small을 주었지만 여기서는 사용하지 않습니다.
제목 태그에 적용하는 section__h2 클래스에
font-size는 50px으로 주어 h2를 리셋한 후 새로 값을 주었고
font-weight는 400으로 주어 굵기를 다시 주었습니다.
margin-bottom으로 아래 여백을 30px 주었고
line-height는 1을 주어 줄의 높이을 폰트 높이만큼으로 주었습니다.
section__desc는
font-size는 22px로 주고
font color는 #666으로 주어 진한 회색으로 주었습니다.
margin-bottom으로 아래 쪽 여백을 70px주었습니다.
font-weight은 폰트의 굵기를 300주었고
line-height을 1.5주어 줄 높이를 폰트 크기보다 1.5배 크게 주었습니다.
이렇게 리셋 아래부터는 section이 끝날때까지는 common이라해서 많이 사용하는 태그를 재활용할 수 있도록 하는 css를 만들었습니다.
카드콘텐츠 css
카드 콘텐츠를 한번에 묶는(부모 태그의)클래스 card__wrap 는
height은 600px 주어 높이을 설정하였습니다.
card__inner가 들어가는 부분을 할당하는 박스에
display는 flex로 주어 flex방식으로 레이아웃을 만들었고
justify-content에 space-between을 주어 양쪽 정렬을 주며 여백을 공평으로 주었습니다.
카드 하나를 할당하는 card__inner .card는
3개의 크기를 동일하게 주기위해 width을 32.3333%로 주어 크기가 넘지 않도록 하였습니다.
background-color은 #f8f8f8을 주어 연한 회색을 주었습니다.
카드의 글자을 가지는 card__body는
padding을 24px 의 여백을 주었습니다.
card__body .title는 제목을 할당하는데
font-size는 24px주고
margin-bottom은 15px을 주어 아래에 여백을 15px만큼 주었습니다.
카드의 내용을 할당하는 card__body .desc 는
font-size는 16px을 주고
color는 #666을 주어 회색의 속성을 주었습니다.
line-height는 1.5을 주어 줄 높이를 폰트보다 1.5만큼 주었고
margin-bottom는 15px을 주어 아래에 여백을 주었습니다.
카드에 자세히 보기를 할당하는 card__body .btn는
오늘 쪽 여백을 주는 padding-right을 40px정도 주었습니다.
화살표를 주기위해 피그마에서 svg로 내보내기 한 후 svg를 크롬으로 열어 코드를 보면
아래와 같은 코드가 나옵니다.
background-image: url("data:image/svg+xml,%0A%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로 주어 오른쪽 중앙으로 가게 할당합니다.
참고
코드 : https://github.com/jo0132/web2023/blob/main/site/cardType/cardType01.html
완성본 : https://jo0132.github.io/web2023/site/cardType/cardType01.html
카드 유형01
에너지 충전 아침밥은 에너지를 공급하여 하루를 시작하는데 도움을 주고 아침에 적절한 양의 탄단지와 미네랄, 비타민 등을 함유한 식사를 섭취하면, 에너지를 빠르게 생성할 수 있습니다. 자
jo0132.github.io
GitHub - jo0132/web2023: 수업시간에 배운 수업 예제입니다.
수업시간에 배운 수업 예제입니다. Contribute to jo0132/web2023 development by creating an account on GitHub.
github.com