카드 타입 사이트 03
사이트에 기초적인 구조를 가진 카드 타입 사이트를 만들어 봅시다.
해당 코딩은 위 카드 3개만 만들었습니다.
Site HTML
사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다.
section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다.
<section id="cardType03" class="card-wrap score section">
<h2 class="blind">Art</h2>
<div class="card_inner container">
<article class="card">
<figure class="card__header">
<img src="img/card_bg03_01.jpg" alt="Architects">
<figcaption>Art</figcaption>
</figure>
<div class="card__contents">
<h3>
Art is a diverse range of human
activity, interpretation has varied greatly
throughout history
</h3>
<p>
There is no generally agreed definition of what
constitutes art, and its interpretation has varied
greatly throughout history and across cultures.
There is no generally agreed definition of what constitutes art
</p>
</div>
<div class="card__footer">
<h4>Art<em>6Resources</em></h4>
<i><img src="img/card_bg03_icon01.png" alt="Hesperioidea"></i>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg03_02.jpg" alt="Architects">
<figcaption>Art</figcaption>
</figure>
<div class="card__contents">
<h3>
Art is a diverse range of human
activity, interpretation has varied greatly
throughout history
</h3>
<p>
There is no generally agreed definition of what
constitutes art, and its interpretation has varied
greatly throughout history and across cultures.
There is no generally agreed definition of what constitutes art
</p>
</div>
<div class="card__footer">
<h4>Art<em>6Resources</em></h4>
<i><img src="img/card_bg03_icon02.png" alt="Hesperioidea"></i>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg03_03.jpg" alt="Architects">
<figcaption>Art</figcaption>
</figure>
<div class="card__contents">
<h3>
Art is a diverse range of human
activity, interpretation has varied greatly
throughout history
</h3>
<p>
There is no generally agreed definition of what
constitutes art, and its interpretation has varied
greatly throughout history and across cultures.
There is no generally agreed definition of what constitutes art
</p>
</div>
<div class="card__footer">
<h4>Art<em>6Resources</em></h4>
<i><img src="img/card_bg03_icon03.png" alt="Hesperioidea"></i>
</div>
</article>
</div>
</section>
Site CSS
사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다.
h2와 p는 전체 구역에 사용돼 코드 불안정한 가능성이 있기에, 해당 요소 css만 부여되는 >를 사용해줍니다.
텍스트 줄 제한 코드
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 2줄로 제한
-webkit-box-orient: vertical;
/* 폰트 */
@import url('https://webfontworld.github.io/score/SCoreDream.css');
.score {
font-family: 'SCoreDream';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
.type2 {
padding-top: 10px;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
}
.section > h2 {
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* blind : 접근성 */
.blind {
position:absolute;
clip:rect(0 0 0 0);
width:1px;
height:1px;
margin:-1px;
overflow:hidden
}
/* cardType03 */
body {
background-color: #2254c3;
}
.card_inner {
display: flex;
}
.card_inner .card {
padding: 26px;
width: 33.3333%;
background-color: #fff;
}
.card_inner .card:nth-child(1) {
border-right: 1px solid #eeeeee;
}
.card_inner .card:nth-child(2) {
border-right: 1px solid #eeeeee;
}
.card__header {
position: relative;
}
.card__header img {
border-radius: 10px;
box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
.card__header figcaption {
position: absolute;
right: 10px;
top: 10px;
padding: 4px 20px;
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.300);
text-align: center;
font-size: 14px;
color: #000;
}
.card__contents {}
.card__contents h3{
font-size: 20px;
line-height: 1.4;
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.card__contents p{
color: #666;
font-size: 16px;
line-height: 1.7;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
margin-bottom: 30px;
}
.card__footer {
display: flex;
justify-content: end;
}
.card__footer h4 {
text-align: right;
color: #dd2a2a;
}
.card__footer em {
display: block;
color: #666;
font-style: normal;
}
.card__footer i {
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
overflow: hidden;
display: block;
margin-left: 10px;
margin-top: 0px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
댓글