728x90
이번엔 카드유형 사이트를 만들어 봐요 !
코드!
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
* {
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;
/*범위 확인
chk 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 {
color: #666;
font-size: 22px;
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.3333%;
background-color: #f8f8f8;
}
.card__header {}
.card__body {
padding: 24px;
}
.card__body .title {
font-size: 24px;
margin-bottom: 16px;
}
.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>스타일 입니다
<body>
<section class="card__wrap section nexon">
<div class="container">
<h2 class="section__h2">Counting star lv02</h2>
<p class="section__desc">계절이 지나가는 하늘에는 가을로 가득 차 있습니다
가슴 속에 하나 둘 새겨지는 별을 이제 다 못 헤는 것은쉬이 아침이 오는 까닭이요</p>
<div class="card__inner">
<article class="card">
<figure>
<img src="../asset/img/cardType01_01.jpg" alt="별이 많은 사진">
</figure>
<div class="card__body">
<h3 class="title">내일 밤이 남은 까닭이요,</h3>
<p class="desc">아직 나의 청춘이 다하지 않은 까닭입니다.
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure>
<img src="../asset/img/cardType01_02.jpg" alt="별이 불타는 사진">
</figure>
<div class="card__body">
<h3 class="title">별 하나에 추억과</h3>
<p class="desc">별 하나에 쓸쓸함과 별 하나에 동경과 별
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure>
<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>body 입니다.
| 위 레이아웃 만들면서 아리송했던 css 정리 😝😝😝! | |
| font-weight |
|
| line-height |  |
| justify-content: space-between |
|
| background-repeat |
|