- 21/08/10 수정
*완성본 탭버튼3개
1. 도트 네비게이션 클릭하면 색상 변경, 순서에 맞게 이미지 변경
label로 버튼 만들고 <input type=radio>와 label을 연결해서 input:checked 되면 이미지 변경, 버튼 백그라운드 변경
탭메뉴에 라디오 버튼을 이용하면 다중선택을 막을 수 있다.
- html
맨 처음 radio는 checked 넣기
<div class="tab-inner">
<input type="radio" name="tabmenu" id="tab1" checked>
<input type="radio" name="tabmenu" id="tab2">
<input type="radio" name="tabmenu" id="tab3">
<div class="content slide1">
<img src="img/tabmenu/slide-01.jpg" alt="">
</div>
<div class="content slide2">
<img src="img/tabmenu/slide-02.jpg" alt="">
</div>
<div class="content slide3">
<img src="img/tabmenu/slide-03.jpg" alt="">
</div>
<!-- 탭버튼 -->
<div class="btn">
<label for="tab1"></label>
<label for="tab2"></label>
<label for="tab3"></label>
</div>
</div>
- css
인접선택자 + : 바로 밑에 있는 요소만 가능함
형제선택자 ~ : 형제 중에 선택
position: absolute -> 인라인블럭으로 변경됨, width값 사라짐
width: 100% 필요
.tab-inner {
position: relative;
width: 300px;
height: 350px;
}
input[name=tabmenu] {
display: none;
}
.content {
opacity: 0;
position: absolute;
}
.btn {
position: absolute;
text-align: center;
bottom: 10px;
width: 100%;
}
.btn label {
display: inline-block;
width: 20px;
height: 20px;
background-color: lightgray;
border-radius: 50%;
cursor: pointer;
}
input[id=tab1]:checked ~ .slide1,
input[id=tab2]:checked ~ .slide2,
input[id=tab3]:checked ~ .slide3 {
opacity: 1;
/* visibility: visible; */
}
.tab-container input[id=tab1]:checked ~ .btn label[for=tab1],
.tab-container input[id=tab2]:checked ~ .btn label[for=tab2],
.tab-container input[id=tab3]:checked ~ .btn label[for=tab3] {
background-color: crimson;
}
2. visibility 써야하는 이유
이미지opacity: 0; -> checked되면 opacity: 1; 을 줘서 보이게 되어있는데, 여기서 opacity를 주석처리하면
3번째 이미지(.slide3)가 맨위로 올라오게 된다.
.content {
position: absolute;
/* opacity: 0; */
/* visibility: hidden;
}
이미지를 누를 수 있게 이미지 3개를 a태그로 감싸기 ( href를 #1 #2 #3로 설정 )
- 이미지에 opacity0 다시 넣기
<div class="content slide1">
<a href="#1">
<img src="../../../../images/tabcontent/tabcontent-01.jpg" alt="">
</a>
</div>
...
어느 탭을 눌러도 다 #3 으로 연결된다.
이미지에 visibility: hidden; 넣고 클릭되면 visibility: visible;로 변경하면 a링크가 제대로 간다.
.content {
opacity: 0;
position: absolute;
visibility: hidden;
}
input[id=tab1]:checked ~ .slide1,
input[id=tab2]:checked ~ .slide2,
input[id=tab3]:checked ~ .slide3 {
opacity: 1;
visibility: visible;
}
3. 트랜지션 추가
.content {
opacity: 0;
position: absolute;
visibility: hidden;
transition: .5s;
}
4. 배너 추가하기
.content 밑에 div 생성
span으로 따로 묶은이유는 fz 다르게 하기 위해서 이다.
<div class="heading">
<div class="text1">Sale <span>50%</span></div>
<div class="text2">Sale <span>30%</span></div>
<div class="text3">Sale <span>20%</span></div>
</div>
.text1,
.text2,
.text3 {
position: absolute;
padding-top: 10px;
box-sizing: border-box;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: crimson;
color: #fff;
font-size: 30px;
font-weight: bold;
text-align: center;
border-radius: 50%;
opacity: 0;
transform: translateY(-50px);
transition: .3s;
}
.text2 {
background-color: dodgerblue;
}
.text3 {
background-color: yellowgreen;
}
.text1 span,
.text2 span,
.text3 span {
font-size: 25px;
}
input[id=tab1]:checked ~ .heading .text1,
input[id=tab2]:checked ~ .heading .text2,
input[id=tab3]:checked ~ .heading .text3 {
opacity: 1;
transform: translateY(0);
transition-delay: .5s;
}
'Web > HTML CSS 퍼블리싱' 카테고리의 다른 글
before 가상클래스 #1 호버이펙트 (0) | 2021.06.30 |
---|---|
tab slider #3 풀 스크린 슬라이더 제작 (완성본) (0) | 2021.06.29 |
tab slider #2 풀 스크린 슬라이더 제작 (0) | 2021.06.24 |
tab slider #1 가로 세로 탭 슬라이더 (0) | 2021.06.24 |
tabmenu #2 - 슬라이드 (0) | 2021.06.23 |