CONTENTS
CSS 기능 실습
slider
tab
---------------------------------------------------------------
CSS 기능 실습
slider
<slider>
예제)
boxing
html
<body>
<section id="main">
<input type="radio" name="slide" id="slide01">
<input type="radio" name="slide" id="slide02">
<input type="radio" name="slide" id="slide03">
<div class="slidebox">
<div class="slides">
<div class="slide">
<label for="slide03" class="left"><i class="fa-solid fa-chevron-left"></i></label>
<div class="banner container">
<div class="text_box">
<h1>Zay eCommerce</h1>
<h2>Tiny and Perfect eCommerce Template</h2>
<p>Zay Shop is an eCommerce HTML5 CSS template with latest version of<br> Bootstrap 5 (beta 1). This
template is 100% free provided by TemplateMo<br> website. Image credits go to Freepik Stories, Unsplash
and Icons 8.</p>
</div>
<div class="img_box">
<img src="./img/banner_img_01.jpg" alt="shose">
</div>
</div>
<label for="slide02" class="right"><i class="fa-solid fa-chevron-right"></i></label>
</div>
<div class="slide">
<label for="slide01" class="left"><i class="fa-solid fa-chevron-left"></i></label>
<div class="banner container">
<div class="text_box">
<h1>Proident occaecat</h1>
<h2>Aliquip ex ea commodo consequat</h2>
<p>You are permitted to use this Zay CSS template for your commercial<br> websites. You are not
permitted to re-distribute the template ZIP file in any<br> kind of template collection websites.</p>
</div>
<div class="img_box">
<img src="./img/banner_img_02.jpg" alt="cos">
</div>
</div>
<label for="slide03" class="right"><i class="fa-solid fa-chevron-right"></i></label>
</div>
<div class="slide">
<label for="slide02" class="left"><i class="fa-solid fa-chevron-left"></i></label>
<div class="banner container">
<div class="text_box">
<h1>Repr in voluptate</h1>
<h2>Ullamco laboris nisi ut</h2>
<p>We bring you 100% free CSS templates for your websites. If you wish to <br> support TemplateMo,
please make a small contribution via PayPal or tell <br> your friends about our website. Thank you.
</p>
</div>
<div class="img_box">
<img src="./img/banner_img_03.jpg" alt="lamp">
</div>
</div>
<label for="slide01" class="right"><i class="fa-solid fa-chevron-right"></i></label>
</div>
</div>
</div>
<div class="slide_btn">
<label for="slide01"></label>
<label for="slide02"></label>
<label for="slide03"></label>
</div>
</section>
</body>
css
*{
margin:0;
padding:0;
text-decoration : none;
list-style:none;
box-sizing:border-box;
color: inherit;
}
.container{
width: 70%;
margin: 0 auto;
}
#main{
padding: 20px;
position: relative;
background-color: #efefef;
}
.slidebox{
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.slides{
font-size: 0;
}
.slide{
font-size: 20px;
width: 100%;
display: inline-block;
position: relative;
transition: all 2s;
}
#main .slidebox {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: #59ab6e;
border: transparent;
}
.left{
left: 0;
}
.right{
right: 0;
}
.banner{
display: flex;
justify-content: center;
white-space: wrap;
} /* nowrap했던 걸 다시 되돌려줌 */
.text_box{
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 20px;
}
.img_box{
width: 50%;
}
img{
width: 100%;
height: 100%;
}
/* 형제 중 하나*/
#main input[id="slide01"]:checked ~ .slidebox .slide {
transform: translateX(0%);
}
#main input[id="slide02"]:checked ~ .slidebox .slide {
transform: translateX(-100%);
}
#main input[id="slide03"]:checked ~ .slidebox .slide {
transform: translateX(-200%);
}
#main input {
display: none;
}
/* 크기 width */
#main .slide_btn{
width: 20%;
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
#main .slide_btn label {
display: inline-block;
width: 20%;
height: 8px;
margin-right: 5px;
background-color: #99d4a7;
cursor: pointer;
}
#main input[id="slide01"]:checked ~ .slide_btn label[for="slide01"] {
background-color: #59ab6e;
}
#main input[id="slide02"]:checked ~ .slide_btn label[for="slide02"] {
background-color: #59ab6e;
}
#main input[id="slide03"]:checked ~ .slide_btn label[for="slide03"] {
background-color: #59ab6e;
}
<slider_fix>
html
<body>
<section id="slider">
<input type="radio" name="slide" id="s01" checked>
<input type="radio" name="slide" id="s02">
<input type="radio" name="slide" id="s03">
<div class="slidebox">
<div class="slides">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
</div>
<div class="controlbox">
<div class="control01">
<label for="s03" class="left">왼쪽</label>
<label for="s02" class="right">오른쪽</label>
</div>
<div class="control02">
<label for="s01" class="left">왼쪽</label>
<label for="s03" class="right">오른쪽</label>
</div>
<div class="control03">
<label for="s02" class="left">왼쪽</label>
<label for="s01" class="right">오른쪽</label>
</div>
</div>
</div>
</section>
</body>
</html>
css
/* 브라우저 마진과 패딩 리셋 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
color: inherit;
}
#slider .slidebox {
width: 100px;
height: 100px;
margin: 30px auto;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
position: relative;
}
#slider .slidebox .slides {
font-size: 0;
}
#slider .slidebox .slides .slide {
width: 100px;
height: 100px;
font-size: 16px;
display: inline-block;
transition: all .5s;
border: 1px solid red;
}
/* 좌우로 넘기는 LABEL버튼에 대한 스타일 */
#slider .controlbox label {
position: absolute;
z-index: 1;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
display: none;
}
#slider .controlbox .left {
left: 0px;
}
#slider .controlbox .right {
right: 0px;
}
#slider input[id="s01"]:checked ~ .slidebox .control01 label{
display: block;
}
#slider input[id="s02"]:checked ~ .slidebox .control02 label{
display: block;
}
#slider input[id="s03"]:checked ~ .slidebox .control03 label{
display: block;
}
#slider input[id="s01"]:checked~.slidebox .slides .slide {
transform: translateX(0%);
}
#slider input[id="s02"]:checked~.slidebox .slides .slide {
transform: translateX(-100%);
}
#slider input[id="s03"]:checked~.slidebox .slides .slide {
transform: translateX(-200%);
}
/* input 가리기 */
#slider input[type="radio"] {
display: none;
}
<tab>
html
<body>
<br><br>
<input type="radio" name="tab_radio" id="a">
<input type="radio" name="tab_radio" id="b">
<input type="radio" name="tab_radio" id="c">
<input type="radio" name="tab_radio" id="d">
<div id="tab_box">
<div id="tab_button">
<label for="a" class="a">aaa</label>
<label for="b" class="b">bbb</label>
<label for="c" class="c">ccc</label>
<label for="d" class="d">ddd</label>
</div>
<div id="tab_content">
<div class="all a">첫번째 상자입니다.</div>
<div class="all b">두번째 상자입니다.</div>
<div class="all c">세번째 상자입니다.</div>
<div class="all d">네번째 상자입니다.</div>
</div>
</div>
</body>
css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
/*라디오 버튼 선택*/
#a,#b,#c,#d{
display: none;
}
#tab_box{
width: 60%;
margin: 0 auto;
border: 1px solid red;
}
#tab_button{
font-size: 0px;
}
#tab_button label{
width: 25%;
display: inline-block;
font-size: 16px;
color: white;
background-color: rgb(89, 89, 245);
padding: 20px 0;
}
/* 기능부 중에 콘텐츠 나타내기*/
.all {display: none;}
#a:checked ~ #tab_box #tab_content .a{
display: block;
}
#b:checked ~ #tab_box #tab_content .b{
display: block;
}
#c:checked ~ #tab_box #tab_content .c{
display: block;
}
#d:checked ~ #tab_box #tab_content .d{
display: block;
}
/* 기능부 중에 버튼의 배경색상 바꾸기 */
#a:checked ~ #tab_box #tab_button .a{
background-color: pink;
}
#b:checked ~ #tab_box #tab_button .b{
background-color: pink;
}
#c:checked ~ #tab_box #tab_button .c{
background-color: pink;
}
#d:checked ~ #tab_box #tab_button .d{
background-color: pink;
}
.a,.b,.c,.d{
transition: all 2s;
}
'웹프로그래밍 > CSS' 카테고리의 다른 글
| 프로그래밍 언어 활용 21일차 (24/12/9) (0) | 2024.12.09 |
|---|---|
| 프로그래밍 언어 활용 20일차 (24/12/06) (2) | 2024.12.06 |
| 프로그래밍 언어 활용 18일차 (24/12/04) (0) | 2024.12.04 |
| 프로그래밍 언어 활용 17일차 (24/12/03) (0) | 2024.12.03 |
| 프로그래밍 언어 활용 16일차 (24/12/02) (0) | 2024.12.02 |