<결과화면>
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>fullscreen-slider-prec</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
input[type=radio] {
display: none;
}
.slider-wrap {
height: 100vh;
}
input[id=tab1]:checked ~ .slider-view .slider-roll {
left: 0;
}
input[id=tab2]:checked ~ .slider-view .slider-roll {
left: -100%;
}
input[id=tab3]:checked ~ .slider-view .slider-roll {
left: -200%;
}
input[id=tab1]:checked ~ .slider-view .btn-box label[for=tab1],
input[id=tab2]:checked ~ .slider-view .btn-box label[for=tab2],
input[id=tab3]:checked ~ .slider-view .btn-box label[for=tab3] {
background: gold;
width: 50px;
height: 20px;
border-radius: 20px;
}
.slider-view {
background: coral;
height: 100%;
overflow: hidden;
}
.slider-roll {
background: gold;
width: 300%;
height: 100%;
position: relative;
font-size: 0;
}
.slider-item {
display: inline-block;
color: #fff;
text-align: center;
width: 33.3333%;
font-size: 1rem;
height: 100%;
position: relative;
}
.slider-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.589);
}
.slider-item:nth-child(1) {
background: url(./image/duck-6198196_1920.jpg) no-repeat center / cover;
}
.slider-item:nth-child(2) {
background: url(./image/margarite-5366009_1920.jpg) no-repeat center / cover;
}
.slider-item:nth-child(3) {
background: url(./image/sky-5375005_1920.jpg) no-repeat center / cover;
}
.slider-desc {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
transform: translate(-50%, -50%);
}
.slider-desc h1 {
margin-bottom: .5rem;
}
.btn-box {
position: absolute;
bottom: 30px;
left: 50%;
transform: translate(-50%);
}
label[for*=tab] {
display: inline-block;
width: 20px;
height: 20px;
cursor: pointer;
background: rgb(255, 255, 255);
border-radius: 50%;
}
</style>
</head>
<body>
<div class="slider-wrap">
<input type="radio" name="tab" id="tab1">
<input type="radio" name="tab" id="tab2">
<input type="radio" name="tab" id="tab3">
<div class="slider-view">
<div class="slider-roll">
<div class="slider-item">
<div class="slider-desc">
<h1>
궁극의 기술 개발을 향한 여정,<br>
<strong>영자닷컴이 바꿀 미래</strong>를 주목하라.
</h1>
<p>
매년 범람하는 새로운 기술 및 보안에 대응하여 각 분야의 <br>
전문인력구성, 연구개발, 기술력 향상을 최우선으로 합니다.
</p>
</div>
</div>
<div class="slider-item">
<div class="slider-desc">
<h1>
IT 기술 성장의 중심 기업<br>
<strong>‘영자닷컴’</strong>
</h1>
<p>
공공분야, 대기업 중심의 IT컨설팅, SI구축, 웹기반 시스템구축,<br>
어플리케이션 플랫폼 구축 등을 수행하는 기업입니다.
</p>
</div>
</div>
<div class="slider-item">
<div class="slider-desc">
<h1>
<strong>환경</strong>과 <strong>안전</strong>을 위한<br>
<strong>기술적 가치</strong>를 추구하는 기업
</h1>
<p>
중·소규모 사업장의 효율적인 화학안전 관리를 위한 Smart System을 개발하여,<br>
환경과 안전을 위한 기술적 가치를 실현하고자 합니다.
</p>
</div>
</div>
</div>
<div class="btn-box">
<label for="tab1"></label>
<label for="tab2"></label>
<label for="tab3"></label>
</div>
</div>
</div>
</body>
</html>'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_65] float simple project-1 실습하기 (0) | 2021.05.06 |
|---|---|
| [코딩 공부_64] float란? (0) | 2021.05.04 |
| [코딩 공부_62] modal과 slider를 함께 응용하기 (0) | 2021.05.03 |
| [코딩 공부_61] modal, slider 만들기 (0) | 2021.05.01 |
| [코딩 공부_60] 메인 페이지 실습하기 (0) | 2021.05.01 |
댓글