SMALL
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="css/reset.css">
<style>
body {
padding:50px;
}
.slidebox {
width: 600px;
height: 300px;
border: 10px solid #000;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slidebox .container {
width: 2400px;
display: flex;
transform: translateX(-1800px);
}
.slidebox .container li {
flex:none;
width: 600px;
height: 300px;
background-color: #f00;
font-size: 100px;
text-align: center;
line-height: 300px;
color:#fff;
}
.slidebox .pagenavi {
position: absolute;
left:0; bottom:30px;
background-color: #fc0;
display: flex;
width: 100%;
justify-content: center;
gap: 20px;
}
.slidebox .pagenavi li {
background-color: #0f0;
flex:none;
width: 30px; height: 30px;
border-radius: 15px;
text-indent: -9999px;
}
.slidebox .prev,
.slidebox .next {
position: absolute;
top:50%;
transform: translateY(-50%);
}
.slidebox .prev {
left:20px;
}
.slidebox .next {
right:20px;
}
/*
> 자식요소
+ 바로 다음에 오는 동생
*/
.box {
background-color: #ccc;
}
.box label {
background-color: #999;
position: relative;
display: flex;
gap:20px;
}
.box label::before {
content: '';
width: 25px;
height: 25px;
background: #333;
display: inline-block;
}
.box input:checked + label::before {
background:#f00;
}
.box1 {
background: #ddd;
}
.box1 label {
display: block;
background: #ccc;
line-height: 60px;
font-size: 40px;
padding-left: 140px;
position: relative;
}
.box1 label::before {
content: '';
width: 120px;
height: 60px;
border-radius: 30px;
background: #999;
position: absolute;
left: 0; top: 0;
}
.box1 label::after {
content: '';
width: 50px;
height: 50px;
border-radius: 25px;
background: #fff;
position: absolute;
left: 5px; top: 5px;
transition: left 0.3s ease-in-out;
}
.box1 input:checked + label::before {
background: #0f0;
}
.box1 input:checked + label::after {
left: 65px;
}
</style>
</head>
<body>
<!-- 슬라이드 기본구조 -->
<div class="slidebox">
<ul class="container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul><!-- 이미지를 데리고 움직이는 박스-->
<!-- 네비게이션 영역(좌우,페이지버튼,정지재생버튼) -->
<!-- 페이지네비게이션(이미지하단 ) -->
<ul class="pagenavi">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button class="prev">PREV</button>
<button class="next">NEXT</button>
</div><!-- 600*300-->
<div class="spacer"></div>
<div class="box">
<input type="checkbox" id="agree" class="hide">
<label for="agree">동의하기</label>
</div>
<div class="spacer"></div>
<div class="box1">
<input type="checkbox" id="secure">
<label for="secure">보안접속</label>
</div>
</body>
</html>
LIST
'프론트엔드 개발자 > CSS' 카테고리의 다른 글
| 클론코딩 레이아웃 만들기3 (0) | 2023.03.29 |
|---|---|
| html css 레이아웃 구성하기 1 (0) | 2023.03.28 |
| html css Tab Contents와 Slides Contents css 구성하기 (js X) +code 클론코딩 (0) | 2023.03.24 |
| table 클론코딩 + code (0) | 2023.03.24 |
| form 태그와 table태그 공부하기 (0) | 2023.03.24 |
댓글