css 문의 드립니다.
본문
사이트 주소 입니다.
<div class="tab_content">
<div class="main flex">
<input type="radio" name="tabmenu" id="tab01" checked>
<label for="tab01">디자인패키지 (기획+디자인)</label>
<input type="radio" name="tabmenu" id="tab02">
<label for="tab02">올인원패키지<br>(기획+촬영+디자인)</label>
</div>
<div class="conbox con1">
<img src="../img/sec06main1.png" alt="">
</div>
<div class="conbox con2">
<img src="../img/sec06visu2.png" alt="">
</div>
</div>
탭 구분 html 입니다.
탭 정렬을 위해 main 이라는 div를 추가하면 탭 작동이 안되고
저걸 빼면 작동이 됩니다.
아래는 css 입니다.
.sec06 .conbox{display:none;margin-top:50px;}
.sec06 .main input[id="tab01"]:checked ~ .con1{display:block;}
.sec06 .main input[id="tab02"]:checked ~ .con2{display:block;}
이렇게 해도 작동이 안되는데 왜 이런걸까요 ㅠㅠ
답변 1
div 하나가 추가되어 종속 받는 객체의 위치가 달라져서 그렇습니다.
말씀하신 방법으로는 구현이 불가능 합니다.
CSS에서는 하위 객체로 부터 상위 객체를 선택할 수 없습니다.
남겨주신 구조 상으로는 불가능합니다, 제이쿼리나 자바스크립트를 이용해서 탭 메뉴를 구현해야 합니다.
도움이 되셨다면 채택 한번 부탁드립니다^^
