html ,css만을 이용한 탭 메뉴 만들기

css를 이용한 탭메뉴를 만드는 것으로 주의해야할 점은!!

<input type="radio" name="tab_group" id="tab01 >

<label for="tab01">컨텐츠탭 버튼</label>

<input type="radio" name="tab_group" id="tab02 >

<label for="tab02">컨텐츠탭 버튼</label>

<input type="radio" name="tab_group" id="tab03 >

<label for="tab03">컨텐츠탭 버튼</label>

같은 라인에 보여줄 탭의 내용을 작성해야한다는 것이다. 만약 그렇게 하지 않으면 그 탭을 보여 줄 수 없다는 것을 기억해야한다. 

 

 

- input의 type을 radio로 지정하고 radio타입으로 되어 있는 부분들을 name으로 그룹화 시킨다.

 

- label for은 input의 id와 이름을 같게 하게 되면 input과 label의 연결되게 된다.