[menu] 한줄로 나열되는 탭메뉴(반응형)

div와 div 사이를 margin으로 여백을 주는것도 좋지만

반응형을 하게되면 줄어들때마다 여백을 새로 지정해줘야하기 때문에 번거로움이 있어서

좀더 편한방법으로 할수 있는 css를 정리했다.

 

html구조는 너무 간단. 평소와 같다.

<div id="container">
  <ul id="tab" class="clfix">
    <li><a href="">111</a></li>
    <li><a href="">222</a></li>
    <li><a href="">333</a></li>
    <li><a href="">444</a></li>
    <li><a href="">555</a></li>
    <li><a href="">666</a></li>
    <li><a href="">777</a></li>
    <li><a href="">888</a></li>
    <li><a href="">999</a></li>
  </ul>
</div>

#container{max-width:1400px; width:100%;  margin:50px auto 0; }

#tab{margin:0 -5px; border:1px solid blue;}
#tab li{float:left; display:table;  width:20%; height:65px; padding:5px;}
#tab li a{display:table-cell; vertical-align:middle; text-align:center; border:1px solid #dfdfdf; font-size:13px; color:#fff; }
#tab li a:hover{background:#cda57d; border:1px solid #cda57d;}


@media screen and (max-width:1400px){
#tab li{ width:25%;}
#tab li{height:4.643vw; padding:0.357vw;}
#tab li a{border:1px solid #dfdfdf; font-size:0.929vw;  }
}

@media screen and (max-width:1024px){
#tab li{float:left; display:table;  width:calc(100% / 3);}
}

@media screen and (max-width:768px){
#tab li{float:left; display:table;  width:calc(100% / 2);}
}

#tab li에 padding으로 상하좌우 간격을 5px씩 주고 안에 있는 a 태그에 border를 준다.

(#tab에 mragin:0 -5px; 을 주는 이유는 #tab li 좌우에 5px을 줬기 때문에 전체 width가 1410px 이기때문에

양옆에 -5px을 줘서 1400px을 맞춰준다.)