728x90
반응형
![](https://blog.kakaocdn.net/dn/8M8I8/btrJSXfmadm/cWMk54hqVFOaP5aZIjzdJK/img.jpg)
사이트 만들기 : 이미지유형02
사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 이미지 유형에 대해 알아봅시다.
Figma
코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다.
CSS
/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmark {
font-family: GmarketSans;
font-weight: 500;
}
/* 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;
}
.section {
padding: 120px 0;
min-width: 1160px;
}
.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: #f5f5f5;
position: relative;
overflow: hidden;
}
.image__box img {
vertical-align: top;
transition: all 0.5s ease-in-out;
}
.image__desc {
position: absolute;
left: 0;
bottom: -100px;
width: 100%;
height: 100px;
text-align: center;
backdrop-filter: blur(10px);
padding: 23px 20px;
box-sizing: border-box;
background: rgba(266, 56, 59, 0.1);
color: #000;
transition: all 0.3s ease-in-out;
}
.image:hover .image__desc {
bottom: 0;
}
.image:hover .image__box img {
transform: scale(1.03);
}
.image1 .image__desc {
background-color: rgba(163, 255, 91, 0.1);
}
.image2 .image__desc {
background-color: rgba(96, 52, 0, 0.34);
}
.image3 .image__desc {
background-color: rgba(2, 52, 99, 0.35);
}
.image__desc h3 {
font-size: 24px;
margin-bottom: 5px;
}
.image__desc .more {
font-size: 16px;
color: #000;
}
.image__desc .more:hover {
text-decoration: underline;
}
HTML
<section id="imageType01" class="image__wrap gmark section">
<h2>자연</h2>
<p>아름다운 자연 경관을 함께 봅시다.</p>
<div class="image__inner container">
<article class="image image1">
<figure class="image__box">
<img src="img/img_bg02_01.jpg" alt="숲">
</figure>
<div class="image__desc">
<h3>폭포가 흐르는 숲</h3>
<a href="/" class="more" title="자세히 보기">자세히 보기</a>
</div>
</article>
<article class="image image2">
<figure class="image__box">
<img src="img/img_bg02_02.jpg" alt="호수">
</figure>
<div class="image__desc">
<h3>노을이 지는 호수</h3>
<a href="/" class="more" title="자세히 보기">자세히 보기</a>
</div>
</article>
<article class="image image3">
<figure class="image__box">
<img src="img/img_bg02_03.jpg" alt="산">
</figure>
<div class="image__desc">
<h3>눈 쌓인 산</h3>
<a href="/" class="more" title="자세히 보기">자세히 보기</a>
</div>
</article>
</div>
</section>
728x90
반응형
'사이트' 카테고리의 다른 글
텍스트 유형01 (5) | 2022.08.30 |
---|---|
이미지 유형03 (3) | 2022.08.21 |
이미지 유형01 (2) | 2022.08.17 |
사이트 유형 - 카드 유형03 (8) | 2022.08.10 |
사이트 유형 - 카드 유형02 (11) | 2022.08.09 |