“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
안녕하세요 o((>ω< ))o 오늘은 저번 시간에 했던 내 스타일대로 만드는 이미지 유형 페이지에 이어서
카드 유형 페이지를 만들어 보도록 하겠습니다.
(이미지 유형 바로 가기 : https://xoouxa58.tistory.com/27)
✍🏻 what i made ✍🏻
코드
<!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">
<!--reset-->
<style>
* {
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;
}
/* card type*/
.card__wrap {}
.card__inner {
display: flex;
justify-content: space-between;
}
.card__inner .card {
width: 32.333%;
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="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/cardType02_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/cardType03_01.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>
how to coding ?
😊 저번과 비슷한 코드로 상세한 설명은 https://xoouxa58.tistory.com/27 요기를 확인해 주세요 😊
css 코드 설명
| padding | 안쪽 여백을 지정할때 사용 |
| margin | 바깥 여백을 지정 |
| h1,h2,h3,h4,h5,h6 | 각 부분의 제목을 나타낼떄 주로 사용 |
| text-align | 글씨 위치를 지정(left, center, right) |
| font-family | 글꼴을 쓸때 사용 |
| font-weight | 글씨 굵기를 지정(100~700) |
| font-size | 글씨 크기를 지정 |
| line-height | 글 위아래 높낮이를 지정 |
| color | 글씨 색상을 의미 |
| background-image | 이미지를 불러옴 |
| background-repeat | 불러온 이미지의 반복 여부를 결정함 |
| background-position | 가져온 이미지의 위치를 지정함 |
✨ 감사합니다.
'HTML' 카테고리의 다른 글
| 움직이는 귀여운 강아지를 넣어 만든 퀴즈 두 번째 사이트 (5) | 2023.03.09 |
|---|---|
| 움직이는 귀여운 강아지를 넣어 만든 퀴즈 사이트 (16) | 2023.03.08 |
| 섹션<section>과 관련된 태그 한 번에 정리 (14) | 2023.02.22 |
| 텍스트 관련 요소 (14) | 2023.02.17 |
| 시멘틱 마크업, 논리적인 순서 마크업 (16) | 2023.02.17 |