소개
안녕하세요!. 웹스토리보이입니다. 가장 기본적인 카드 유형02을 만들어 보겠습니다. 쉬우니까 잘 따라해보세요~
-
webstandard
- 01_imageType01
- 02_imageType02
- image02_01.html :
디자인
디자인도 간단합니다.
이론
!를 치고 tab을 누르겠습니다.
언어를 ko로 변경하고 title은 메뉴 유형01로 변경하겠습니다.
코드
<!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>이미지 유형02</title>
<style>
/* font */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmarket {
font-family: "GmarketSans";
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
em {
font-style: normal;
}
.ir_so {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}
/* common */
.gray {
background-color: #F6F8FD;
}
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background: rgba(0,0,0,0.3); */
}
.section {
padding: 120px 0;
text-align: center;
}
.section > h2 {
font-size: 50px;
font-weight: 500;
margin-bottom: 20px;
line-height: 1;
}
.section > p {
font-size: 22px;
font-weight: 300;
margin-bottom: 70px;
line-height: 1.5;
color: #777;
}
.section__desc em {
font-style: normal;
text-decoration: underline;
text-underline-position: under;
}
/* cardType */
.card__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card__inner .card {
width: 24%;
text-align: left;
}
.card__inner .card:nth-child(1){
margin-bottom: 50px;
}
.card__body {
position: relative;
}
.card__body h3 {
font-size: 28px;
font-weight: 500;
margin: 20px 0 10px;
}
.card__body p {
font-size: 18px;
font-weight: 300;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.card__body a {
position: absolute;
right: 0;
top: 0;
width: 28px;
height: 28px;
background: url(https://webstoryboy.github.io/web2022/webs_img/card02_arrow.svg);
background-size: cover;
}
</style>
</head>
<body>
<section id="cardType" class="card__wrap section gmarket gray2">
<h2>포트폴리오 구경하기</h2>
<p>웹 디자이너, 웹 퍼블리셔, 프론트앤드 개발자 포폴입니다.</p>
<div class="card__inner container">
<article class="card">
<div class="card__header">
<img src="https://webstoryboy.github.io/web2022/webs_img/card02_bg01.jpg" alt="카드 이미지1">
</div>
<div class="card__body">
<h3>김현정, 포폴!</h3>
<p>사이트를 만들기 위한 기초 강의입니다. 기본 코딩에 대한 감각을 익히고, 웹 표준을 준수하면서......</p>
<a href="#"><span class="ir_pm">더보기</span></a>
</div>
</article>
<article class="card">
<div class="card__header">
<img src="https://webstoryboy.github.io/web2022/webs_img/card02_bg02.jpg" alt="카드 이미지2">
</div>
<div class="card__body">
<h3>김현정, 포폴!</h3>
<p>사이트를 만들기 위한 기초 강의입니다. 기본 코딩에 대한 감각을 익히고, 웹 표준을 준수하면서......</p>
<a href="#"><span class="ir_pm">더보기</span></a>
</div>
</article>
<article class="card">
<div class="card__header">
<img src="https://webstoryboy.github.io/web2022/webs_img/card02_bg03.jpg" alt="카드 이미지3">
</div>
<div class="card__body">
<h3>김현정, 포폴!</h3>
<p>사이트를 만들기 위한 기초 강의입니다. 기본 코딩에 대한 감각을 익히고, 웹 표준을 준수하면서......</p>
<a href="#"><span class="ir_pm">더보기</span></a>
</div>
</article>
<article class="card">
<div class="card__header">
<img src="https://webstoryboy.github.io/web2022/webs_img/card02_bg04.jpg" alt="카드 이미지4">
</div>
<div class="card__body">
<h3>김현정, 포폴!</h3>
<p>사이트를 만들기 위한 기초 강의입니다. 기본 코딩에 대한 감각을 익히고, 웹 표준을 준수하면서......</p>
<a href="#"><span class="ir_pm">더보기</span></a>
</div>
</article>
<article class="card">
<div class="card__header">
<img src="https://webstoryboy.github.io/web2022/webs_img/card02_bg05.jpg" alt="카드 이미지5">
</div>
<div class="card__body">
<h3>김현정, 포폴!</h3>
<p>사이트를 만들기 위한 기초 강의입니다. 기본 코딩에 대한 감각을 익히고, 웹 표준을 준수하면서......</p>
<a href="#"><span class="ir_pm">더보기</span></a>
</div>
</article>
<article class="card">
<div class="card__header">
<img src="https://webstoryboy.github.io/web2022/webs_img/card02_bg06.jpg" alt="카드 이미지6">
</div>
<div class="card__body">
<h3>김현정, 포폴!</h3>
<p>사이트를 만들기 위한 기초 강의입니다. 기본 코딩에 대한 감각을 익히고, 웹 표준을 준수하면서......</p>
<a href="#"><span class="ir_pm">더보기</span></a>
</div>
</article>
<article class="card">
<div class="card__header">
<img src="https://webstoryboy.github.io/web2022/webs_img/card02_bg07.jpg" alt="카드 이미지7">
</div>
<div class="card__body">
<h3>김현정, 포폴!</h3>
<p>사이트를 만들기 위한 기초 강의입니다. 기본 코딩에 대한 감각을 익히고, 웹 표준을 준수하면서......</p>
<a href="#"><span class="ir_pm">더보기</span></a>
</div>
</article>
<article class="card">
<div class="card__header">
<img src="https://webstoryboy.github.io/web2022/webs_img/card02_bg08.jpg" alt="카드 이미지8">
</div>
<div class="card__body">
<h3>김현정, 포폴!</h3>
<p>사이트를 만들기 위한 기초 강의입니다. 기본 코딩에 대한 감각을 익히고, 웹 표준을 준수하면서......</p>
<a href="#"><span class="ir_pm">더보기</span></a>
</div>
</article>
</div>
</section>
<!-- //카드 영역(유형2)-->
</body>
</html>
view2
view3
view4
참고
728x90
