[CSS] 초간단 CSS만으로 탭메뉴 구현하는 방법 두가지(javascript 없이 탭메뉴 구현하기)

방법1. 라디오버튼을 이용한다. 

 

 

아래와같은 구조로, 라디오 버튼을 이용해 1개만 선택할수 있도록하고, 선택한 라디오버튼에 해당하는 내용을 보여준다. 

 

<li id="tab1" class="btnCon"> 
	<input type="radio" checked name="tabmenu" id="tabmenu1">
    <label for="tabmenu1">menu1</label>
    <div class="tabCon" ></div>
</li>

.tabmenu input:checked ~ label{
  background:#ccc;
}
.tabmenu input:checked ~ .tabCon{
  display:block;
}

 

 

 

 

탭안에 탭 넣기

 

 

 

 

---

 

 

방법2. 가상클래스 선택자 :target 을 이용한다. 

 

 

 

[CSS] - [CSS] :target 가상클래스 선택자

 <li id="tab1" class="btnCon">
	<a class="btn first" href="#tab1">menu1</a>
	<div class="tabCon" >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</li>

#tab1로 싸여진 탭 메뉴와 해당 내용의 구조로 이루어져있고,

 

:target 가상클래스 선택자를 이용해서  탭메뉴를 구현한다. 

 

 

.btnCon:target  {
  background : #ccc;
}
.btnCon:target .tabCon{
  display: block;
}

 

 

필요한 스크립트는

location.href = "#tab1";

맨처음 아무것도 클릭이 안되어 있는 상태여서 활성화를 시켜주기위해 한줄을 추가해준다.