border가 겹쳐있는 탭메뉴 만들기

***

--------------------

|           |          |

|           |          |

--------------------

이런식으로 보더값이 

하나하나 박스에 들어가있는게 아니라 

하나의 border 를 공유하고 있는 구조일때 만드는방법

***

방법이야 여러가지겠지만 

원리위주로

2개만 적어봄.

***

참고로

active 는 hover 나 선택되었을때 효과를 의미함.

***

방법 하나

1.  li 마다 border 값을 줌

2. li 두번째꺼부터 margin-left:-1px 씩 줌.

여기까지하면 정상적으로 보이나

왼쪽 border 가 다음 li 에 가려서 안보이는 문제가 있음

3. li 에 position:relative; z-index:1; 를 줌.

4. active 시에 z-index:2; 를 줌.

***

방법 둘

1. li 마다 border 값을 줌.

2. li 두번째꺼부터 margin-left:-1px 씩 / border-left:1px solid transparent; 를 줌

3.  active 시에 border-left:1px solid 원하는색상 을 줌.

***

방법 하나 는 position:relative 라는게 성능적으로 되게 안좋다고 알고있어서(리플로우?) 별로인거같고

방법 하나 쓸바에 둘 쓰는게 낫다고 봄.