์นด๋์ ํ 3
์นด๋ ์ ํ ๋ ์ด์์ ์ฌ์ดํธ์ ๋๋ค. html๊ณผ css๋ก ์์ ํ์์ต๋๋ค.
๋ ์ด์์ ์ค์
figma๋ก ๊ทธ๋ฆฌ๋์ ์ฌ์ดํธ์ ๋ ์ด์์์ ์ก์ต๋๋ค.
HTML
html ์์ค์ ๋๋ค.
<body>
<section id="cardType03" class="card__wrap SCore section">
<h2 class="blind">๋ค์ด์ด๋ฆฌ์ ์ธ๊ณ</h2>
<div class="card__inner container">
<article class="card">
<figure class="card__header">
<img src="img/card_bg03_01.jpg" alt="๋ค์ด์ด๋ฆฌ">
<figcaption>Write</figcaption>
</figure>
<div class="card__contents">
<h3>์๊ธ์จ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ ๋ค์ด์ด๋ฆฌ๋ฅผ ์์๊ฒ ๊พธ๋ฉฐ๋ณด์ธ์!
์๊ธ์จ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ ๋ค์ด์ด๋ฆฌ๋ฅผ ์์๊ฒ ๊พธ๋ฉฐ๋ณด์ธ์!</h3>
<p>
์ด๋ฏธ์ง๊ฐ ์์ด๋ ๋ฉ์ง๊ฒ ๋ค์ด์ด๋ฆฌ๋ฅผ ๊พธ๋ฐ ์ ์๋ต๋๋ค. ๊ทธ๋ฆผ์ ๊ทธ๋ฆฌ์ง ๋ชปํ๋ค๊ณ ํด๋,
๋ณด์ฌ์ค ์ด๋ฏธ์ง๊ฐ ์๋ค๊ณ ํด๋ ๊ฒ๋จน์ง ๋ง๊ณ ๋ค์ด์ด๋ฆฌ ๊พธ๋ฏธ๊ธฐ๋ฅผ ์๋ํ์ธ์
์์๊ณ ๋ฉ์ง ๋ค์ด์ด๋ฆฌ๋ก
๋ค๋ฅธ์ฌ๋๋ค์ ๋ง์์ ์ฌ๋ก์ก์์
</p>
</div>
<div class="card__footer">
<h4>Writelove <em>9 Resources</em></h4>
<span><img src="img/card_bg03_icon01.png" alt="Writelove"></span>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg03_02.jpg" alt="๋ค์ด์ด๋ฆฌ">
<figcaption>Write</figcaption>
</figure>
<div class="card__contents">
<h3>์๊ธ์จ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ ๋ค์ด์ด๋ฆฌ๋ฅผ ์์๊ฒ ๊พธ๋ฉฐ๋ณด์ธ์!
์๊ธ์จ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ ๋ค์ด์ด๋ฆฌ๋ฅผ ์์๊ฒ ๊พธ๋ฉฐ๋ณด์ธ์!</h3>
<p>
์ด๋ฏธ์ง๊ฐ ์์ด๋ ๋ฉ์ง๊ฒ ๋ค์ด์ด๋ฆฌ๋ฅผ ๊พธ๋ฐ ์ ์๋ต๋๋ค. ๊ทธ๋ฆผ์ ๊ทธ๋ฆฌ์ง ๋ชปํ๋ค๊ณ ํด๋,
๋ณด์ฌ์ค ์ด๋ฏธ์ง๊ฐ ์๋ค๊ณ ํด๋ ๊ฒ๋จน์ง ๋ง๊ณ ๋ค์ด์ด๋ฆฌ ๊พธ๋ฏธ๊ธฐ๋ฅผ ์๋ํ์ธ์
์์๊ณ ๋ฉ์ง ๋ค์ด์ด๋ฆฌ๋ก
๋ค๋ฅธ์ฌ๋๋ค์ ๋ง์์ ์ฌ๋ก์ก์์
</p>
</div>
<div class="card__footer">
<h4>Writelove <em>9 Resources</em></h4>
<span><img src="img/card_bg03_icon02.png" alt="Writelove"></span>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg03_03.jpg" alt="๋ค์ด์ด๋ฆฌ">
<figcaption>Write</figcaption>
</figure>
<div class="card__contents">
<h3>์๊ธ์จ๋ฅผ ์ด์ฉํ์ฌ ๋น์ ์ ๋ค์ด์ด๋ฆฌ๋ฅผ ์์๊ฒ ๊พธ๋ฉฐ๋ณด์ธ์!์๊ธ์จ๋ฅผ ์ด์ฉํ์ฌ
๋น์ ์ ๋ค์ด์ด๋ฆฌ๋ฅผ ์์๊ฒ ๊พธ๋ฉฐ๋ณด์ธ์!</h3>
<p>
์ด๋ฏธ์ง๊ฐ ์์ด๋ ๋ฉ์ง๊ฒ ๋ค์ด์ด๋ฆฌ๋ฅผ ๊พธ๋ฐ ์ ์๋ต๋๋ค. ๊ทธ๋ฆผ์ ๊ทธ๋ฆฌ์ง ๋ชปํ๋ค๊ณ ํด๋,
๋ณด์ฌ์ค ์ด๋ฏธ์ง๊ฐ ์๋ค๊ณ ํด๋ ๊ฒ๋จน์ง ๋ง๊ณ ๋ค์ด์ด๋ฆฌ ๊พธ๋ฏธ๊ธฐ๋ฅผ ์๋ํ์ธ์
์์๊ณ ๋ฉ์ง ๋ค์ด์ด๋ฆฌ๋ก
๋ค๋ฅธ์ฌ๋๋ค์ ๋ง์์ ์ฌ๋ก์ก์์
</p>
</div>
<div class="card__footer">
<h4>Writelove <em>9 Resources</em></h4>
<span><img src="img/card_bg03_icon03.png" alt="Writelove"></span>
</div>
</article>
</div>
</section>
</body>
CSS
css ์์ค์ ๋๋ค. figma๋ก ์ค์ ํด๋์ ๋ ์ด์์์ด๋ zaplin์ ๋ณด๋ฉฐ ์ ์ ํ๊ฒ css๋ฅผ ์ค์ ํด์ค๋๋ค.
/* font */
@import url('https://webfontworld.github.io/score/SCoreDream.css');
.SCore {
font-family: SCoreDream;
font-weight: 300;
}
body {}
/* reset */
* {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
/* 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;
}
/* 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 #eee;
}
.card__inner .card:nth-child(2) {
border-right: 1px solid #eee;
}
.card {}
.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: 6px 16px;
border-radius: 50px;
background-color: #fff;
text-align: center;
font-size: 14px;
color: #7b7b7b;
}
.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 span {
width: 40px;
height: 40px;
background-color: #000;
display: block;
border-radius: 50%;
overflow: hidden;
margin-left: 10px;
margin-top: 4px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
โปiR ํจ๊ณผโป
iR ํจ๊ณผ(์ด๋ฏธ์ง ๋์ฒด ํจ๊ณผ == alt)
์ด๋ฏธ์ง ๋์ฒด ํ
์คํธ ์ ๊ณต์ ์ํ css ๊ธฐ๋ฒ. ์น ์ ๊ทผ์ฑ์ ์ํด ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์
๋๋ค.
โปBlindโป
์น ์ ๊ทผ์ฑ์ ๊ณ ๋ คํ ์์ ์จ๊น์ฒ๋ฆฌ ๋ฐฉ๋ฒ์
๋๋ค.
์คํฌ๋ฆฐ ๋ฆฌ๋๋ width, height๊ฐ 0์ธ ์์ฑ๋ค์ ์ฝ์ ์ ์๊ธฐ ๋๋ฌธ์ ์ฌ์ด์ฆ๋ ์ต์ 1px ์ด์์ผ๋ก ํด์ผํฉ๋๋ค.
โป๋ง์ค์ ํจ๊ณผโป
- ๋ง์ค์ ํจ๊ณผ๋ ํ ์ค์ ์์ญ ์์ ๋ชจ๋ ๊ธ์๋ฅผ ๋ฃ๊ณ ์ถ์ ๋ ์ฌ์ฉํฉ๋๋ค.
- ์์ญ์ ๋์ด๊ฐ๊ฒ ๋๋ฉด ... ์ผ๋ก ํ์๋ฉ๋๋ค.
- ๋ง์ค์ ํจ๊ณผ๋ฅผ ์ ์ฉํ๊ณ ์ถ์ ์์ญ์ ์๋ ํ๊ทธ๋ฅผ ๋ฃ์ต๋๋ค.
ํ ์ค ํจ๊ณผ
{
width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
๋ ์ค ํจ๊ณผ
{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
์ธ ์ค ํจ๊ณผ
{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
'Site ์ ์' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
02. ์ด๋ฏธ์ง ์ ํ - 3 (4) | 2022.08.21 |
---|---|
02. ์ด๋ฏธ์ง ์ ํ - 2 (3) | 2022.08.18 |
02. ์ด๋ฏธ์ง ์ ํ - 1 (3) | 2022.08.18 |
02. ์นด๋ ์ ํ-2 (7) | 2022.08.10 |
01. ์นด๋ ์ ํ-1 (3) | 2022.08.09 |
๋๊ธ