728x90
반응형
카드 유형 페이지 만들기
피그마를 이용하여 만들고 싶은 페이지를 작업을 해주었습니다.
코드
<!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>
</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/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>body 안에 html 태그들을 사용하여 각 영역별 보여줄 정보들을 정의합니다.
영역마다 class명을 주어 보다 효과적으로 css를 적용시킬 수 있습니다.
밑에는 각 html 태그마다 어떠한 css효과를 주었는지 정의해두었습니다.
<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%;
color: #000;
}
/* 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.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 안에 사용할 폰트를 링크 태그를 통해 호출하여 사용합니다.
style을 영역을 선언 후, 그 안에 html 태그 및 class명에 따른 스타일(css)효과를 작성합니다.
(COMMON)공통CSS
- * 를 사용해 전체화면에 margin 0과 padding 0 효과를 줍니다.
- a 태그에는 텍스트 장식과 컬러 효과를 정의해줍니다.
- h1~h6태그에는 폰트 굵기를 정의해줍니다.
- img 태그에는 수직정렬, width, 컬러 값을 정의해줍니다.
해당 class명을 가진 html태그에 css효과 부여
- container class를 가진 태그에는 width, margin, padding 값을 공통적으로 부여합니다.
- nexon class를 가진 태그에는 폰트와 폰트굵기를 부여합니다.
- section class를 가진 태그에는 padding값을 부여합니다.
- section과 center 두 class 동시에 가진 태그에는 text정렬 값을 부여합니다. (class="section center";)
- card__inner의 자식요소 중 card class를 가진 태그에 width, bgc 값을 부여합니다.
- card__body의 자식요소 중 btn class를 가진 태그에 padding-right, background-image, bg-repeat, bg-position 값을 부여합니다.
카드 유형 페이지 완성
완성된 페이지입니다~!
