탭메뉴 css 질문드립니다. 채택완료

#tabwrap {width:1400px;margin:0 auto;height:auto;border:1px solid blue;}

 

.tab_menu{position:relative;width:100%;height:50px;border:1px solid red;padding:0;}

.tab_menu{width:100%;height:50px;border:1px solid red;padding:0;}

.tab_menu ul.list {list-style:none;display:flex;width:100%;padding:0;margin:0;}

.tab_menu ul li {display:block;flex:1;border:1px solid #ccc;height:50px;text-align:center;line-height:50px;}

.tab_menu ul li a {display:block;text-decoration: none;}

.tab_menu .list .btn{font-size:15px;}

.tab_menu .list .cont{display:none; position:absolute;top:130px;left:0; background:#f1f1f1; color:#000;text-align:center; width:100%; height:500px;line-height:100px;}

.tab_menu .list li.is_on {background:#ddd;}

.tab_menu .list li.is_on .btn{font-weight:bold; color:green;}

.tab_menu .list li.is_on .cont{display:block;}



 

.foot {width:1400px;height:200px;border:1px solid #CCC;margin:0 auto;}



 





  

    

      Tab Button1

      Tab Content1

    

    

      Tab Button2

      Tab Content2

    

    

      Tab Button3

      Tab Content3

    

    

      Tab Button4

      Tab Content4

    

  







 const tabList = document.querySelectorAll('.tab_menu .list li');

 

  for(var i = 0; i  tabList.length; i++){

    tabList[i].querySelector('.btn').addEventListener('click', function(e){

      e.preventDefault();

      for(var j = 0; j  tabList.length; j++){

        tabList[j].classList.remove('is_on');

      }

      this.parentNode.classList.add('is_on');

    });

  }

 



 



footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooter