- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
카드 타입 유형
피그마를 이용한 그리드 지정 해준 화면 입니다.
- 넓이를 1920 으로 지정 해주고 높이를 1058로 지정해 주었습니다.
- 그리드 카운트를 12개로 설정하고 마진을 380으로 지정합니다. 그럼 분홍색으로 12개 선이 생깁니다.
- 글자의 line-hegiht를 1.5 로 피그마는 150 으로 넣어 주면 됩니다.
카드 타입 유형 코딩 입니다.
<!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;
}
h1, h2, h3, h4, h5, h6{
font-weight: normal;
}
img{
vertical-align: top;
width: 100%;
/* 화면 여백 없애기 */
}
/* common */
.container {
width: 1160px;
margin: 0 auto;
padding: 0px 20px;
/* background-color: rgba(0,0,0,0.1); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.section .left {
text-align: center;
}
.section_h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section_desc {
font-size: 22px;
color: #666666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* card_type */
.card_wrap {
/* background-color: #ccc; */
}
.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: 16px;
}
.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>
<body>
<section class="card_wrap section nexon">
<div class="container">
<h2 class="section_h2">고양이를 키우는 방법</h2>
<p class="section_desc">반려묘를 키울려면 돈과 열정과 시간과 관심도 많아야 합니다. 예방접종 및 기본검사로 돈이 많이 듭니다.
키울실려면 신중하시길 바랍니다.</p>
<div class="card_inner">
<acticle 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">다치거나 아프게 되고 병원에서 입원/수술을 하는경우는 100만원 단위 이상으로 발생할 수 있습니다. 그러므로 돈을 많이 벌어야 합니다.
신중신중신중</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</acticle>
<acticle 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>
</acticle>
<acticle 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>
</acticle>
</div>
</div>
</section>
</body>
</html>
완성된이미지입니다.
HTML
- 처음으로 먼저 구역을 지정합니다. section 태그를 만들어 클래스를 card_wrap으로 만듭니다.
- 그리고 그안에 container를 넣어 감쌉니다.
- h2 태그를 이용해서 제목을 지정해 주고 class를 section_h2로 지정합니다.
- p 태그를 이용해서 본문을 입력합니다. class를 section_desc로 지정합니다.
- 그안에 사진 및 글자를 넣어 줄꺼니까 하나의 div 태그로 감싸 줍니다.
- div태그의 클래스는 card_inner 로 지정해 줍니다.
- 그안에 article 태그를 3개를 만들어 클래스를 card로 지정합니다.
- article 안에 figure 태그로 감싸고 클래스를 card_header로 지정합니다.
- img 태그에 그림을 넣고 alt 값을 써줍니다. alt는 웹표준에서 중요합니다.
- 그리고 article 안에 div를 태그를 넣어서 클래스를 card_body로 지정합니다. 안에 글자를 넣어줄껍니다.
- h3태그를 이용해서 사진의 이름을 넣어 줍니다. 클래스는 title로 지정합니다.
- p태그를 이용해서 본문을 넣어주고 클래스를 desc 로 지정합니다.
- a태그를 이용해서 자세히 보기를 넣어주고 클래스를 btn으로 합니다. href는 #으로 지정합니다.
- href는 경로 지정인데 아직 갈 경로가 없기 떄문에 #을 넣어 준겁니다.
- 그러면 HTML의 작성은 끝났습니다.
CSS
- 먼저 reset css를 작성합니다. 전체 margin,padding을 0으로 초기화 해줍니다.
- a 태그도 text-decoration :none, color:#000으로 지정합니다.
- h1-h6 까지 fonst-weight를 nomarl로 지정합니다.
- img 의 vartical-align 을 top으로 주시면 여백이 없어 집니다. 넓이는 100%를 줍니다.
- common 을 작성합니다. common은 많이 쓰이고 재활용할떄 쓰입니다.
- .container 의 css를 작성합니다. width,margin,padding 을 지정합니다.
- nexon 은 font-family 와 font-weight 를 지정합니다.
- section 은 padding 값을 지정합니다.
- section left 는 글자 정렬 입니다. text-align 을 지정합니다.
- section h2 제목의 스타일을 지정해주는 겁니다. font-size,font-weight,margin-bottom,line-height 를 지정합니다.
- section desc 는 p 태그의 스타일을 지정해주는 겁니다. font-size, color, margin-bottom, font-weight, line-height 를 지정합니다.
- .container 의 css작성을 끝났습니다. 그 다음으로 card 부분을 작성해 보겠습니다.
- .card_inner에 display :flex를 지정해서 가로 정렬을 합니다. justify-content 를 space-between 으로 지정합니다.
- 그러면 균일하게 화면에 배치가 됩니다.
- card_inner .card 는 article에 css를 넣어주는겁니다. width를 반응형도 생각해 32.3333%으로 적어줍니다. 그리고 배경색을 있으므로 background-color 를 지정해 줍니다.
- card_body는 사진의 대한 이름 내용 자세히 보기를 묶어주는 div 태그입니다.
- card_body .title는 h3 태그의 스타일을 지정해주는겁니다. font-size, margin-bottom 을 지정합니다.
- card_body .desc는 card_body안에 있는 p 태그의 스타일을 지정해주는겁니다.
- card_body .btn는 a태그를 스타일을 지정해주는겁니다. padding-right, background-image, background-repat , background-position 을 지정해 줍니다.