공부 노트

- 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;
}