728x90
๋ฐ์ํ
โญ๏ธ ์ด๋ฏธ์ง ์ ํ 03 โญ๏ธ
01. ๋ ์ด์์ ๊ตฌ์ํ๊ธฐ
๋ ์ด์์์ ๊ตฌ์ํ ๋๋, ์ค์ผ์นํ๋ฉด์ ์ธ๋ถ ๋ด์ฉ์ ์ ๋ณด๊น์ง ๊ตฌ์ฒด์ ์ผ๋ก ๊ณํํฉ๋๋ค.
02. ์์(div) ๋ง๋ค๊ธฐ : <body>
section ์ ์๋ฉํฑ ๋งํฌ์
ํ๊ณ , id ๋ก ์ด๋ฆ์ ์ง์ด์ค๋๋ค.
์นด๋ ์์ 3๊ฐ(article)์ ๋ง๋ค๊ณ , ์ ๋ชฉ๊ณผ ๋ด์ฉ์ ์
๋ ฅํฉ๋๋ค.
์ค๊ฐ ์ค๊ฐ์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ดํด๋ณด๋ฉฐ ์ ๋ง๋ค์ด์ง๊ณ ์๋์ง ํ์ธํ๋ ๊ณผ์ ์ด ํ์ํฉ๋๋ค.
<section id="imageType03" class="image__wrap gmarket section">
<h2>์ปฌ๋ฌํ ์ํธ ๋ฎค์ง์</h2>
<p>๋ค์ฑ๋ก์ด ์๊ฐ์ด ์ ํ๋ ์ญ๋์ ์ธ ์๋์ง๋ฅผ ๋๊ปด๋ณด์ธ์.</p>
<div class="image__inner container-fluid">
<article class="image">
<!-- <figure class="image__box">
<img src="img/image_bg03_01.jpg" alt="">
</figure> -->
<div class="image__desc">
<h3>Color Dance</h3>
<p>untitled - 03</p>
</div>
<div class="image__sns">
<a href="#" class="link"><span class="ir">ํ์ด์ค๋ถ</span></a>
<a href="#" class="link"><span class="ir">ํธ์ํฐ</span></a>
<a href="#" class="link"><span class="ir">์ธ์คํ</span></a>
<a href="#" class="link"><span class="ir">์ธ</span></a>
</div>
</article>
<article class="image">
<figure class="image__box">
<img src="img/image_bg03_01.jpg" alt="">
</figure>
<div class="image__desc">
<h3>Color Dance</h3>
<p>untitled - 03</p>
</div>
<div class="image__sns">
<a href="#" class="link"><span class="ir">ํ์ด์ค๋ถ</span></a>
<a href="#" class="link"><span class="ir">ํธ์ํฐ</span></a>
<a href="#" class="link"><span class="ir">์ธ์คํ</span></a>
<a href="#" class="link"><span class="ir">์ธ</span></a>
</div>
</article>
<article class="image">
<figure class="image__box">
<img src="img/image_bg03_01.jpg" alt="">
</figure>
<div class="image__desc">
<h3>Color Dance</h3>
<p>untitled - 03</p>
</div>
<div class="image__sns">
<a href="#" class="link"><span class="ir">ํ์ด์ค๋ถ</span></a>
<a href="#" class="link"><span class="ir">ํธ์ํฐ</span></a>
<a href="#" class="link"><span class="ir">์ธ์คํ</span></a>
<a href="#" class="link"><span class="ir">์ธ</span></a>
</div>
</article>
<article class="image">
<figure class="image__box">
<img src="img/image_bg03_01.jpg" alt="">
</figure>
<div class="image__desc">
<h3>Color Dance</h3>
<p>untitled - 03</p>
</div>
<div class="image__sns">
<a href="#" class="link"><span class="ir">ํ์ด์ค๋ถ</span></a>
<a href="#" class="link"><span class="ir">ํธ์ํฐ</span></a>
<a href="#" class="link"><span class="ir">์ธ์คํ</span></a>
<a href="#" class="link"><span class="ir">์ธ</span></a>
</div>
</article>
<article class="image">
<figure class="image__box">
<img src="img/image_bg03_01.jpg" alt="">
</figure>
<div class="image__desc">
<h3>Color Dance</h3>
<p>untitled - 03</p>
</div>
<div class="image__sns">
<a href="#" class="link"><span>ํ์ด์ค๋ถ</span></a>
<a href="#" class="link"><span>ํธ์ํฐ</span></a>
<a href="#" class="link"><span>์ธ์คํ</span></a>
<a href="#" class="link"><span>์ธ</span></a>
</div>
</article>
</div>
</section>
02. style(css) ์ค์ ํ๊ธฐ : <style>
/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmarket {
font-family: 'GmarketSans';
font-weight: 300;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
vertical-align: top;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
min-width: 1160;
}
.container-fluid {
width: 100%;
padding: 0 100px;
box-sizing: border-box;
}
.section {
padding: 120px 0;
}
.section > h2 {
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* imageType03 */
.image__inner {
display: grid;
grid-template-areas:
"box1 box1 box2 box3"
"box1 box1 box4 box5"
;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
}
.image {
position: relative;
overflow: hidden;
}
.image__inner .image {}
.image__inner .image:nth-child(1) {
grid-area: box1;
background: url(img/image_bg03_01.jpg);
background-size: cover;
}
.image__inner .image:nth-child(2) {
grid-area: box2;
}
.image__inner .image:nth-child(3) {
grid-area: box3;
}
.image__inner .image:nth-child(4) {
grid-area: box4;
}
.image__inner .image:nth-child(5) {
grid-area: box5;
}
.image__box {}
.image__desc {
position: absolute;
left: 0;
bottom: -100%;
width: 100%;
backdrop-filter: blur(6px);
background: rgba(255,255,255,0.3);
padding: 16px;
box-sizing: border-box;
transition: all 0.3s ease;
}
.image:hover .image__desc {
bottom: 0;
}
.image__desc h3 {
font-size: 22px;
}
.image__desc p {
font-size: 16px;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image__sns {
position: absolute;
right: -100px;
top: 10px;
transition: all 0.4s ease;
}
.image__sns a {
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
display: block;
margin-bottom: 5px;
background: url(img/image_bg03_icon.svg);
}
.image__sns a:nth-child(1) {}
.image__sns a:nth-child(2) {
background-position: -50px 0;
}
.image__sns a:nth-child(3) {
background-position: -100px 0;
}
.image__sns a:nth-child(4) {
background-position: -150px 0;
}
.image__sns a:nth-child(5) {
background-position: -200px 0;
}
.image:hover .image__sns {
right: 10px;
}
03. ๊ฒฐ๊ณผ๋ณด๊ธฐ
728x90
๋ฐ์ํ
'CSS > Layout_Site' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ํ ์คํธ ์ ํ (2) (2) | 2022.09.01 |
|---|---|
| ํ ์คํธ ์ ํ (1) (2) | 2022.09.01 |
| ์ด๋ฏธ์ง ์ ํ (2) (2) | 2022.08.18 |
| ์ด๋ฏธ์ง ์ ํ (1) (4) | 2022.08.17 |
| ์นด๋ ์ ํ (3) (8) | 2022.08.11 |
๋๊ธ