728x90
๋ฐ์ํ
์ด๋ฏธ์ง ์ ํ 2
์ด๋ฏธ์ง ์ ํ ๋ ์ด์์ ์ฌ์ดํธ์ ๋๋ค. html๊ณผ css๋ก ์์ ํ์์ต๋๋ค.
๋ ์ด์์ ์ค์
figma๋ก ๊ทธ๋ฆฌ๋์ ์ฌ์ดํธ์ ๋ ์ด์์์ ์ก์ต๋๋ค.
HTML
html ์์ค์ ๋๋ค.
<body>
<section id="imageType01" class="image__wrap gmark section">
<h2>BEST ์ํ์ต</h2>
<p>๋ค์ํ ์ํ์ต์ ๊ฐ ๋ณธ ์ฌ๋์ด ๋ฝ์ ์ต๊ณ ์ ์ํ์ต BEST3</p>
<div class="image__inner container">
<article class="image img1">
<figure> class="image__box">
<img src="img/image_bg02_01.jpg" alt="">
</figure>
<div class="image__desc">
<h3>๋ด๊ฐ๋ง๋ ๊ธฐ๋ฆฐํค๋ง</h3>
<a> href="" class="more" title="์์ธํ๋ณด๊ธฐ">์์ธํ๋ณด๊ธฐ</a>
</div>
</article>
<article class="image img2">
<figure> class="image__box">
<img src="img/image_bg02_02.jpg" alt="">
</figure>
<div class="image__desc">
<h3>์๊ทธ๋งํ ์ธํ
๋ฆฌ์ด๋ฐฉ</h3>
<a> href="" class="more" title="์์ธํ๋ณด๊ธฐ">์์ธํ๋ณด๊ธฐ</a>
</div>
</article>
<article class="image img3">
<figure> class="image__box">
<img src="img/image_bg02_03.jpg" alt="">
</figure>
<div class="image__desc">
<h3>์ค๋์ ๊ฐ์ฑ</h3>
<a> href="" class="more" title="์์ธํ๋ณด๊ธฐ">์์ธํ๋ณด๊ธฐ</a>
</div>
</article>
</div>
</section>
</body>
CSS
css ์์ค์ ๋๋ค. figma๋ก ์ค์ ํด๋์ ๋ ์ด์์์ด๋ zaplin์ ๋ณด๋ฉฐ ์ ์ ํ๊ฒ css๋ฅผ ์ค์ ํด์ค๋๋ค.
/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmark {
font-family: 'GmarketSans';
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;
}
/* imageType */
.image__inner {
display: flex;
justify-content: space-between;
}
.image {
width: 32%;
background-color: #ccc;
position: relative;
overflow: hidden;
}
.image__box {}
.image__box img {
vertical-align: top;
transition: all 0.6s ease-in-out
}
.image__desc {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 23px 20px;
text-align: center;
backdrop-filter: blur(10px);
box-sizing: border-box;
background-color: rgba(0,0,0,0.1);
bottom: -100px;
transition: all 0.3s ease-in-out
}
.image:hover .image__desc{
bottom: 0;
}
.image:hover .image__box img {
transform: scale(1.03);
}
.img1 .image__desc{
background-color: rgba(0,0,0,0.1);
}
.img2 .image__desc{
background-color: rgba(0,0,0,0.2);
}
.img3 .image__desc{
background-color: rgba(0,0,0,0.3);
}
.img1 .image__desc h3 {
color: #fff;
}
.img1 .image__desc .more {
color: #fff;
}
.img2 .image__desc h3 {
color: #fff;
}
.img2 .image__desc .more {
color: #fff;
}
.img3 .image__desc h3 {
color: #fff;
}
.img3 .image__desc .more {
color: #fff;
}
.image__desc h3 {
font-size: 24px;
margin-bottom: 5px;
}
.image__desc .more {
font-size: 16px;
}
.image__desc .more:hover {
text-decoration: underline;
}
728x90
๋ฐ์ํ
'Site ์ ์' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 03. ํ ์คํธ ์ ํ 01 (4) | 2022.08.30 |
|---|---|
| 02. ์ด๋ฏธ์ง ์ ํ - 3 (4) | 2022.08.21 |
| 02. ์ด๋ฏธ์ง ์ ํ - 1 (3) | 2022.08.18 |
| 03. ์นด๋ ์ ํ - 3 (11) | 2022.08.11 |
| 02. ์นด๋ ์ ํ-2 (7) | 2022.08.10 |
๋๊ธ