728x90
- 사이트는 여러장의 페이지들이 합쳐져서 만들어집니다.
- 사이트를 구성하는 페이지들은 여러가지 타입이 있는데 대표적으로 imageType, cardType, textType, bannerType,footerType등이 있습니다.
- 오늘은 그 중에서 cardType을 한번 만들어 보겠습니다.
cardType 페이지란
- 보통 3-4개의 카드들로 구성된 페이지를 말합니다.
- 위의 모양처럼 생긴 페이지가 cardType의 대표적인 예 입니다.
See the Pen Untitled by kebab000 (@kebab000) on CodePen.
- 위의 페이지를 만들어 보겠습니다.
<!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;
}
img {
vertical-align: top;
width: 100%;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
text-decoration: none;
}
/* common */
.centainer {
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 {
height: 900px;
}
.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,%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="centainer">
<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>- 일단 완성본 코드 입니다. 이제 아래에서 하나씩 뜯어보겠습니다.
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
vertical-align: top;
width: 100%;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
text-decoration: none;
}
/* common */
.centainer {
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;
}- 가장 먼저 reset부분과 common부분입니다.
- reset 부분은 글꼴/여백등과 같이 모든 페이지에 공통적으로 들어가는 부분들입니다.
- common부분도 공통적으로 들어가는 부분이지만 reset이 페이지 설정이라면 common은 단락 설정 같은 느낌으로 class로 설정을 해주어 설정이 필요할 때 해당 요소에 class를 주어 적용시킵니다.
<section class="card__wrap section nexon">
<div class="centainer">
<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>- 다음은 cardType에만 필요한 것들입니다.
- 먼저 card__wrap이라는 섹션을 만들어주고 필요에 따라 section, nexon 라는class을 주어 글꼴등을 설정해주었습니다.
- 그 후 제목부분과 그 부연 설명을 h2 태그 와 p 태그를 사용해 적어주고
- card부분이 3개가 있으므로 일단 모두를 감싸줄 div 태그 card__inner을 만들어 주었습니다.
- 그리고 article 태그를 3개 만들어주어 3개의 구역으로 나누어 주었습니다.
- 그리고 그 안에 img 태그, h3 태그, p태그, a태그등을 사용하여 내용을 채워주었습니다.
주의‼️
| 출처가 있는 이미지를 사용하는 경우 img 태그를 figure 태그로 감싸주는 것이 좋습니다. |
/* card__type */
.card__wrap {
height: 900px;
}
.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;
}이제 내용을 채웠으니 모양을 만들어 보겠습니다.
- 먼저 card__wrap에 width 값을 주어 전체적인 틀의 크기를 잡았습니다.
- 그리고 카드들의 부모요소가 되는 card__inner에 display: flex;, justify-content: space-between; 을 주어서 카드들이 한줄로 되게해주고(display: flex;) 그 사이의 간격들을 통일해 주었습니다.(justify-content: space-between;)
- 그리고 카드들에게(.card__inner .card) 크기와 배경색을 주었습니다. 이미지가 있는 부분엔 배경이 필요없지만 그 밑에 글씨가 나오기 때문에 배경색을 넣어주었습니다.
- 그리고 카드안의 모든 내용들에게(.card__body) 여백을 주고(padding), 내용의 제목에 해당되는 부분의( .card__body .title) 폰트 사이즈(font-size: 24px;)와 제목과 아래내용 사이의 여백(margin-bottom: 15px;)을 주었습니다.
- 그리고 내용의 사이즈,색,간격, 버튼과의 여백(font-size, color, line-hight, margin-bottom)을 준 뒤 버튼을 만들어 주고 버튼의 이미지를 배경으로 해주었습니다. 그리고 background-repeat: no-repeat; 를 통해 이미지가 한번만 나오게 하고 background-position: right center; 를 통해 위치를 잡아주었습니다.
- 끝~!!!