반응형 탭 메뉴 만들기

• A + B : +는 인접 형제 결합자. 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택함.
• A ~ C : ~는 일반 형제 결합자. 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택함.
• A[B] : []는 특성 선택자. 특정 속성[B]을 가진 요소만을 선택함.
  
  
• <A class="B C"> : <A>가 B와 C라는 두가지 class를 한꺼번에 가진다.

[html]

<div id="visual">
        <input type="radio" id="tab1" name="tabmenu">
        <label for="tab1">버튼1</label>
        <input type="radio" id="tab2" name="tabmenu" checked="checked">
        <label for="tab2">버튼2</label>
        <input type="radio" id="tab3" name="tabmenu">
        <label for="tab3">버튼3</label>
        <div class="box con1">버튼1에 대한 화면</div>
        <div class="box con2">버튼2에 대한 화면</div>
        <div class="box con3">버튼3에 대한 화면</div>
</div>

• <div>가 띄어쓰기로 인해 box와 con1~3이라는 두가지 class를 지닌 상태. (id에는 띄어쓰기로 인한 분리가 먹히지 않는다. 띄어쓰기 대신 하이픈(-)이나 언더바(_)를 사용하는 것도 불가능)

• <label>은 <input>의 id 속성과 연결되어 있다.

• <input type="radio">는 여러 선택지 중에서 한 가지만 선택하고 싶을 때 사용한다. (name속성을 같게 해서 하나의 그룹으로 묶어야 한다.)
  
  

[css]

input[type='radio'] {
    display: none;
}

input[type='radio'] + label {
    display: inline-block;
    padding: 20px;
    background: #cccccc;
    font-size: 14px;
    color: #999999;
    cursor: pointer;
}

input[type="radio"]:checked + label {
    background: #aaa;
    color: #333;
}

.box {
    width: 500px;
    height: 500px;
    background: #999;
    display: none;
}

#tab1:checked ~ .con1 {
    display:block;
}


#tab2:checked ~ .con2 {
    display:block;
}

#tab3:checked ~ .con3 {
    display:block;
}

.box {
    width: 500px;
    height: 500px;
    background: #999;
    position: absolute;
    left: -500px;
    transition: all 1s;
}

#tab1:checked ~ .con1 {
    display:block;
    left: 0px;
}

#tab2:checked ~ .con2 {
    display:block;
    left: 0px;
}

#tab3:checked ~ .con3 {
    display:block;
    left: 0px;
}

[사용된 태그 해설]

1) <input>의 속성인 checked는 디폴트 상태에서 이미 체크가 되어있도록 해준다.(뒤에 따라붙는 ="checked"는 생략 가능.)

2) input[type='radio'] : <input> 엘리먼트 중에서도 radio 타입만을 선택했음을 의미.

3) input[type="radio"]:checked + label : 체크된 <input>과 <label>을 묶어서 CSS 효과 부여.

4) .box {} : class="box"를 공유하는 <div>를 묶음 처리.

5) #tab1:checked ~ .con1 {} : 버튼1(<input type="radio" id="tab1">)이 선택되었을 때 버튼1에 대응하는 화면(<div class="box con1">)이 반응하도록 한다.

6)transition으로 애니메이션 효과 부여.

아래는 완성본.

[html]
    <div id="visual">
        <input type="radio" id="tab1" name="tabmenu">
        <label for="tab1">버튼1</label>
        <input type="radio" id="tab2" name="tabmenu" checked="checked">
        <label for="tab2">버튼2</label>
        <input type="radio" id="tab3" name="tabmenu">
        <label for="tab3">버튼3</label>
        <div class="box con1">버튼1에 대응하는 화면</div>
        <div class="box con2">버튼2에 대응하는 화면</div>
        <div class="box con3">버튼3에 대응하는 화면</div>
    </div>

[css]

ul,li {list-style: none;}

a{text-decoration: none;}


input[type='radio'] {
    display: none;
}

input[type='radio'] + label {
    display: inline-block;
    padding: 20px;
    background: #cccccc;
    font-size: 14px;
    color: #999999;
    cursor: pointer;
}

input[type="radio"]:checked + label {
    background: #aaa;
    color: #333;
}

.box {
    width: 300px;
    height: 300px;
    background: #999;
    position: absolute;
    left: -600px;
    transition: all 1s;
}

#tab1:checked ~ .con1 {
    display:block;
    left: 0px;
    transition: all 1s;
}

#tab2:checked ~ .con2 {
    display:block;
    left: 0px;
    transition: all 1s;
}

#tab3:checked ~ .con3 {
    display:block;
    left: 0px;
    transition: all 1s;
}