“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
사이트 만들기 카드타입(cardType) 정리
오늘은 수업시간에 해본
사이트 만들기 중 카트타입 정리를 해보려고 합니다.
우선 만들어본 사이트의 완성본입니다.
피그마를 이용해 디자인 작업을 먼저 하고
그 틀을 가지고 코드를 작성합니다.
사용한 코드들
<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>
<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>
</div>
</section>
</body>
우선 <body>안에 <section>으로 "txet-wrap section center nexon"을 선언해 폰트와 센터를 맞춰주고
<div>와 class로 각각의 문서 구조를 정의해주고
<h2> class를 사용해 section명을 지정해주고 제목명 지정해주고
<div>로 class 선언 후 각각의 제목과 내용 지정
<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.center {
text-align: center;
}
.section {
padding: 120px 0;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-style: 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>
<style>선언 전에 <link>를 사용해 다운받은 폰트를 먼저 지정해주고,
<style>을 선언해 전체 *를 지정해주고
font size, margin, color등 각 css에 맞는 속성을 입력해줍니다.
| border-radius : | 모서리 둥글게 |
| tansform : | 변환 효과를 부드럽게 애니메이션화 |
| text-transform : | 텍스트 변환 속성/ 모두 대문자로 |
| cursor : | 마우스 커서 변환 |
| position : | 위치 지정 속성 |
| background-image : | 요소의 배경 이미지를 지정하는 속성 |
| justify-content : | 레이아웃 속성/ 아이템들을 양쪽 긑으로 배치 |
반응형