728x90
반응형
카드 유형 페이지 만들어보기!!
이미지 유형 : https://dongjin6539.tistory.com/28
텍스트 유형 : https://dongjin6539.tistory.com/35
이미지/텍스트 유형 : https://dongjin6539.tistory.com/39
슬라이드 유형 : https://dongjin6539.tistory.com/40
헤더 유형 : https://dongjin6539.tistory.com/44
푸터 유형 : https://dongjin6539.tistory.com/49
지난 번에 이어 또다른 페이지를 만들어보았습니다.
지난 번과 같은 방식으로 시작해보겠습니다.
<!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%;
}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
/* 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__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,%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__warp 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>
방법
- 지난번에 했던 이미지 유형 페이지 의 글꼴과 style 태그의 /* reset */, /* commom */ 에 해당하는 부분은 모든 페이지의 공용으로 사용하기 때문에 그대로 가져왔습니다. 다만, 추가로 바꿔야 할게 있으면 모든 페이지에 추가를 해줘야 합니다.
- 이번에 추가로 줬던 스타일은 /* commom */ 부분에 "section.center" 스타일을 만들어 이미지 유형의 페이지에만 글자가 가운데 정렬이고 이번 카드 유형에는 글자가 가운데 정렬이 아니기 때문에 서로 다르게 줬습니다.
- 추가로 필요로 할 때가 있어서 /* reset */ 부분에 따로 margin-top, margin-bottom 값을 설정해놨습니다.
- 지나번 이미지 유형의 페이지 만드는 방법과 매우 흡사합니다.
- 만드는 웹페이지가 section 위치에 들어갈꺼기 때문에 body 태그에 section 태그를 만들어주고 class 명을 "card__wrap section nexon"으로 입력해줍니다.
- body 태그로 넘어가서 class명이 "container" 안에 자식으로 자신이 원하는 제목과 부제 설명을 h2 태그와 p 태그를 사용해 입력해줍니다.
- h2 태그와 p 태그에도 class 명을 "section"으로 입력하고 각각 class 명을 "section__h2", "section__desc"으로 추가로 입력합니다.
- 이번 부제 설명은 글자 수가 더 많아 글자 높이 스타일을 입력해 주기 위해 style 태그로 가서 "section__desc"에 line-height 값을 입력해줍니다.
- body 태그로 넘어가서 글자 밑에 이미지를 넣기 위해 class명이 "container" 안에 자식으로 div 태그를 만들고 class명을 "card__inner"으로 입력해줍니다.
- 위에 입력했던 div 태그 자식으로 이미지를 세개를 넣을꺼기 때문에 article 태그 3개와 class 명을 보기 쉽게 "card"로 입력해줍니다.
- 위에 입력했던 세 개의 article 태그 자식으로 figure 태그를 사용해서 class명을 "card__body"로 주고 안에 자식으로 img 링크를 주고 원하는 이미지를 넣어줍니다.
- style 태그로 넘어가서 "card__inner . card" class 스타일에 이미지의 width값을 입력해줍니다.
- 이미지를 넣게 되면 이미지가 블록 구조라 세로로 나열됩니다. 그래서 "card__inner"에 스타일로 display: flex;를 입력해 가로로 나열하게 만들어주면 이미지가 서로 붙기 때문에 justify-content: space-between; 스타일을 사용해 "card__inner . card" class에 줬던 width값에 알맞게 떨어뜨려 줍니다.
- body 태그로 넘어와서 세 개의 article 태그 자식으로 figure 태그 밑에 div 태그를 주고 class명 "card__body" 각각 만들어줍니다.
- div 태그 자식으로 이미지의 제목과 부제 설명을 주기 위해 h3 태그와 p 태그를 주고 상세한 설명을 위해 버튼식으로 a 링트 태그를 사용해 만들어줍니다.
- h3태그, p 태그, a 링크 태그에 각가 class 명을 "title", "desc", "btn"을 줍니다.
- style 태그로 넘어가서 "card_body"에 알맞은 padding값, "card_body .title"에 알맞은 font-size, margin-bottom값, "card_body .desc"에 알맞은 font-size, color, line-height, margin-bottom값을 입력해줍니다.
- 이제 body 태그에 a link 태그에 있는 화살표를 입력을 하려고 합니다. 화살표는 피그마로 먼저 스타일을 만들어주고 파일을 svg 유형으로 만들어서 인터넷에서 검사 후 코드를 가져오면 됩니다.
- 가져온 코드를 이용해 style 태그로 와서 "card_body .btn"에 background-image : url( ) 속성에 가로안에 붙여넣기해서 가져오면 됩니다.
- 그러면 a link 태그에 글자 위에 여러번 반복이 되서 등장하게 됩니다. 그럼 다시 "card_body .btn"에 가서 bakcground-repeat : ; 스타일을 no-repeat 값으로 주고 background-position : ; 스타일을 right center 값으로 주게 되면 한번만 등장하고 텍스트의 오른쪽 가운데 정렬이 됩니다.
- 그 다음 "card_body .btn" 그대로에 알맞은 padding-rigth값을 주면 원하는 위치에 이동하게 됩니다.
- 그러면 원하는 웹페이지가 나오게 됩니다.
참고
- 아직 잘 모르는 속성에 대해 알아보겠습니다.
| 속성 | 속성 설명 |
| background-image | 이미지를 배경으로 사용하게 하는 속성입니다. |
| background-position | 배경 이미지의 위치를 정하는 속성입니다. |
| background-repeat | 배경 이미지의 반복 여부와 반복 방향을 정합니다. |
- 이해가 안됐을 경우 이용해 보세요!!
728x90
반응형
