소개
안녕하세요!. 웹스토리보이입니다. 가장 기본적인 이미지 유형02을 만들어 보겠습니다. 쉬우니까 잘 따라해보세요~
-
webstandard
- 01_imageType01
- 02_imageType02
- image02_01.html :
디자인
디자인도 간단합니다.
이론
!를 치고 tab을 누르겠습니다.
언어를 ko로 변경하고 title은 메뉴 유형01로 변경하겠습니다.
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>슬라이드 유형02</title>
<style>
/* font */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmarket {
font-family: "GmarketSans";
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
em {
font-style: normal;
}
.ir_so {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}
/* common */
.gray {
background-color: #F6F8FD;
}
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background: rgba(0,0,0,0.3); */
}
.section {
padding: 120px 0;
text-align: center;
}
/* imageType */
.image__inner ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.image__inner ul li {
width: 32%;
position: relative;
}
.image__inner ul li img {
height: 100%;
}
.image__inner ul li span {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 20px;
box-sizing: border-box;
backdrop-filter: blur(10px);
}
.image__inner ul li strong {
font-size: 24px;
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.image__inner ul li:nth-child(1) span {
background: rgba(277, 77, 74, 0.5);
color: #6C0506;
}
.image__inner ul li:nth-child(1) span a {
color: #6C0506;
}
.image__inner ul li:nth-child(2) span {
background: rgba(255, 208, 89, 0.5);
color: #745A00;
}
.image__inner ul li:nth-child(2) span a {
color: #745A00;
}
.image__inner ul li:nth-child(3) span {
background: rgba(188, 181, 215, 0.5);
color: #D0C8FF;
}
.image__inner ul li:nth-child(3) span a {
color: #D0C8FF;
}
</style>
</head>
<body>
<section id="imageType" class="image__wrap section gmarket">
<h2>웹쓰 스터디 멤버</h2>
<p>웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다.</p>
<div class="image__inner container">
<ul>
<li>
<img src="https://webstoryboy.github.io/web2022/webs_img/image02_bg01.jpg" alt="스터디1">
<span>
<strong>웹쓰 24기 전현정</strong>
<a href="#">자세히 보기</a>
</span>
</li>
<li>
<img src="https://webstoryboy.github.io/web2022/webs_img/image02_bg02.jpg" alt="스터디2">
<span>
<strong>웹쓰 24기 전현정</strong>
<a href="#">자세히 보기</a>
</span>
</li>
<li>
<img src="https://webstoryboy.github.io/web2022/webs_img/image02_bg03.jpg" alt="스터디3">
<span>
<strong>웹쓰 24기 전현정</strong>
<a href="#">자세히 보기</a>
</span>
</li>
</ul>
</div>
</section>
<!-- //이미지 영역(유형2) -->
</body>
</html>
view2
view3
view4
참고
728x90
