css만으로 탭 구성 하기

제목 그대로, css만으로 탭 구성하기에 대해서 포스팅을 해봅니다.

아래와 같은 형태로 만들 예정인데 이는 css3의 선택자로 하여금 간단하게 css만으로 만들 수가 있습니다.

하지만 ie 8,7 과 같은 하위 버전의 브라우저에서는 css3가 안된다는 것을 알고 계시기 바랍니다.

방법은 두가지로 나뉠 수 있습니다.

기본적으로 아래의 html을 가지고 작업을 하도록 하겠습니다.

<ul class="tab">
  <li><a href="#">제목</a></li>
  <li><a href="#">제목</a></li>
  <li><a href="#">제목</a></li>
  <li><a href="#">제목</a></li>
</ul>

 

1. flex를 이용한 탭 구성

첫 번째로는 flex를 이용한 탭 구성입니다.

 

.tab {display:-ms-flexbox; display:flex;}
.tab li {-ms-flex:1; -webkit-flex:1; -moz-flex:1;}
.tab li+li {margin-left:10px}

해당 css를 통해서 탭은 균일한 크기를 가지게 됩니다.

그러나, flex라는 속성은 ie10부터 적용이 가능하니 이점 참고해서 작업을 해야 할 것 같습니다.

또한 브라우저들의 하위 속성들 지원을 위해 벤더 프리픽스(vendor prefix)를 같이 써줘야 호환성에 좋습니다.

 

 

2. nth-last-of-child를 이용한 탭 구성

css3가 적용됨에 따라 class나 id 셀렉터 없이도 간편하게 css를 적용할 수 있게 되었습니다.

개인적으로 저는 이러한 셀렉터들이 하나의 조건문으로 생각이 됩니다. 많이 알아두면 알아둘수록 유익하다고 생각이 듭니다.

 

.tab li:first-child:nth-last-of-type(4),
.tab li:first-child:nth-last-of-type(4) ~ li {width:25%;} 
// 괄호()안에 숫자는 탭의 숫자 마다 변경하시면 됩니다.

해당 css를 하나하나 해석해보면 아래와 같습니다.

 

.tab li:first-child:nth-last-of-type(4),
// tab의 자식 격인 li가 첫번째 자식이자, 마지막에서부터 4번째 자식일 경우 (즉, 4개의 탭메뉴 중 첫번째를 뜻합니다.)
.tab li:first-child:nth-last-of-type(4) ~ li {width:25%;}
// tab의 자식 격인 li가 첫번째 자식이자, 
// 마지막에서부터 4번째 자식인 li(4개의 탭메뉴 중 첫번째 li)가 앞에 존재하는 
// 뒤의 li들을 뜻함.

이런 식으로 다양한 개수를 가진 탭을 작성할 수가 있습니다.

ie9부터 지원하는 사이트가 많아지고 있는 추세인데 (이미 많습니다.)

개수에 따라 클래스를 주던 방식이 사라지고 좀 더 다양한 속성과 선택자로 즐겁게 코딩할 수 있다면 더욱 좋겠네요!

​

 

 

 

*댓글과 좋아요는 힘이 됩니다.