사이트 만들기 : 카드 유형 03
사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다.
가장 먼저 공부해 볼 유형은 카드유형 입니다.
피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다.
이번 카드 만들기에는 ir 효과(이미지 대체 효과 alt)와 1줄 줄임효과 3줄 줄임효과가 추가됩니다.
01. Figma로 레이아웃 잡기
Figma로 전체적인 틀을 잡아줍니다.
02. HTML
ir태그를 설정하여 이미지 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공 해줍니다.
{
<body>
<section id="cardType02" class="card__wrap score section gray">
<div class="card__inner container">
<article class="card">
<div class="img1">
<img src="img/card_bg03_01.jpg" alt="토끼">
</div>
<h3 class="tit">동물의 종류는 다양합니다.
동물은 육식동물, 초식동물 등등.</h3>
<p class="desc">
대체적으로 긴 귀와 솜뭉치 모양으로 위쪽으로
짧아 보이게 말려 있는 꼬리 길이는 생각보다 길다....
</p>
<div class="more_mom">
<a href="#" class="more"><span class="ir">더보기</span></a>
<span class="animal">
<img src="img/animal.jpg" alt="동물박사">
</div>
</article>
<article class="card">
<div class="img1">
<img src="img/card_bg03_02.jpg" alt="사자">
</div>
<h3 class="tit">동물의 종류는 다양합니다.
동물은 육식동물, 초식동물 등등.</h3>
<p class="desc">
용맹한 이미지와 달리 수컷 사자는 하루의 20시간을 그늘에서 쉬며 보낸다.
이 때문에 게으른 이미지가 강하다...
</p>
<div class="more_mom">
<a href="#" class="more"><span class="ir">더보기</span></a>
<span class="animal">
<img src="img/animal.jpg" alt="동물박사">
</div>
</article>
<article class="card">
<div class="img1">
<img src="img/card_bg03_03.jpg" alt="북극곰">
</div>
<h3 class="tit">동물의 종류는 다양합니다.
동물은 육식동물, 초식동물 등등.</h3>
<p class="desc">
북극 지방에 서식하는 곰. 현존하는 곰 중에서 가장 큰 곰이다.
겉모습은 귀엽지만 무서운 맹수다...
</p>
<div class="more_mom">
<a href="#" class="more"><span class="ir">더보기</span></a>
<span class="animal">
<img src="img/animal.jpg" alt="동물박사">
</div>
</article>
</body>
}
03. CSS
Figma에서 정해놓은 수치대로 CSS를 넣어 줍니다.
/* 1줄효과 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 18px;
/* 3줄효과 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
를 추가 해주면 해당 줄수가 넘어가면...으로 표시됩니다.
+ webkit-line-clamp 에 따라 줄의 수치를 설정 할 수 있습니다.
{
/* fonts */
@import url('https://webfontworld.github.io/score/SCoreDream.css');
.score {
font-family: 'SCoreDream';
font-weight: 500;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
min-width: 1160px;
}
.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;
}
.gray {
background-color: #fff;
}
/* ir 효과(이미지 대체 효과 alt) */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
.card__inner .card .tit {
font-size: 28px;
margin-bottom: 10px;
/* 1줄효과 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 18px;
}
.card__inner .card .desc {
font-size: 18px;
font-weight: 300;
color: #666;
line-height: 1.4;
/* 3줄효과 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* card 03 */
.card__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: #fff;
background-color: #1B5BFF;
height: 450px;
}
.card__inner .card {
width: 28.8%;
position: relative;
border-right: solid 1px #dedede;
box-sizing: border-box;
background-color: #f5f5f5;
}
.more_mom {}
.card__inner .card .more {
background-image: url(img/more.svg);
width: 50px;
height: 50px;
display: block;
position: absolute;
right: 0;
left: 270px;
top: 365px;
}
.animal {
width: 150px;
display: block;
position: absolute;
right: 0;
left: 110px;
top: 370px;
}
.img1 {
width: 334px;
height: 200px;
}
.tit {
width: 334px;
height: 68px;
padding-top: 20px;
}
.desc {
width: 334px;
height: 75px;
}
}
댓글